iT邦幫忙

2023 iThome 鐵人賽

DAY 5
0
Modern Web

跟著 OXXO 一起學 HTML系列 第 7

( Day 5.1 ) HTML 元素顯示類型

  • 分享至 

  • xImage
  •  

HTML 的所有元素都有預設的顯示類型,而這些顯示類型是透過 CSS 的 display 屬性進行控制,只有在遇到特殊的網頁版面需求時才需要更動,這篇教學將會介紹 HTML 的元素顯示類型。

原文參考:HTML 元素顯示類型

CSS 的 display 內容

根據 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

各個元素的顯示類型 ( display value )

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 教育學習網,有興趣可以參考下方連結呦~ ^_^


上一篇
( Day 4.2 ) HTML 網址與路徑
下一篇
( Day 5.2 ) HTML 元素屬性
系列文
跟著 OXXO 一起學 HTML90
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言