一、控制元素可见性
display属性既可以用来显示元素，也可以用来隐藏元素。当我们将元素的display属性设置为none时，该元素将不会呈现在页面上。
下面的例子演示了如何通过display:none来隐藏一个元素：
<div style="display:none;"> <p>被隐藏的文本内容</p> </div>
除了display:none，还有一些其他的属性也可以控制元素的显示与隐藏：
1. display:block
将元素的display属性设置为block，表示将其呈现为块级元素，并独占一行空间。下面是一个例子：
<div style="display:block;"> <p>我是一个块级元素</p> </div>
2. display:inline
将元素的display属性设置为inline，表示将其呈现为行内元素，并只占据其内容所需的空间。下面是一个例子：
<span style="display:inline;">我是一个行内元素</span>
3. display:inline-block
将元素的display属性设置为inline-block，表示将其呈现为行内块元素，即在一行内显示多个块级元素，并只占据其内容所需的空间。下面是一个例子：
<div style="display:inline-block;"> <p>我是一个行内块元素</p> </div>
二、控制元素布局
display属性还可以用来控制元素的布局方式。下面是一些常见的布局方式：
1. display:block
block元素默认是块级元素，将其display属性设置为block只是起到一个确认的作用。块级元素会在页面中独占一行，并默认占据父级元素的宽度。下面是一个例子：
<div style="display:block;width:200px;"> <p>我是一个块级元素，宽度为200px</p> </div>
2. display:inline
在默认情况下，内联元素的宽度会被限制为其内容所需的宽度。将其display属性设置为inline后，其宽度将自动调整为其内容所需的宽度，并可以与其他元素在一行内显示。下面是一个例子：
<span style="display:inline;background-color:yellow;">我是一个行内元素</span> <span style="display:inline;background-color:red;">我是另一个行内元素</span>
3. display:inline-block
将元素的display属性设置为inline-block，即可将其呈现为行内块元素。行内块元素的宽度和高度可以通过CSS来控制，并可以与其他元素在一行内显示。下面是一个例子：
<div style="display:inline-block;width:100px;height:100px;background-color:blue;"></div> <div style="display:inline-block;width:100px;height:100px;background-color:green;"></div>
4. display:flex
display:flex是CSS3中的新布局方式，可以很方便地实现各种复杂的布局效果。使用display:flex时，父容器会成为一个flex容器，其子元素会成为flex项。下面是一个例子：
<div style="display:flex;"> <div style="flex:1;background-color:red;"></div> <div style="flex:2;background-color:green;"></div> <div style="flex:1;background-color:blue;"></div> </div>
在上面的例子中，父容器设置了display:flex属性，其子元素则按照flex:1、flex:2、flex:1的比例占据父容器的空间。
5. display:grid
display:grid是CSS3中另一个强大的布局方式。使用display:grid可以将页面划分为多行多列的网格，并可以自由控制每个网格中的元素。下面是一个例子：
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;"> <div style="background-color:red;"></div> <div style="background-color:green;"></div> <div style="background-color:blue;"></div> <div style="background-color:yellow;"></div> </div>
在上面的例子中，父容器设置了display:grid属性，并通过grid-template-columns定义了三列，其子元素则依次填充到每个网格中。
总结：
通过display属性，我们可以轻松地控制元素的可见性和布局方式。对于不同的需求，我们可以选择不同的display属性值来达到我们想要的效果。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/279749.html
微信扫一扫 
支付宝扫一扫 