Better than yesterday-前端【display:none与visibility:hidden;】

时间 2020-05-31

标签 better 前端 display visibility hidden 栏目 CSS 繁體版

原文原文链接

display:none;与visibility:hidden;

相同点：
二者都能实现元素的隐藏css

区别：
display:none;元素并不会占据任何物理空间，可是visibility:hidden只是看不到，可是物理上仍是存在的【也就是说若是使用display:none;本来该元素占用的空间会在页面布局上消失】html

实例：布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>display:none与vivibility:hidden实践</title>
    </head>
    <style type="text/css">
            div
            {
                width:200px;
                height: 100px;
                border: 2px solid black;
            }
            .first
            {
                display: none;
            }
            .hidden
            {
                visibility: hidden;
            }
    </style>
    <body>
        <div class="first">
            第一个div设置display:none
        </div>
        <div>
            第二个div
        </div>
        <div class="hidden">
            第三个div设置visibility:hidden
        </div>
        <div>
            第四个div
        </div>
    </body>
</html>

实现效果

**显而易见的是，第一个div设置了display:none;因此第一个divc从页面布局中消失了
相对的第三个div设置了visibility:hidden;虽然看不到了可是保留了原有的宽高**spa

美句赏析：
I want all of you,forever,You and me,every day.
我想彻底拥有你，你和我，每一天，直到永远。code