CSS Display Property: 控制HTML元素的显示与隐藏

一、CSS Display属性的介绍

CSS Display属性是用来控制HTML元素在页面上的显示与隐藏，是所有CSS属性中最常使用的属性之一。当我们设置一个元素的CSS Display属性为none，那么这个元素就会在页面上消失，当我们将其设置为block、inline、inline-block等属性时，该元素就会出现在页面上。下面我们将会对Display属性的常见取值进行介绍。

二、CSS Display属性的取值及其介绍

1、block

/*HTML*/

<div id="block-example">
    <p>这是一个例子</p>
</div>

/*CSS*/

#block-example{
    display:block;
    width:100px;
    height:50px;
    background-color:red;
}

block表示将整个元素显示成块级元素，块级元素会独占一行，并且会在前后添加 \
标签。我们通过上面的代码可以看到，设置了display:block属性的div元素，会显示成一个宽度为100px、高度为50px的红色框。

2、inline

/*HTML*/

<span id="inline-example">这是一个例子</span>

/*CSS*/

#inline-example{
    display:inline;
    background-color:red;
}

inline表示将元素显示成行内元素，行内元素不会在前后添加 \
标签，而是排在一行内，直到一行排不下才会自动换行。我们通过上面的代码可以看到，将display属性设置为inline的span元素会显示成一个红色的文字，而且不会独占一行。

3、inline-block

/*HTML*/

<div id="inline-block-example">
    <p>这是一个例子</p>
</div>

/*CSS*/

#inline-block-example{
    display:inline-block;
    width:100px;
    height:50px;
    background-color:red;
}

inline-block结合了上面两种属性的特点，既可以像inline一样排在一行内，也可以像block一样设置宽高等属性。我们通过上面的代码可以看到，将display属性设置为inline-block的div元素会显示成一个宽度为100px、高度为50px的红色框，并且不会独占一行。

4、none

/*HTML*/

<div id="none-example">
    <p>这是一个例子</p>
</div>

/*CSS*/

#none-example{
    display:none;
    width:100px;
    height:50px;
    background-color:red;
}

none表示让元素在页面中消失不见，与visibility:hidden属性不同的是，使用display:none属性的元素不仅不会显示，也不会占据页面中的空间。我们通过上面的代码可以看到，设置了display:none属性的div元素不会在页面中显示，就算设置了宽高和背景颜色也没有用。

三、使用CSS Display属性的注意事项

1、inline元素和inline-block元素的间距问题

我们在页面上经常会将多个行内元素或行内块级元素排在一起，但是如果不做特定的设置，它们之间会存在一定的间距，给布局造成一定的影响。这是因为在HTML文档中，多个行内元素排列在一起时，它们之间会有一个空格，这个空格会被解析成一个字符，所以页面上它们之间就会有一定的间距。解决这个问题可以使用以下两种方式：

/*方法1：去除空格*/

<div id="inline-example1"><p>这是一个例子1</p></div><div id="inline-example2"><p>这是一个例子2</p></div>

#inline-example1,#inline-example2{
    display:inline-block;
}

/*方法2：设置font-size：0*/

<div id="inline-example1"><p>这是一个例子1</p></div><div id="inline-example2"><p>这是一个例子2</p></div>

#inline-example1,#inline-example2{
    display:inline-block;
    font-size:0;
}

#inline-example1 p,#inline-example2 p{
    font-size:16px;
}

第一种方式比较简单，就是将多个inline元素挨着放，不要在它们之间添加空格。第二种方式是将其父元素的字体大小设置为0，然后在内部的元素恢复正常字体大小。

2、使用none属性可以实现元素的延迟加载

CSS Display属性的一个比较巧妙的应用是实现页面的延迟加载。在页面中，我们可以先将某些元素的Display属性设置为none，这样页面不会立即加载这部分内容，直到用户触发某些事件（例如点击某个按钮），我们再将这部分内容的Display属性设置为block，实现延迟加载的效果。这种方式可以有效减轻页面的加载压力，提高用户的体验效果。

3、不要滥用none属性

虽然使用CSS Display属性的none取值可以方便地隐藏/显示某些元素，但是不要滥用它。例如，如果我们需要暂时隐藏某个元素，不要将其Display属性设置为none，可以将其封装到一个父元素内部，然后将这个父元素的Display属性设置为none。这样做的好处是我们后续需要显示这个元素时，不用重新设定其宽高等属性，可以提高Web页面的运行效率，优化用户体验。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/154689.html