关于CSS属性中visibility隐藏和display消失的区别简析-前端开发

CSS属性中的visibility和display都可以用来让元素在页面上不可见，它们看起来很相似，但它们却有着巨大的区别。在这篇攻略中，我们将会详细讲解这两者之间的不同，并包含两个示例来说明它们的不同之处。

CSS属性中的visibility和display都可以用来让元素在页面上不可见，它们看起来很相似，但它们却有着巨大的区别。在这篇攻略中，我们将会详细讲解这两者之间的不同，并包含两个示例来说明它们的不同之处。

visibility和display的区别简析

visibility属性

visibility属性仅仅是用来控制一个元素是否可见的。当一个元素被设置成visibility:hidden时，它仍然占据着原本的空间，但是它完全不会显示出来。相反，当元素设置为visibility:visible时，它会显示在页面上，但是对于其他部分来说，它的大小和位置仍然保持着不变。

以下是一个简单的示例，用来说明visibility属性的效果：

<!DOCTYPE html>
<html>
<head>
    <title>Visibility</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            visibility: hidden;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            visibility: visible;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

在上面的示例中，我们创建了两个带有不同背景颜色的盒子。使用visibility:hidden的样式，让.box1元素不可见但是仍然占据着原本的空间。使用visibility:visible的样式，让.box2元素在页面上可见。

display属性

display属性也可以让元素在页面上不可见，但是与visibility不同，这个属性会影响到元素在页面中的大小和位置。当一个元素被设置为display:none时，它不会显示出来，并且不占据任何的空间。其他的元素会顶替它的位置，填补它在页面中留下的空隙。

以下是一个简单的示例，用来说明display属性的效果：

<!DOCTYPE html>
<html>
<head>
    <title>Visibility</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            display: block;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

在上面的示例中，我们创建了两个带有不同背景颜色的盒子。使用display:none的样式，让.box1元素在页面上不可见，并且不占据任何的空间。使用display:block的样式，让.box2元素在页面上可见，并且占据着原本的空间。

小结

在CSS中，visibility和display两个属性都可以让元素在页面上不可见，但是它们却有着不同的特点。使用visibility属性可以让元素在页面上隐藏却不影响其他元素的位置，而使用display属性可以让元素在页面上消失并且不占据任何的空间。理解这些不同之处可以让我们更好地在编写CSS样式时使用它们。