display 属性
block/inline/inline-block/none/flex/grid 各种 display 值
display 属性
display 决定元素的显示类型——block/inline/inline-block/none/flex/grid。
学完本章你将： 掌握各种 display 值及用途。
常用 display 值
css
.block { display: block; } /* 块级——独占一行 */
.inline { display: inline; } /* 行内——不换行 */
.inline-block { display: inline-block; } /* 行内块——不换行但可设宽高 */
.none { display: none; } /* 隐藏——不占空间 */对比
css
/* block：独占一行，可设宽高 */
div { display: block; width: 300px; }
/* inline：不换行，宽高无效 */
span { display: inline; width: 300px; /* 无效 */ }
/* inline-block：不换行，宽高有效 */
span { display: inline-block; width: 300px; /* 有效 */ }display: none vs visibility: hidden
css
/* display:none——元素完全消失，不占空间 */
.hide-display { display: none; }
/* visibility:hidden——元素不可见，但仍然占空间 */
.hide-visibility { visibility: hidden; }现代布局值
css
.flex-container { display: flex; } /* 弹性布局 */
.grid-container { display: grid; } /* 网格布局 */
.table-cell { display: table-cell; } /* 模拟表格 */