CSS基础知识（四）

盒子模型

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

类似外边距，取值不能为负

外边距合并

两个垂直外边距相遇时，会合并成一个外边距
外边距的大小等于较大的外边距
当子元素和父元素的外边距合并时有三种处理方式：

1. 加border
2. overflow:hiddem;
3. padding

行内元素只有不会发生外边距合并
浮动元素的外边距也不合并
允许制定负的外边距值

怪异盒子

IE的盒子模型也就是怪异盒子模型
IE盒子模型的宽width包含了padding和border
实际宽度=margin+width

Box-sizing

box-sizing属性允许定义盒子模型为“w3c的盒子模型”或“IE盒模型”

• content-box 标准
  实际大小为宽高+border+padding
• border-box 怪异
  实际大小为宽高+padding+borer+margin
  大多数浏览器以标准盒子模型为主