CSS display：block、inline、inline-block、none 和 flex

display 的作用

每个元素都有一个 display 值，决定它的布局方式。最先接触到的三个值是 block、inline 和 inline-block。下面是三个完全相同的盒子，width、height、padding 和 margin 都一样，只有 display 不同：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>block, inline, inline-block</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    .demo { border: 1px dashed #9ca3af; padding: 8px; margin-bottom: 12px; }
    .box {
      width: 120px; height: 40px;
      padding: 6px; margin: 10px;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
    .block { display: block; }
    .inline { display: inline; }
    .inline-block { display: inline-block; }
  </style>
</head>
<body>
  <div class="demo">Text before <span class="box block" id="b">block</span> text after.</div>
  <div class="demo">Text before <span class="box inline" id="i">inline</span> text after.</div>
  <div class="demo">Text before <span class="box inline-block" id="ib">inline-block</span> text after.</div>
</body>
</html>

在预览中，块盒子独占一行，宽 120px。行内盒子忽略了宽度和高度，只包住自己的那个词，它的垂直内边距和边框会伸出到行的上方和下方，却不会让这一行变高。行内块盒子留在文字行中，同时保持完整的尺寸。

display: block

块元素占据全部可用宽度，并把后面的内容推到新的一行。把链接变成块元素，就能让整行都可以点击：

.menu a {
  display: block;       /* the full row is the link */
  padding: 10px 16px;
}

块元素可以设置宽度，设置之后 margin: 0 auto 就能让它居中，详见 div 居中页面。

display: inline-block

inline-block 是一个折中方案：它像一个词一样在行中流动，但你可以设置它的尺寸。它适合用在文字中的徽标、按钮和图标上：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>inline-block badges</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      display: inline-block;
      min-width: 24px;
      padding: 2px 8px;
      margin-inline-start: 4px;
      border-radius: 999px;
      background: #dc2626; color: white;
      font-size: 12px; font-weight: 700; text-align: center;
    }
  </style>
</head>
<body>
  <p>Inbox <span class="badge">3</span></p>
  <p>Notifications <span class="badge">12</span></p>
</body>
</html>

一行中的多个 inline-block 盒子之间会有一条小空隙，来自 HTML 中的空白。如果要排一行盒子，在父元素上用 display: flex 是更好的工具。

display: none 与 visibility: hidden

两者都能让元素不可见。区别在于是否保留它的空间：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>none vs hidden</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; margin-bottom: 12px; }
    .row div { width: 70px; padding: 12px 0; text-align: center; background: #bbf7d0; border: 2px solid #16a34a; }
    .none { display: none; }
    .hidden { visibility: hidden; }
  </style>
</head>
<body>
  <div class="row"><div>1</div><div>2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="none">2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="hidden">2</div><div>3</div></div>
  <button type="button" id="toggle">Toggle box 2 in the first row</button>
  <script>
    document.getElementById('toggle').addEventListener('click', () => {
      document.querySelector('.row div:nth-child(2)').classList.toggle('none');
    });
  </script>
</body>
</html>

HTML 的 hidden 属性通过浏览器自带的样式表实现，效果和 display: none 相同，这意味着任何给该元素设置 display 的 CSS 规则（例如 .card { display: flex; }）都会覆盖它，元素又会显示出来。如果你被这个问题坑过，就加上 [hidden] { display: none !important; }。

如果要在视觉上隐藏某些内容，但仍让屏幕阅读器读到（比如图标按钮的标签），请使用“视觉隐藏”类，而不是 display: none。

display: flex 和 display: grid

这两个值会把元素变成其子元素的布局容器：

• display: flex 把子元素排成一行或一列，并能控制对齐和间距。见 flexbox。
• display: grid 同时按行和列放置子元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex and grid</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .item { padding: 10px; background: #fde68a; border: 2px solid #f59e0b; text-align: center; }
    .flex { display: flex; gap: 8px; margin-bottom: 16px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  </style>
</head>
<body>
  <div class="flex"><div class="item">flex 1</div><div class="item">flex 2</div><div class="item">flex 3</div></div>
  <div class="grid">
    <div class="item">grid 1</div><div class="item">grid 2</div><div class="item">grid 3</div>
    <div class="item">grid 4</div><div class="item">grid 5</div>
  </div>
</body>
</html>

容器本身仍然是块元素。inline-flex 和 inline-grid 对子元素的作用相同，但会让容器像 inline-block 一样在行内流动。

其他取值

常见错误

• 给 span 或 a 设置 width 或 height。 行内元素会忽略它们。请用 inline-block 或 block。
• 给行内元素设置垂直外边距。 同样会被忽略，解决方法相同。
• 用 display: none 隐藏给屏幕阅读器读的文字。 它对屏幕阅读器也一样隐藏了。
• 以为 display: none 的父元素里的子元素能显示出来。 隐藏的父元素里面什么都不会渲染。
• display 规则覆盖了 hidden 属性。 CSS 规则会胜出。
• 想给 display 做动画。 设置 display: none 会让元素立刻隐藏，没有淡出效果；请给 opacity 做动画，在结束时再切换 display（或 visibility）。