display有哪些常用值？分别有什么作用？

搞前端布局，display属性绝对是绕不开的核心开关。它决定了元素以什么“角色”参与布局，不同的值会彻底改变元素的展示行为。常用的值就那么几个，但用对了，你的布局思路会清晰一大半。

最基础的是block和inline。block（块级元素）像<div>、<p>，天生独占一行，能随意设置宽高边距。inline（行内元素）像<span>、<a>，老老实实跟着文字流排，挨着站，设置宽高不起作用。

真正让布局活起来的，是inline-block这个“骑墙派”。它让元素既能像行内元素一样横向排列，又能像块级元素一样设置宽高和垂直边距，是做横向导航按钮的经典选择。

.nav-item {
  display: inline-block;
  width: 80px;
  margin-top: 10px;
}

接下来是现代布局的“双子星”：flex和grid。设置display: flex，容器就变成了弹性盒子，子元素怎么对齐、怎么分布空间，用justify-content和align-items等属性就能轻松指挥，搞定一维布局（行或列）特别顺手。

.container {
  display: flex;
  justify-content: space-between;
}

而display: grid则是为二维布局（同时处理行和列）而生的，让你能像画表格一样精确划分区域，构建复杂的页面骨架。在HTML5时代的复杂页面里，它和Flexbox是绝佳搭档。

还有一个常用的是none。它会让元素从渲染树里彻底消失，不占任何空间，和用visibility: hidden（占着位置但看不见）是两码事。

所以，display的作用就是切换元素的布局模式。从传统的块和内联，到更智能的弹性与网格，理解它们就是理解了CSS布局的底层逻辑。我的经验是，动手写个小例子感受一下区别，比死记硬背管用得多。