HTML(6) Display

`display` 是 CSS 属性，用于控制元素在页面上的显示方式。不同的 `display` 属性值可以使元素以不同的方式呈现。以下是一些常见的 `display` 属性值以及它们之间的主要区别：

1. `block`：
   - 元素将被呈现为块级元素。
   - 元素会在新行上开始，占据父容器的整个可用宽度，可以设置宽度、高度、上下边距、和左右边距。
   - 常见的块级元素包括 `<div>`、`<p>`、`<h1>` 等。

2. `inline`：
   - 元素将被呈现为内联元素。
   - 元素不会打破文本流，只占据其内容所需的宽度，不支持设置宽度和高度。
   - 常见的内联元素包括 `<span>`、`<a>`、`<strong>` 等。

3. `inline-block`：
   - 元素将被呈现为内联块级元素。
   - 元素既保持内联元素的特点，又具有块级元素的盒模型，可以设置宽度、高度、上下边距和左右边距。
   - 常用于创建水平排列的块级元素，如按钮组。

4. `none`：
   - 元素不会在页面上显示，完全隐藏。
   - 元素不占据任何空间，相当于从布局中移除了该元素。

5. `flex`：
   - 元素将被呈现为弹性容器，其子元素可以使用弹性布局进行排列。
   - 允许对子元素的宽度和高度进行灵活的控制，以实现响应式布局。

6. `grid`：
   - 元素将被呈现为网格容器，其子元素可以使用网格布局进行排列。
   - 允许将元素按照网格行和列进行布局，用于复杂的网格式布局。

这些不同的 `display` 属性值用于满足不同的布局需求。你可以根据你的设计需求和元素的性质选择适当的 `display` 值，以实现所需的布局和外观。