【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的垂直空間。