display 显示类型属性

最后更新：2026-09-13

display display 显示类型属性

display 属性用于定义元素在页面中的显示类型，决定该元素是作为块级元素、内联元素，还是使用 Flex/Grid 等现代布局模型呈现。它是 CSS 布局中最基础也最强大的属性之一，几乎可以改变任何一个元素在文档流中的行为方式。

分类
初始值	inline
继承	否
适用于	all
可动画	discrete
CSS 版本	CSS1
状态	标准

📝 语法

display: block | inline | inline-block | flex | grid | none | table | table-row | table-cell | contents | flow | flow-root | list-item;

⚙️ 取值

值	类型	描述
`block \| inline \| inline-block \| flex \| grid \| none \| table \| table-row \| table-cell`	关键字	预定义显示类型
`contents \| flow \| flow-root \| list-item`	关键字	其他显示类型

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
display	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： display: none; 会将元素从文档流中完全移除，不占据任何空间，也无法被屏幕阅读器访问；若只想视觉上隐藏但仍占据空间，可使用 visibility: hidden。

重要： inline 元素设置 width、height、上下 margin 不会生效；若需要既水平排列又能设置尺寸，请使用 inline-block 或 flex。

❓ 常见问题

Qinline、inline-block 和 block 有什么区别？

Ainline 元素水平排列，不能设 width/height 和上下 margin（垂直内边距影响视觉但不动布局），宽高由内容决定；block 独占一行，可设宽高和所有边距；inline-block 兼具两者：像 inline 水平排列，像 block 可设宽高边距。水平排列又要控制尺寸时用 inline-block。

Qdisplay:flex 和 display:grid 分别适合什么场景？

Aflex 适合一维布局（主轴一个方向），如导航栏、列表项、垂直水平居中、左右两栏，子项沿主轴排布、自动处理对齐和伸缩；grid 适合二维布局（行和列同时控制），如整页骨架、卡片网格、需要精确行列对齐的复杂布局。简单的规则：单行/单列用 flex，网格状用 grid。

Qdisplay:none 和 visibility:hidden 有什么区别？

Adisplay:none 把元素及其子树从渲染完全移除，不占空间、屏幕阅读器不读、不可交互；visibility:hidden 仅视觉隐藏，仍占空间、仍可被屏幕阅读器读取。display:none 元素上的 JS 事件监听还在但不会触发。需要在显隐间做过渡动画时，visibility + opacity 更合适。

Q为什么 inline 元素设置 width 无效？

A因为行内元素（如 span、a）不生成行盒子，浏览器会忽略其 width/height 和上下 margin。想让行内元素接受尺寸，把它改成 display:inline-block 或 block，或者用 flex/grid 让元素变成 flex/grid 项目，此时宽度属性即可生效。