下面是关于 "css中visiblity和display异同详解" 的攻略：

1. visibility 和 display 的基本区别

1.1 visibility的作用

visibility 是一种控制网页元素显示和隐藏的属性。使用 visibility 属性可以控制元素是否显示在页面中。当 visibility 属性设置为 hidden 时，该元素在页面上仍会占据空间，但是该元素的内容将不会显示出来。

1.2 display的作用

display 是另一种控制网页元素显示和隐藏的属性。使用 display 属性可以控制元素的显示方式，可以将元素显示为块级元素或行内元素。当 display 属性设置为 none 时，该元素在页面中将不再占据任何空间。

1.3 visibility 和 display 的主要区别

visibility 和 display 的主要区别在于它们对元素的占据空间的影响不同。 visibility 属性设置为 hidden 时，该元素仍然在页面上占据空间，而 display 属性设置为 none 时，该元素不再在页面上占据任何空间。

2. 两个属性的代码实现

下面我们通过两个例子来说明 visibility 和 display 的使用方法。

2.1 示例1：使用 visibility 控制元素显示和隐藏

下面的代码演示了如何使用 visibility 属性来实现元素的显示和隐藏。

<!DOCTYPE html>
<html>
<head>
    <title>使用visibility属性实现元素的显示和隐藏</title>
    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background-color: #f00;
            border: 1px solid #000;
            padding: 10px;
            margin: 10px;
        }
        .hide{
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div id="box">
        <p>这是一个div元素</p>
        <p>这是一个隐藏的段落</p>
    </div>
    <button onclick="hide()">隐藏</button>
    <button onclick="show()">显示</button>
    <script type="text/javascript">
        function hide(){
            var p = document.getElementsByTagName("p")[1];
            p.className = "hide";
        }
        function show(){
            var p = document.getElementsByTagName("p")[1];
            p.className = "";
        }
    </script>
</body>
</html>

在上面代码中，我们使用了 visibility 属性来隐藏元素，即使 p 元素被隐藏，它仍然会占据空间，并且不会影响 #box 的布局。通过 JavaScript 监听按钮点击事件，实现了在隐藏和显示之间切换元素的效果。

2.2 示例2：使用 display 控制元素的显示和隐藏

下面的代码演示了如何使用 display 属性来实现元素的显示和隐藏。

<!DOCTYPE html>
<html>
<head>
    <title>使用display属性实现元素的显示和隐藏</title>
    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background-color: #f00;
            border: 1px solid #000;
            padding: 10px;
            margin: 10px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div id="box">
        <p>这是一个div元素</p>
        <p>这是一个隐藏的段落</p>
    </div>
    <button onclick="hide()">隐藏</button>
    <button onclick="show()">显示</button>
    <script type="text/javascript">
        function hide(){
            var p = document.getElementsByTagName("p")[1];
            p.className = "hide";
        }
        function show(){
            var p = document.getElementsByTagName("p")[1];
            p.className = "";
        }
    </script>
</body>
</html>

在上面的代码中，我们使用了 display 属性来隐藏元素。当 p 元素被隐藏时，它不再占据空间。通过 JavaScript 监听按钮点击事件，实现了在隐藏和显示之间切换元素的效果。

以上就是关于 "css中visiblity和display异同详解" 的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css中visiblity和display异同详解 - Python技术站

css中visiblity和display异同详解