css盒模型

什么是css盒模型

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域），如图所示：

盒模型.png

不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

元素的宽度和高度

当指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。
元素的总宽度计算公式是这样的：
总元素的宽度=宽度（width）+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度(height)+顶部填充+底部填充+上边框+下边框+上边距+下边距

盒模型的兼容性

盒子模型分为两类：
W3C标准盒子模型和IE盒子模型。这两者的关键差别就在于：
W3C盒子模型——height和width这两个值不包含 padding和border。
IE怪异模式中盒子模型——height和width这两个值包含 padding和border。
解决兼容性的办法：
目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。 解决IE8及更早版本不兼容问题可以在HTML页面声明即可。