彻底弄懂CSS盒子模式

理解CSS盒子模型

　　什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

先看下面的代码：

.box {
width: 200px;
border: 10px solid #99c;
padding: 15px;
margin: 20px;
}

HTML代码：

<p class="box"> 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 </p>

代码效果：

这就是一个盒子。任何HTML元素都可以看作是一个盒子，所以CSS盒子模型可以应用于所有HTML元素（和XHTML元素）。下面的图片能加强你对盒子模型的理解。

正如你能看到的，一个盒子由四个独立部分组成，最外面的是边界(margin)总是透明的第二部分是边框（border），边框可以有不同的样式。第三部分是补丁（padding），补丁用来定义内容区域与边框（border）之间的空白。第四部分是内容区域。

背景（Background）就是在边框以内的区域，包括补丁（padding）和内容区域。

当你使用CSS定义你的盒子的width和height时，你定义的并不是内容区域、补丁、边框和边界所占的总区域。实际上你定义的是内容区域的width和height。为了计算盒子所占的区域必须加上padding、border和margin。所以，盒子的总长度为；

左padding +左 border + 左margin+ width +右padding +右 border + 右margin

即上面盒子的总长度为：20px+10px+15px+200px+15px+10px+20px=390px.这意味着上面盒子占390px的水平空间。

盒子的总高度为：

上padding +上border + 上margin+ height +下padding + 下border + 下margin

注意：在IE5和IE5.5浏览器中对盒子的算法不一样，width和height包括了内容区域和padding，也就是说，在IE5和IE5.5浏览器显示的盒子高度和长度会比IE6浏览显示的盒子高度和长度短。现在，IE5和IE5.5浏览器基本上没有人使用了。