CSS display 有哪些值？面试必考的 9 个属性详解
CSS display 控制元素在页面上的渲染方式，面试常考的就这几个：
none — 元素不渲染、不占空间，从布局树中移除。和 visibility: hidden 的关键区别：后者保留空间只隐藏视觉效果。频繁切换显隐优先用 visibility，因为只触发重绘不触发回流。
block — 独占一行，可设宽高。<div>、<p>、<h1> 默认就是 block。
inline — 不换行，宽高由内容撑开，垂直方向的 margin/padding 不生效。<span>、<a> 默认 inline。
inline-block — 对外像 inline 不换行，对内像 block 能设宽高。做横排按钮、导航菜单首选。
flex — 弹性布局容器，子元素沿主轴排列。居中、等分空间、对齐一行搞定，一维布局主力。
grid — 网格布局容器，同时控制行和列。二维布局（如页面骨架、卡片网格）用 grid 更直观。
table 系列（table / table-row / table-cell）— 不用 <table> 标签也能模拟表格布局，现在主要用来做垂直居中（table-cell + vertical-align）。
contents — 元素本身不生成盒子，子元素直接参与父级布局。做组件封装时有用，不想让容器标签影响布局。
flow-root — 创建新的 BFC，等效于 clearfix 的正经方案。浮动清除不再需要伪元素 hack。
补充一点：现代 CSS 支持 display 双值语法，比如 inline flex 等于 inline-flex，第一个值控制外部显示类型，第二个值控制内部。目前浏览器支持度还不错，面试提一句是加分项。
追问
inline 元素设置 width/height 为什么不生效？
CSS 规范规定非替换 inline 元素的盒模型由内容决定，宽高属性不适用。想设宽高就换成 inline-block 或 block。但 <img>、<input> 这类替换元素虽然是 inline，却可以设宽高——因为它们有内在尺寸。
flex 和 grid 怎么选？
一维用 flex，二维用 grid。实际项目经常混搭：外层 grid 做页面骨架，内层 flex 做组件对齐。别纠结"哪个更好"，它们解决的不是同一个问题。
display: none、visibility: hidden、opacity: 0 有什么区别？
| display: none | visibility: hidden | opacity: 0 | |
|---|---|---|---|
| 占空间 | 不占 | 占 | 占 |
| 触发回流 | 是 | 否 | 否 |
| 触发重绘 | 是 | 是 | 否 |
| 子元素可覆盖 | 否 | 是（设 visible） | 否 |
| 响应事件 | 否 | 否 | 是 |
| 可访问性 | 不可见 | 不可见 | 可见 |
频繁切换用 visibility（只重绘），需要完全移除用 display: none，做淡入淡出动画用 opacity。
display: contents 在实际项目里有什么用？
做组件封装时，容器 div 只是想传 props，不想让它参与布局。比如一个 <Card> 组件渲染成 <div class="card"><slot/></div>，但外层用 grid 布局时不希望 .card 这层 div 打断网格结构，这时候给 .card 设 display: contents 就行。注意：contents 会导致元素本身的样式和可访问性语义丢失，屏幕阅读器可能跳过它。