# 第 16 章 CSS 盒模型[上] 學習要點： 1.元素尺寸 2.元素內邊距 3.元素外邊距 4.處理溢出 主講教師：李炎恢 本章主要探討 HTML5?中 CSS?盒模型，學習怎樣了解元素的外觀配置以及文檔的整體布局。 **一．元素尺寸** CSS 盒模型中最基礎的就是設置一個元素的尺寸大小。有三組樣式來配置一個元素的尺寸大小，樣式表如下**：** | **屬性** | **值** | **說明** | **CSS 版本** | | --- | --- | | width | auto、長度值或百分比 | 設置元素的寬度 | 1 | | height | auto、長度值或百分比 | 設置元素的高度 | 1 | | min-width | auto、長度值或百分比 | 設置元素最小寬度 | 2 | | min-height | auto、長度值或百分比 | 設置元素最小高度 | 2 | | max-width | auto、長度值或百分比 | 設置元素最大寬度 | 2 | | max-height | auto、長度值或百分比 | 設置元素最大高度 | 2 | //設置元素尺寸 ``` div { width: 200px; height: 200px; } ``` 解釋：設置元素的固定尺寸。 //限制元素尺寸? ``` div { min-width: 100px; min-height: 100px; max-width: 300px; max-height: 300px; } ``` 解釋：這一組主要是應對可能動態產生元素尺寸變大變小的問題，從而限制它最大和最小的值。 //auto 自適應? ``` div { width: auto; height: auto; } ``` 解釋：auto?是默認值，width?在 auto?下是 100%的值；height?在 auto?下是自適應。 //百分比方式 ``` #a { background: silver; width: 200px; height: 200px; } #b { background: gray; width: 80%; height: 80%; } ``` ``` <div id="a"> <div id="b"> 我是 html5 </div> </div> ``` 解釋：百分比就是相對于父元素長度來衡定的。 **二．元素內邊距** CSS 盒模型中可以設置元素內部邊緣填充空白的大小，我們成為內邊距。樣式表如下： | **屬性** | **值** | **說明** | **CSS 版本** | | --- | --- | | padding-top | 長度值或百分比 | 設置頂部內邊距 | 1 | | padding-bottom | 長度值或百分比 | 設置底部內邊距 | 1 | | padding-left | 長度值或百分比 | 設置左邊內邊距 | 1 | | padding-right | 長度值或百分比 | 設置右邊內邊距 | 1 | | padding | 1 ~ 4 個長度值或百分比 | 簡寫屬性 | 1 | //設置四個內邊距? ``` div { padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; } ``` //簡寫形式，分別為上?10px、右?10px、下?10px、左?10px ``` div { padding: 10px 10px 10px 10px; } ``` //簡寫形式，分別為上?10px，左右?50px，下?200px ``` div { padding: 10px 50px 200px; } ``` //簡寫形式，分別是上下?10px，左右?20px ``` div { padding: 10px 20px; } ``` //簡寫形式：上下左右均?10px ``` div { padding: 10px; } ``` **三．元素外邊距** CSS 盒模型中可以設置元素外部邊緣填充空白的大小，我們成為外邊距。樣式表如下： | **屬性** | **值** | **說明** | **CSS 版本** | | --- | --- | | margin-top | 長度值或百分比 | 設置頂部內邊距 | 1 | | margin-bottom | 長度值或百分比 | 設置底部內邊距 | 1 | | margin-left | 長度值或百分比 | 設置左邊內邊距 | 1 | | margin-right | 長度值或百分比 | 設置右邊內邊距 | 1 | | margin | 1 ~ 4 長度值或百分比 | 簡寫屬性 | 1 | //設置四個內邊距? ``` div { margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; } ``` //簡寫形式，分別為上?10px、右?10px、下?10px、左?10px ``` div { margin: 10px 10px 10px 10px; } ``` //簡寫形式，分別為上?10px，左右?50px，下?200px ``` div { margin: 10px 50px 200px; } ``` //簡寫形式，分別是上下?10px，左邊?20px ``` div { margin: 10px 20px; } ``` //簡寫形式：上下左右均?10px ``` div { margin: 10px; } ``` **四．處理溢出** 當設置了元素固定尺寸且內容過大時，就會出現溢出的問題。溢出主要朝兩個方向：右側和底部。我們可以通過 overflow?系列樣式來控制它。 ? ?溢出處理主要有四種處理值：  //設置溢出為?auto 值? ``` div { overflow-x: auto; } ```