# display属性
在CSS中，`display`属性是用来控制元素如何在页面上布局和显示的重要属性，这个属性决定了元素如何与其他元素进行排列，以及它们应该占据多少空间，下面我们将详细介绍`display`属性的不同值及其作用。
1. `block`
当元素的`display`属性被设置为`block`时，该元素会显示为块级元素，块级元素会在其前后创建新行，并且会尽可能地占据全部可用空间，``、``、``-``以及``等都是默认的块级元素。
下面的HTML代码创建了一个块级元素：
<div style="display: block;">我是一个块级元素</div>
在浏览器中查看时，这段代码会创建一个新的块，其中包含文本“我是一个块级元素”。
2. `inline`
当元素的`display`属性被设置为`inline`时，该元素会显示为行内元素，行内元素不会打破现有的行，它们通常位于一串文字中，并且会尽可能地缩小自己的尺寸，``和``等都是默认的行内元素。
下面的HTML代码创建了一个行内元素：
<span style="display: inline;">我是一个行内元素</span>
在浏览器中查看时，这段代码会在一段文字中插入文本“我是一个行内元素”，而不会打破现有的行。
3. `inline-block`
当元素的`display`属性被设置为`inline-block`时，该元素会显示为行内块级元素，这种类型的元素具有行内元素的特性（不会打破现有的行），但也具有块级元素的特性（可以设置宽度和高度），它们可以在页面上创建小块的、可调整尺寸的块。
下面的HTML代码创建了一个行内块级元素：
<div style="display: inline-block;">我是一个行内块级元素</div>
在浏览器中查看时，这段代码会创建一个可以设置宽度和高度的块，它不会打破现有的行。
4. `none`
当元素的`display`属性被设置为`none`时，该元素不会被显示在页面上，即使你使用JavaScript或CSS来检查该元素，你也无法看到它，这个属性常常用于隐藏某些元素，而不影响页面的布局。
下面的HTML代码创建了一个不会被显示的元素：
<div style="display: none;">你不会看到我</div>
在浏览器中查看时，这段代码不会在页面上显示任何内容。
5. `flex`
当元素的`display`属性被设置为`flex`时，该元素会成为一个弹性布局容器，这个容器可以包含多个子元素，并且可以灵活地调整它们的位置和尺寸以适应不同的屏幕尺寸和设备，这个属性常常用于创建响应式布局。
下面的HTML代码创建了一个弹性布局容器：
<div style="display: flex;"> <div>子元素1</div> <div>子元素2</div> <div>子元素3</div> </div>
