HTML 元素显示类型

HTML 的所有元素都有默认的显示类型，而这些显示类型是透过 CSS 的 display 属性进行控制，只有在遇到特殊的网页版面需求时才需要更动，这篇教学将会介绍 HTML 的元素显示类型。

快速导览：

CSS 的 display 内容

各个元素的显示类型 ( display value )

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

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

元素的显示类型说重要也不是很重要，说不重要但又有相当程度的重要性，总之如果了解了元素的显示类型，在网页的排版与架构上，都更能得心应手！