display 属性

display 属性是 CSS 中最基础的属性之一。

可以这样理解：将每个 HTML 元素视为一个盒子。display 属性决定了这些盒子如何显示。

该属性可使用多种值，但其中只有部分在实际开发中较为常用。我们将重点介绍以下几种值：

• inline
• inline-block
• block
• flex
• grid
• none
• table

inline 值

inline 是 CSS 中所有元素的默认值。行内元素保持在同一行上，并且仅占据所需宽度。

1display: inline;

一个直观的理解方式是想象一段文字中包含用 <b> 或 <span> 标签包裹的加粗文字：

在此示例中，<span> 元素添加了蓝色边框，文本流并未中断，它与周围文字处于同一行。

虽然可以为行内元素设置 padding 和 margin，但这些样式只会水平方向影响周围元素，垂直方向无效。此外，行内元素会忽略 height 和 width 设置。

几乎所有 HTML 标签默认都是 inline 显示，但有一些例外，例如 div、p 和 section，它们默认为 block，将在下一节中讨论。

block 属性

1display: block;

如前所述，多个元素默认具有 block 属性，包括 <div>、<section>、<ul>、<p> 以及 <h1> 到 <h6>。

块级元素按垂直方向依次堆叠排列。默认情况下，每个元素占据页面 100% 的宽度。除了垂直堆叠外，块级元素还会尽可能占据水平空间。

如果设置了 width、height、margin 和 padding，这些值都会被正确应用。

inline-block 值

1display: inline-block;

inline-block 与 inline 类似，但不同之处在于它可以设置 height 和 width 等尺寸属性。

flex 值

display 属性也用于设置 Flexbox 布局：

1display: flex;

我们将在本章后续内容中详细学习 Flexbox！

grid 值

使用 CSS Grid 布局时，需将 display 属性设置为 grid：

1display: grid;

我们也会在本章后续内容中介绍 CSS Grid。

none 值

1display: none;

使用 display: none 可以隐藏某个元素，使其不显示在页面上。该元素仍然存在于 HTML 中，只是浏览器不会渲染它。

table 值

使用 table 值可将元素以表格形式显示：

1display: table;

随着 Flexbox 和 CSS Grid 等现代布局技术的出现，使用 <table> 元素进行布局的方式已逐渐过时。

各种值的示例