首页 ›  文章

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

2019-08-14

display:none;与visibility:hidden;


  • 区别:

    display:none;元素并不会占据任何物理空间,但是visibility:hidden只是看不到,但是物理上还是存在的【也就是说如果使用display:none;原本该元素占用的空间会在页面布局上消失】


实例:

<!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>

实现效果

display:none;visibility:hidden;

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


美句赏析:

I want all of you,forever,You and me,every day. 我想完全拥有你,你和我,每一天,直到永远。


**希望从现在开始养成写文章的习惯,为了比昨天更好**
原文链接:segmentfault.com

上一篇:一个后端开发者的前端语言基础:JavaScript
下一篇:企业微信端项目登陆、获取用户信息流程等
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入