# 第 16 章 CSS 盒模型[下] 學習要點： 1.元素可見性 2.元素盒類型 3.元素的浮動 **主講教師：李炎恢** 本章主要探討 HTML5?中 CSS?盒模型，學習怎樣了解元素的外觀配置以及文檔的整體布局。 **一．元素可見性** 使用 visibility?屬性可以實現元素的可見性，這種樣式一般可以配合 JavaScript?來實現效果。樣式表如下： | **屬性** | **值** | **說明** | **CSS 版本** | | --- | --- | | visible | 默認值，元素在頁面上可見。 | 2 | | visibility | hidden | 元素不可見，但會占據空間。 | 2 | | collapse | 元素不可見，隱藏表格的行與列，如果不是表格，則和 hidden?一樣。 | 2 | //設置元素隱藏，但占位? ``` div { visibility: hidden; } ``` //隱藏表格的行或列，但不占位，Chrome 和?Opera 不支持? ``` table tr:first-child { visibility: collapse; } ``` **二．元素盒類型** CSS 盒模型中的?display 屬性，可以更改元素本身盒類型。那么元素有哪些盒類型呢？主要有：1.塊級元素（區塊）；2?行內元素（內聯）；3?行內-塊級元素（內聯塊）；4.隱藏元素。 **1.****塊級元素** 所謂塊級元素，就是能夠設置元素尺寸、隔離其他元素功能的元素。比如：<div>、<p>等文檔元素。 **2.****行內元素** 所謂行內元素，不能夠設置元素尺寸，它只能自適應內容、無法隔離其他元素，其它元素會緊跟其后。比如：<span>、<b>等文本元素。 **3.****行內****-****塊元素** 所謂行內-塊元素，可以設置元素尺寸，但無法隔離其他元素的元素。比如<img>。 | **屬性** | **值** | **說明** | **CSS 版本** | | --- | --- | | block | 盒子為塊級元素 | 1 | | display | inline | 盒子為行內元素 | 1 | | inline-block | 盒子為行內-塊元素 | 2 | | none | 盒子不可見，不占位 | 1 | //將行內元素轉成塊級元素 ``` span { background: silver; width: 200px; height: 200px; display: block; } ``` //將塊級元素轉換成行內元素? ``` div { background: silver; width: 200px; height: 200px; display: inline; } ``` //將塊級元素轉化成行內-塊元素? ``` div { background: silver; width: 200px; height: 200px; display: inline-block; } ``` //將元素隱藏且不占位? ``` div { display: none; } ``` display 屬性還有非常多的值，有些后面部分講解，而有些支持度不好或者尚不支持，從而省略。有興趣的，可以參考 CSS3?手冊。 **三．元素的浮動** CSS 盒模型有一種叫浮動盒，就是通過?float 屬性建立盒子的浮動方向，樣式表如下： | **屬性** | **值** | **說明** | **CSS 版本** | | --- | --- | | | left | 浮動元素靠左 | 1 | | float | right | 浮動元素靠右 | 1 | | | none | 禁用浮動 | 1 | //實現聯排效果 ``` #a { background: gray; float: left; } #b { background: maroon; float: left; } #c { background: navy; float: left; } ``` //實現元素右浮動 ``` #c { background: navy; float: right; } ``` //取消元素的浮動 ``` #c { background: navy; float: none; } ``` 剛才的浮動有一個問題：當一個元素盒子被浮動后，下面的元素會自動堆疊處理，導致元素不可見或部分不可見。我們可以使用 clear?屬性來處理。 | **屬性** | **值** | **說明** | **CSS 版本** | | --- | --- | | clear | none | 允許兩邊均可浮動 | 1 | | left | 左邊界不得浮動 | 1 | | right | 右邊界不得浮動 | 1 | | both | 兩邊都不得浮動 | 1 | //兩邊均不可浮動 ``` #c { background: navy; clear: both; } ```