盒子模型
div块看为i一个一个的盒子
盒式模型主要有四个区域:
内容、内边距、边框、外边距
border边框
##body-style
点状dotted
实线solid
双线double(至少三像素)
虚线dash
无边框none
外边距 margin
margin-left(right)(top)(buttom):value;
margin:value(四个方向相同);
margin:value(上下)value(左右)
margin:value(上)value(左右)value(下)
margin:value(上)value(右)value(下)value(左)
取值可以为负数
内边距 padding
类似外边距,取值不能为负
外边距合并
两个垂直外边距相遇时,会合并成一个外边距
外边距的大小等于较大的外边距
当子元素和父元素的外边距合并时有三种处理方式:
- 加border
- overflow:hiddem;
- padding
行内元素只有不会发生外边距合并
浮动元素的外边距也不合并
允许制定负的外边距值
怪异盒子
IE的盒子模型也就是怪异盒子模型
IE盒子模型的宽width包含了padding和border
实际宽度=margin+width
Box-sizing
box-sizing属性允许定义盒子模型为“w3c的盒子模型”或“IE盒模型”
- content-box 标准
实际大小为宽高+border+padding - border-box 怪异
实际大小为宽高+padding+borer+margin
大多数浏览器以标准盒子模型为主