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】 檔案以整理記錄為主，如有錯誤，歡迎指出喲，大家一起來學習...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/274375.html
標籤：Html/Css
下一篇：網頁概述（html/css)