第四章主要介紹的是CSS的盒模型，CSS的盒模型指的是網(wǎng)頁布局中的HTML元素，每個元素都被視為一個盒子，這個盒子擁有多個屬性，如width、height、margin、padding等等，這些屬性能夠影響到盒子的大小、位置、填充以及邊框等等。

盒模型的四個部分分別是：內(nèi)容區(qū)域、內(nèi)邊距區(qū)域、邊框區(qū)域和外邊距區(qū)域。其中，內(nèi)容區(qū)域指的是HTML元素的實際內(nèi)容部分，內(nèi)邊距區(qū)域指的是內(nèi)容區(qū)域和邊框之間的空白區(qū)域，邊框區(qū)域指的是內(nèi)邊距和外邊距之間的線框，外邊距區(qū)域指的是邊框和其它HTML元素之間的空白區(qū)域。

如何設(shè)置盒模型的屬性呢？首先，可以使用width和height屬性來設(shè)置內(nèi)容區(qū)域的大小；其次，使用padding屬性來設(shè)置內(nèi)容區(qū)域與內(nèi)邊距區(qū)域之間的空白區(qū)域大小；再次，使用border屬性來設(shè)置邊框區(qū)域的線框大小；最后，使用margin屬性來設(shè)置外邊距區(qū)域的大小。

.box {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid red;
margin: 20px;
}

以上代碼就是一個基本的盒模型設(shè)置，可以看到，這個盒子的內(nèi)容區(qū)域大小為200px*100px，內(nèi)邊距區(qū)域為10px，邊框區(qū)域為2px，外邊距區(qū)域為20px，顏色為紅色的實線。CSS的盒模型非常重要，它直接影響到網(wǎng)頁的布局和美觀程度。