例题—CSS（2）

六、盒子模型

1.什么是盒子模型？
CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性：

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。
  
  2.标准盒子类型和怪异盒子类型（IE盒子类型）
  在标准模式下，一个块的总宽度 = 内容的width + padding(左右) + border(左右) + margin(左右)
  
  在怪异模式下，一个块的总宽度 = 内容的width + margin(左右)（这里的width包含了padding(左右)和border(左右)的值）
  
  例如一个div：
  

在标准模式下：总宽度为144px

在怪异模式下：总宽度为100px