CSS 显示模式

对照 display 的各个取值、盒子类型与默认宽度表现，支持关键词过滤，点击任意取值即可预览显示效果并复制示例代码，全部在浏览器本地完成。

取值对照表共 12 个取值

快速过滤

直接定位取值

取值	说明

过滤器会同时匹配取值与说明文字，点击表格行可查看效果与示例。

效果预览

元素一显示模式元素元素三

当前取值block

盒子类型块级盒

默认宽度撑满容器

子项布局常规流

示例代码

复制后可直接粘贴到样式表中，按需替换选择器。

使用规则

元素的实际显示类型由外部显示类型与内部显示类型两部分组合而成，例如 inline-block 是「行内 + 块级流」。
display: none 会让元素及其子树完全移出渲染树，不占空间。
display: contents 会移除元素自身的盒子，但其子元素仍然显示。
行内元素设置 width、height、垂直方向的 margin 通常无效。
弹性与网格容器会改变子项的默认尺寸与对齐行为。