block、inline、inline-block、none 有什么区别？

简化版

block 独占一行，可设置宽高；inline 不独占一行，宽高通常不生效；inline-block 像行内元素一样排列，又能设置宽高；display:none 会让元素不参与布局和渲染。

display 决定元素生成什么类型的盒子。常见差别：

面试追问常围绕“为什么 span 设置宽高没用”“inline-block 为什么有间隙”“隐藏元素是否可访问”展开。

HTML 元素默认有不同显示类型。例如 div 默认是块级，span 默认是行内。 CSS 的 display 可以改变元素生成的盒子类型，从而影响布局、宽高、换行和相邻元素关系。

.box {
  display: block;
}

.tag {
  display: inline-block;
}

一个元素并不是因为标签名永远块级或行内。标签只是浏览器默认样式，最终行为由计算后的 display 决定。

块级盒子会在普通文档流中独占一行。默认宽度通常填满包含块，高度由内容撑开。它可以设置 width、height、margin、padding。

.panel {
  display: block;
  width: 300px;
  height: 120px;
}

如果父容器宽 800px，一个没有设置宽度的块盒通常使用可用宽度，也就是接近 800px。这就是为什么多个 div 默认会上下排列。页面主结构、段落、区块容器常使用块级布局。

行内盒子参与行内格式化，像文字一样从左到右排布。它不会强制换行，宽高由内容和字体度量决定。直接设置 width、height 通常不会像块盒那样生效。

span {
  display: inline;
  width: 200px;  /* 通常不按预期生效 */
  height: 80px;  /* 通常不按预期生效 */
}

行内元素的左右 padding/margin 比较直观。上下方向的表现会受行盒、行高和文本基线影响，不适合拿来搭大型盒布局。所以需要控制尺寸时，经常会把它改成 inline-block 或 block。

inline-block 可以和文本或其他行内盒子排在同一行。同时它又能设置宽高，常用于按钮、标签、徽章等小组件。它的典型问题是元素之间可能出现空白间隙。

<span class="item">A</span>
<span class="item">B</span>

.item {
  display: inline-block;
  width: 100px;
}

如果两个 span 之间源码里有换行或空格，页面上可能出现约 4px 左右的间隙。这不是 margin，而是 HTML 空白字符参与了行内排版。现代布局更推荐 Flex/Grid 处理横向排列。

display:none 会让元素不生成盒子。它不占空间，不参与布局，通常也不会被屏幕阅读器读取。这和 visibility:hidden、opacity:0 都不同。

写法	是否占位	是否可点击	是否参与可访问树
`display:none`	否	否	通常否
`visibility:hidden`	是	否	通常否
`opacity:0`	是	可能是	可能是
视觉隐藏类	否或极小	通常否	可以保留

这里和站内“隐藏元素”题有交叉，但本题重点放在 display 的盒生成语义。面试里要主动说明 none 是布局层面的消失。

display 不只这四个值。 display:flex 会让元素成为弹性容器，子项进入 flex formatting context。 display:grid 会让元素成为网格容器，子项按二维网格布局。

.nav {
  display: flex;
  gap: 12px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

流程可以理解为：

display 决定父盒类型
  -> 父盒建立布局规则
  -> 子元素按该规则排布

所以 display 是布局入口属性，不只是控制“显示不显示”。

记忆钩子：block 管大区块，inline 管文字流，inline-block 管小组件，none 让盒子不生成。

回答 display 时按“是否独占一行、能否设置宽高、是否生成盒子”三条线讲。block 独占且尺寸可控，inline 随文字流，inline-block 兼具行内排列和宽高控制，none 直接不生成盒子；再补一句现代布局用 flex/grid，答案就完整了。