display 与常规流

display 决定元素生成何种显示盒、参与何种格式化上下文，从而在页面上表现为「独占一行」「排在同一行」或「不参与排版」。它与 盒模型 一起构成布局基础：盒模型管每一层尺寸，display 管盒子在文档中的排布角色。

常规流（normal flow） 指块级与行内元素在文档顺序下的默认排布（含 position: relative / sticky 仍占位的情形）。display: flex / grid 会建立独立的 flex/grid 格式化上下文，子项不再按普通块/行内流排列；详见 Flex、Grid。

display 在做什么？

规范上，display 同时描述：

日常写的 display: block 等价于「块级盒子 + 内部流式布局」；display: flex 等价于「块级 flex 容器」。display 的初始值为 inline（与多数 HTML 标签的 UA 默认样式不同，标签会通过用户代理样式表覆盖）。

双关键字语法（Display Level 3）

可分别指定外部与内部显示类型，例如：

display: block flex; /* 外部 block，内部 flex 容器 */
display: inline grid; /* 外部 inline，内部 grid */

单关键字 display: flex 仍最常用，浏览器会补全为 block flex 或 inline flex（取决于上下文）。

常规流中的常见值

block（块级）

• 在常规流中，块级盒子前后会换行，在块向（中文横排多为垂直方向）上依次堆叠。
• 可设置 width、height、margin、padding（受 盒模型 与 box-sizing 影响）。
• width 为 auto 时，水平方向通常填满父级包含块的内容区（不是字面意义上的 width: 100%，但视觉效果常类似「撑满一行」）。
• 典型标签：<div>、<p>、<h1>–<h6>、<ul>、<form> 等（UA 默认多为 block）。

inline（行内）

• 在常规流中参与行内格式化，与同行的行内内容排在同一行；行宽不足时按规则换行，不会像块级那样在元素前后强制断行。
• 非替换行内元素（如 <span>、<a>、<em>）的 width / height 无效，尺寸由内容与 line-height 等决定。
• 替换行内元素（如 <img>、<video>）可设 width / height。
• 非替换行内元素的 上下 margin 不参与行盒高度计算；padding / border 可见，但可能叠压相邻行，不会改变行盒在交叉轴上的占位方式。
• 典型标签：<span>、<a>、<strong> 等。

inline-block（行内块）

• 外部表现为行内级：可与文字、其他行内/行内块排在同一行。
• 内部为块容器：可设宽高与四向 margin / padding，并常作为 BFC 根（包含内部浮动、阻止与外部 margin 折叠等）。
• 场景：导航项、图标按钮、需要固定尺寸又需并排的元素。

list-item（列表项）

• 除主盒外还会生成标记盒（项目符号/编号）。<li> 的 UA 默认多为 list-item，常与父级 <ul> / <ol>（display: block）配合。
• 可与 list-style-type、list-style-position 等一起使用。

none 与 visibility: hidden

要从文档流中移除元素（弹层关闭、条件渲染），用 display: none。仅想「看不见但占位」（占位骨架、防布局跳动）时考虑 visibility: hidden；需要动画淡入淡出时可配合 opacity 等，并注意无障碍需求。

HTML hidden 属性

布尔属性 hidden 在支持的用户代理中会使元素表现为 display: none，且通常不参与无障碍树（与仅 visibility: hidden 不同）。动态显示内容时，除移除 hidden 外还需管理焦点（如将焦点移入对话框）。

布局型 display（脱离常规流排布）

二者会建立 flex / grid 格式化上下文，子项的外边距折叠规则与常规流不同（参见 盒模型 · 外边距折叠）。详细用法见：

• 弹性盒子（Flexbox）
• 网格布局（Grid）

其他实用值（简要）

• flow-root：创建新的块级格式化上下文（BFC），常用于清除内部浮动、避免与外部 margin 折叠，且比滥用 overflow: hidden 语义更清晰。
• contents：元素自身不生成盒，子元素提升到父级参与布局；会改变无障碍树表现，慎用。
• table / table-row / table-cell 等：模拟表格布局，多用于特殊排版或兼容场景。

如何选择？

总结

• display 决定格式化上下文：block / inline / inline-block 属于常规流；flex / grid 建立独立布局上下文。
• 块级「独占一行」、行内「排在同一行」是直观说法；精确行为取决于包含块、书写模式与是否为替换元素。
• none 不占位，visibility: hidden 占位；隐藏交互控件时注意无障碍。
• 现代页面：结构区块可用 block + Grid，组件内一排元素用 Flex。

参考文献

以下链接在编写时均可正常访问：