前端知识速记--CSS篇：display
一、什么是 display 属性？
display 属性用于指定一个元素如何被显示在网页上。它不仅影响元素的显示形式，还对元素的布局、结构以及与其他元素之间的关系产生重要影响。
二、常用 display 属性值
1. block
block 级元素独占一行，宽度默认占满父容器。常见的 block 元素有 <div>、<h1>至<h6>、<p> 等。其特点是可以设置宽高，并且可以在上、下方添加外边距。
实例：
html
<div style="display: block; background-color: lightblue;">这是一个块级元素</div>2. inline
inline 元素不独占一行，它的宽度默认为内容宽度。常见的 inline 元素有 <span>、<a>、<strong> 等。与 block 元素不同，inline 元素不能设置宽高，只能在内容上方和下方添加外边距。
实例：
html
<span style="display: inline; color: red;">这是一个行内元素</span>3. inline-block
inline-block 结合了 block 和 inline 的特点，元素在同一行内显示，但可以设置宽高，这意味着可以在一行中排列多个 inline-block 元素，并同时拥有块级元素的特性。
实例：
html
<div style="display: inline-block; width: 100px; height: 100px; background-color: green;">块状行内元素</div>
<div style="display: inline-block; width: 100px; height: 100px; background-color: yellow;">另一个块状行内元素</div>4. none
none 值会使元素完全隐藏，不再占据空间。这在需要动态控制元素显示与隐藏时非常有用。
实例：
html
<div style="display: none;">这个元素不会显示</div>5. table
table 将元素表现为表格的行行为。这适合需要展现表格数据的场景，能够保持表格的布局特性。
实例：
html
<div style="display: table;">这是一个表格元素</div>6. flex
flex 值允许使用弹性盒布局，可以高效地分配空间和对齐子元素，是现代布局的热门选择。
实例：
html
<div style="display: flex;">这是一个弹性盒布局元素</div>7. grid
grid 是一种强大的布局系统，允许将元素安排在一个二维网格中。可以为每个元素定义位置，并控制它们在列和行中的大小。grid 布局非常适合复杂的网页布局。
实例：
html
<div style="display: grid; grid-template-columns: 100px 100px; grid-gap: 10px;">
<div style="background-color: lightcoral;">网格单元格 1</div>
<div style="background-color: lightblue;">网格单元格 2</div>
<div style="background-color: lightgreen;">网格单元格 3</div>
<div style="background-color: lightyellow;">网格单元格 4</div>
</div>8. inherit
inherit 表示继承父元素的 display 属性值。这在需要确保子元素与父元素一致时非常有用。
实例：
html
<div style="display: block;">
<div style="display: inherit;">这个元素继承了父元素的 display 属性</div>
</div>三、display 属性汇总表
| 属性 | 作用 |
|---|---|
| block | 独占一行，宽度默认占满父元素，并且可以设置宽高 |
| inline | 不独占一行，宽度默认为内容宽度，不可以设置宽高 |
| inline-block | 行内显示，可设置宽高 |
| none | 隐藏元素，不占空间 |
| table | 表现为表格元素 |
| flex | 提供弹性布局 |
| grid | 提供网格布局，可以在二维空间中安排元素 |
| inherit | 继承父元素的 display 属性 |