【CSS布局.1】盒子模型

 

例子：

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

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

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

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

当你使用CSS定义你的盒子的width和height时，你定义的并不是内容区域、补丁、边框和边界所占的总区域。实际上你定义的是内容区域的width和height 。

为了计算盒子所占的区域必须加上padding、border和margin。所以，

盒子的总长度为；

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

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

盒子的总高度为：

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

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