今天是學習 CSS 十天第三天，主要學習布局和盒模型。

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

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

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

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

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

通過學習布局和盒模型的知識，我們可以更好地掌握網頁設計，并且做出美觀的、易讀的頁面。