【前端面试干货】display 有哪些值？一文吃透布局核心属性！

导语：
display 是 CSS 中控制元素布局的核心属性之一。在前端面试中，它是高频必考知识点。看似简单的一个属性，实际背后涉及浏览器渲染机制、布局模型与组件设计。本文将带你系统掌握 display 的常见取值、作用原理及其面试考点，助你轻松应对面试挑战。

---

一、面试主题概述

CSS 中的 display 属性决定了元素的外部行为：它如何参与文档流、如何影响兄弟元素、是否生成盒模型等。无论是 Flex 布局、Grid 系统，还是传统的 block/inline，统统由 display 决定。

面试官爱问这个属性，不仅因为它基础，而且它是考察候选人对前端渲染机制理解深度的重要入口点。掌握 display，不仅能搞定面试，更能写出更具可维护性与拓展性的 CSS。

---

二、高频面试题汇总

1. display 有哪些常用取值？分别代表什么含义？
2. inline、block、inline-block 三者的区别？适用于哪些场景？
3. 如何使用 display: flex 实现水平垂直居中？
4. display: contents 有什么作用？在实际项目中是否推荐使用？
5. display 与 visibility/opacity 的区别是什么？会影响布局吗？

---

三、重点题目详解（包含代码、解析）

面试题 1：display 有哪些常见取值？分别代表什么含义？

✅ 标准常见取值：

取值	含义	说明
none	不显示元素，不占空间	常用于控制显示隐藏（注意：不会触发重绘）
block	块级元素	独占一行，可设置宽高
inline	行内元素	不可设置宽高，仅包裹内容
inline-block	具有 inline 行内特性，也可设置宽高	常用于按钮、表单控件布局
flex	弹性盒模型	用于一维布局，强大、主流
inline-flex	行内弹性盒	类似于 flex 但不打断行内流
grid	网格布局