-
CSS盒模型
CSS盒模型
盒子模型的内容
- content
- border
- padding
- margin
width和height
- 只能设置块级元素,对行内元素无效;
- 针对的是content区域;
- 不设置数值,默认为容器的值auto
border
- border-style
- 常用样式:solid,dashed,dotted,double
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
- 样式值提供顺序:top-right-bottom-left
- border-width
- border-color
- 简写形式:border:width style color(无顺序之分,常用)
padding
- 对行内元素,在水平方向有效,垂直方向无效(padding-top/bottom)
- div在浏览器实现居中,margin=0 auto;
margin
- 两个div上下布局时,垂直方向会发生重叠,上div的margin-bottom和下div的margin-top中取较大的值
- 对行内元素,水平方向有效,无重叠,垂直方向无效.
- 顺序是上-右-下-左
- 两div布局,外div无边框,内div有边框时,设置内div的margin-top无法实现,原因是浏览器默认两个div是同一个边框,解决方法:style="overflow:hidden"
元素的实际大小=margin2+border2+padding*2+height(width)
-
相关阅读:
每日一小练——数值自乘递归解
linux的webserver配置与管理——创建用户个人主页
微价值:专訪《甜心爱消除》个人开发人员Lee,日入千元!
四月二十五日,bugzilla for CentOS 安装
【剑指offer】顺时针打印矩阵
何从之
Java实现 蓝桥杯VIP 基础练习 时间转换
Java实现 蓝桥杯VIP 基础练习 时间转换
Java实现 蓝桥杯VIP 基础练习 字符串对比
Java实现 蓝桥杯VIP 基础练习 字符串对比
-
原文地址:https://www.cnblogs.com/sapho/p/4752275.html
Copyright © 2020-2023
润新知