今天是學(xué)習(xí) CSS 十天第三天，主要學(xué)習(xí)布局和盒模型。

CSS 布局是網(wǎng)頁設(shè)計的重要部分，無論是響應(yīng)式設(shè)計還是固定寬度設(shè)計，對布局的掌握都是至關(guān)重要的。網(wǎng)頁布局的目的是把不同的內(nèi)容按照一定的規(guī)則和方式組織在一起，形成一個整體、和諧的頁面。CSS 提供了多種布局方法，包括常用的塊級元素布局、浮動布局、定位布局以及彈性盒模型 (Flexbox) 布局等。

盒模型是指一個 HTML 元素從外到內(nèi)包含四個部分：外邊距 (margin)、邊框 (border)、內(nèi)邊距 (padding) 和內(nèi)容 (content)。在 CSS 中，每個元素都自帶默認(rèn)的盒模型，但我們可以通過盒模型屬性來修改元素的寬度、高度、邊距和內(nèi)邊距等。

以下是一個示例代碼，展示如何設(shè)置盒模型屬性：

.box {
width: 200px;
border: 1px solid gray;
margin: 10px;
padding: 10px;
}

在上面的代碼中，我們設(shè)置了一個寬度為 200 像素的盒子，邊框粗細(xì)為 1 像素并且顏色為灰色，外邊距為 10 像素，內(nèi)邊距為 10 像素。

通過學(xué)習(xí)布局和盒模型的知識，我們可以更好地掌握網(wǎng)頁設(shè)計，并且做出美觀的、易讀的頁面。