HTML 的所有元素都有預設的顯示類型,而這些顯示類型是透過 CSS 的 display 屬性進行控制,只有在遇到特殊的網頁版面需求時才需要更動,這篇教學將會介紹 HTML 的元素顯示類型。
原文參考:HTML 元素顯示類型
根據 W3.org 的 CSS display 規範,display 常用的內容 ( 值 ) 如下表所示:
值 | 說明 | 換行 |
---|---|---|
none | 隱藏元素,將該元素從 HTML 結構樹中移除。 | X |
contents | 只顯示元素內容,忽略所有 box 屬性 ( 例如邊界、邊框...等 )。 | X |
block | 「塊級」元素,該元素會強制換行,除非進行 CSS 設定,否則同一個區塊裡,一行只會有一個塊級元素。 | O |
inline | 「行內」元素,該元素會一個接一個連續下去。 | X |
inline-block | 「行內」元素裡「包覆塊級」元素,除了具備塊級元素的特性,也可一個接一個連續下去。 | X |
inline-table | 「行內」元素裡「包覆表格」元素,除了具備表格元素的特性,也可一個接一個連續下去。 | X |
list-item | 「清單項目」元素,該元素作用和 block 類似,並預載清單相關符號樣式。 | O |
table | 「表格」元素,該元素作用和 block 類似。 | O |
flex | 「彈性塊」元素,該元素作用和 block 類似,並可以透過設定,根據外部區塊的尺寸進行彈性縮放。 | O |
grid | 「格狀」元素,,該元素作用和 block 類似,並可以透過設定,進行版面格狀排版。 | O |
HTML 裡每個元素都有各自預設的顯示類型,下表列出各個元素預設的顯示類型 ( display value ):
元素 | display |
---|---|
address、article、aside、blockquote、body、dd、details、div、dl、dt、fieldset、figcaption、figure、footer、form、frame、frameset、h1、h2、h3、h4、h5、h6、header、hr、html、iframe、noframes、legend、p、ul、center、dir、menu、nav、ol、pre、summary、section | block |
map、output、q | inline |
input、select、img | inline-block |
area、datalist、head、link、param、title、style、script | none |
table | table |
tr | table-row |
thead | table-header-group |
tbody | table-row-group |
tfoot | table-footer-group |
caption | table-caption |
col | table-column |
colgroup | table-column-group |
td、th | table-cell |
caption | table-caption |
li | list-item |
元素的顯示類型說重要也不是很重要,說不重要但又有相當程度的重要性,總之如果瞭解了元素的顯示類型,在網頁的排版與架構上,都更能得心應手!
大家好,我是 OXXO,是個即將邁入中年的斜槓青年,我有個超過一千篇教學的 STEAM 教育學習網,有興趣可以參考下方連結呦~ ^_^