元素類型

塊元素（block）	獨占一行，排斥其他元素跟其位于同一行，包括塊元素和行內元素。 塊元素內部可以容納其他塊元素和行內元素。 可以定義 width，也可以定義 height。 可以定義 4 個方向的 margin。
行內元素（inline）	可以與其他行內元素位于同一行。 行內元素內部可以容納其他行內元素，但不可以容納塊元素。 無法定義 height，也無法定義 width。 可以定義 margin-left 和 margin-right，無法定義 margin-top 和 margin-bottom。
行內塊元素（ inline-block）	可以定義 width 和 height。 可以與其他行內元素位于同一行。
表格（table）	以表格形式顯示，類似于 table 元素
表格行（table-row）	以表格行形式顯示，類似于 tr 元素
表格單元格（table-cell）	以表格單元格形式顯示，類似于 td 元素

元素類型轉換

在 CSS 中，我們可以使用 display 屬性來改變元素的類型。

語法

元素{dispiay:取值；}

屬性值	說明
inline	轉換為行內元素
block	轉換為塊元素
inline-block	轉換為行內塊元素
table	以表格形式顯示，類似于 table 元素
table-row	以表格行形式顯示，類似于 tr 元素
table-cell	以表格單元格形式顯示，類似于 td 元素
none	隱藏元素

---

拓展：display:none 簡介

• 在 CSS 中，我們可以使用 display:none 來隱藏一個元素，并且被隱藏的元素不再占據原來位置的空間。
• display:none 一般用來配合 JavaScript 動態隱藏元素，被隱藏的元素不占據原來位置的空間。
• display:none 不推薦用來隱藏一些對 SEO（Search Engine Optimization，搜索引擎優化）關鍵的部分。因為對于搜索引擎來說，它會直接忽略 display:none 隱藏的內容，不會把display:none 隱藏的內容加入權重考慮。

display:none 和 visibility:hidden 的區別

在 CSS 中，如果想要隱藏某一個元素，可以使用 display:none 或者 visibility:hidden 來實現。雖然兩種方式都可以隱藏元素，但是它們之間有著本質的區別。

display:none	元素被隱藏之后，不占據原來的位置，也就是說元素“徹底地消失了，看不見也摸不著。”
visibility:hidden	元素被隱藏之后，依然占據原來的位置，也就是說元素“并沒有徹底消失，看不見但摸得著”。

---

拓展：display:table-cell功能用途

圖片垂直居中于元素

配合使用 display:table-cell 和 vertical-align:middle 來實現大小不固定的圖片的垂直居中效果。

語法

父元素
{display:table-cell;vertical-align:middle;
}
子元素{vertical-align:middle;}

---

等高布局

語法

盒子1{display:table-cell;}
盒子2{display:table-cell;}

兩個盒子都不定義高度時，大小而是由盒子的內容撐開。分別給兩個元素都轉換成“table-cell”，這時兩個盒子高度相等，并且高度由兩者高度的最大值決定。這就是 “自適應等高布局。”

---

自動平均劃分元素

當有多個元素橫向排列時，可以為每一個元素定義 display:table-cell，它會自動平均劃分元素，并且使得它們在同一行顯示。

語法

父元素{display:table;}
子元素1{display:table-cell;}
······
子元素n{display:table-cell;}

• 如果為父元素定義 display:table，為子元素定義 display:table-cell，然后為父元素定義一定的寬度，那么此時子元素的寬度就會根據子元素的個數自動平均劃分。

---

拓展： 去除 inline-block 元素間距

• inline-block 元素之間會有一定的間距，這種間距有時會對布局產生影響。大多數時候為了不影響布局，需要去除 inline-block 元素的間距。
• 在 CSS 中，可以為父元素定義一個“font-size:0;”來去除 inline-block 元素的間距。

語法

父元素{font-size:0;}
子元素{display:inline-block}

---