显示模式 display

CSS中的display属性用于定义元素的显示模式，它决定了元素在网页中如何布局和显示

html 标签默认的显示模式

标签	默认显示模式	说明
span	inline	可以与其他行内模式的元素在同一行, 默认无法设置宽度和高度
div	block	独占一行, 默认可以设置宽度高度
img	inline-block	可以与其他行内模式的元素在同一行, 默认可以设置宽度高度
table	table	独占一行, 默认可以设置宽度高度
<input type="hidden" />	none

显示模式取值和区别

取值	可见	独占一行	设置尺寸	自适应尺寸	说明
none	N	N	N	N	隐藏
inline	Y	Y	N	N	很内显示(内联显示)
inline-block	Y	N	Y	N	行内块级显示
block	Y	Y	Y	N	块级显示
table	Y	Y	Y	N	以表格的形式显示,类似 table 标签(一般不会单独设置, 而是直接使用table标签)
inlien-table	Y	N	Y	N	以行内表格的形式显示(如果显然表格变为类似行内块级元素的时候, 可设置这个属性)
flex	Y	Y	Y	Y	弹性布局
inline-flex	Y	N	Y	Y	行内元素弹性布局
grid	Y	Y	Y	Y	网格布局
inline-grid	Y	N	Y	Y	行内网格布局

可见性 visiblity

取值	说明
visible	显示 (默认值)
hidden	隐藏 (与 display:none 不同的是: 就是隐藏还是会占据宽/高度位置)