display(CSS)
display - CSS: Cascading Style Sheets | MDN
display
指定元素排版特性
block
一元素為block-level
佔滿整個容器寬度
可設定寬高
inline
設定一元素為inline-level
無法設定長寬,元素的長寬由其內容決定
可設定padding的左右值,上下值無效、無法被撐開
效用只有設定在自身上的框線或背景
元素會顯示於同一行上,無論文字圖片皆不會換行
inline-block
同時擁有兩種display屬性的特性
具有block的特性,但不佔滿整個容器
可設定寬高,也可與其他元素並排
如a(HTML)或li(HTML)的標籤之間會有空白字元
需於父元素中設定字元大小為0,再設定子元素的標籤文字大小
それでも私が\<wbr\>でなくinline-blockで改行調整をする、たった1つの理由
Flexbox(CSS)
Grid(CSS)
none
清除此元素
常與visibility: hidden相提並論
在DOM和CSSOM trees結合後的Render Tree中不會產生對應的盒模型
故不佔有任何排版空間
但仍然存在於DOM Tree上,可以進行相關操作
visibility: hidden的元素仍然會保留其box
因此雖然內容不可視,仍會佔有空間
想要讓螢幕閱讀器可閱讀隱藏元素時,可改用visually-hidden
contents
display:contents;って何?どんな時に使うと便利なの? #CSS - Qiita
table(CSS)
inherit:繼承父元素的display屬性值
initial:該元素的預設屬性值
unset:等同於inherit和initial的組合值
若該屬性預設為繼承,此值等同inherit
若該屬性預設為不可繼承,此值等同initial