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"