前端知识速记--CSS篇：display

前端知识速记--CSS篇：display

一、什么是 display 属性？

display 属性用于指定一个元素如何被显示在网页上。它不仅影响元素的显示形式，还对元素的布局、结构以及与其他元素之间的关系产生重要影响。

二、常用 display 属性值

1. block

block 级元素独占一行，宽度默认占满父容器。常见的 block 元素有 <div>、<h1>至<h6>、<p> 等。其特点是可以设置宽高，并且可以在上、下方添加外边距。

实例：

<div style="display: block; background-color: lightblue;">这是一个块级元素</div>

2. inline

inline 元素不独占一行，它的宽度默认为内容宽度。常见的 inline 元素有 <span>、<a>、<strong> 等。与 block 元素不同，inline 元素不能设置宽高，只能在内容上方和下方添加外边距。

实例：

<span style="display: inline; color: red;">这是一个行内元素</span>

3. inline-block

inline-block 结合了 block 和 inline 的特点，元素在同一行内显示，但可以设置宽高，这意味着可以在一行中排列多个 inline-block 元素，并同时拥有块级元素的特性。

实例：

<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 值会使元素完全隐藏，不再占据空间。这在需要动态控制元素显示与隐藏时非常有用。

实例：

<div style="display: none;">这个元素不会显示</div>

5. table

table 将元素表现为表格的行行为。这适合需要展现表格数据的场景，能够保持表格的布局特性。

实例：

<div style="display: table;">这是一个表格元素</div>

6. flex

flex 值允许使用弹性盒布局，可以高效地分配空间和对齐子元素，是现代布局的热门选择。

实例：

<div style="display: flex;">这是一个弹性盒布局元素</div>

7. grid

grid 是一种强大的布局系统，允许将元素安排在一个二维网格中。可以为每个元素定义位置，并控制它们在列和行中的大小。grid 布局非常适合复杂的网页布局。

实例：

<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 属性值。这在需要确保子元素与父元素一致时非常有用。

实例：

<div style="display: block;">
    <div style="display: inherit;">这个元素继承了父元素的 display 属性</div>
</div>

三、display 属性汇总表

属性	作用
block	独占一行，宽度默认占满父元素，并且可以设置宽高
inline	不独占一行，宽度默认为内容宽度，不可以设置宽高
inline-block	行内显示，可设置宽高
none	隐藏元素，不占空间
table	表现为表格元素
flex	提供弹性布局
grid	提供网格布局，可以在二维空间中安排元素
inherit	继承父元素的 display 属性