css — display

1.定義

display用於頁面佈局，設置元素如何被顯示。

值：none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-group | table-column | table-cell | table-caption | inherit

2.分類

（1）block（塊級元素）

特色：

• 獨佔一行；

• 寬、高、行高以及內外邊距均可設置；

• 寬度缺省是它的容器的100%，除非設定一個寬度，即便設置了寬度,仍然是獨佔一行。

• 它能夠容納內聯元素和其餘塊元素

常見的塊級元素有：

h1~h6 | div | ul | ol | dl | dt | li | p | form | table (一系列標籤)...

塊級元素不支持 vertical-align

（2）inline（行內元素）

特色：

• 內容撐開寬度；

• 不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行；

• 設置width和height屬性無效；

• 代碼換行被解析成空格；

• 關於margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

常見的行內元素有：

a | b | br | em | i | label| map | pre | span | strong ...

行內元素不支持：

background-position | clear | clip | height | max-height | min-height | width | max-width | min-width | overflow | text-align | text-indent | padding-top | padding-bottom | margin-top | margin-bottom

（3）inline-block（行內塊）

特色：

• 不設置寬度時，內容撐開寬度

• 非獨佔一行

• 支持寬高

• 代碼換行被解析成空格

簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。以後的內聯對象會被排列在同一行內。好比咱們能夠給一個link（a元素）設置inline-block屬性，使其既具備block的可設置寬度和高度特性又具備inline的同行特性

常見的行內塊元素有：

audio | canvas | iframe | img | video ...

行內元素不支持：clear

（4）none

特色：　隱藏元素並脫離文檔流

visibility: hidden雖然會隱藏元素，可是位置會保留

（5）list-item

特色：　與塊級元素相似

（6）table

特色：　

• 不設置寬度時，寬度由內容撐開

• 獨佔一行

• 支持寬高

• 默認具備表格特徵，可設置table-layout、border-collapse、border-spacing等表格專有屬性

（7）inline-table

特色：　

• 不設置寬度時，寬度由內容撐開

• 非獨佔一行

• 支持寬高

• 默認具備表格特徵，可設置table-layout、border-collapse、border-spacing等表格專有屬性

###【注意】###
對於display爲table和inline-table，若處於分隔邊框模型即border-collapse:separate時，margin和padding均可設置；若處於合併邊框模型即border-collapse:collapse，只可設置margin

（8）table-cell

特色：　

• 不設置寬度時，寬度由內容撐開

• 非獨佔一行

• 支持寬高

• 垂直對齊

• 同級等高

• display:table-cell的元素不能夠設置margin，但能夠設置padding

（9）table-caption

特色：　

• 不設置寬度時，寬度由內容撐開

• 獨佔一行

• 支持寬高

• display:table-caption的元素margin和padding均可設置

【MARK】 文檔以整理記錄爲主，若有錯誤，歡迎指出喲，你們一塊兒來學習...