css两种隐藏div的区别

本文转载自查看原文 2019-03-27 18:50 1284 css

　　1.display：none

　　display:none该div会被隐藏，且不占样式空间，不会被该div影响任何布局

　　2.version:hidden

　　variable:hidden该div会被隐藏，但是依旧占样式空间，该div依然会影响布局

　　总结：display:none使div不存在，variable:hidden会保留div的宽高，占用一个空白区

<html>
<head>
<title></title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .show{
            height:100px;
            width:100px;
            variable:hidden;
        }
    
    </style>
<body>
    <div id="tab">
        <h2>show</h2>
        <div class="show"></div>
        <h1>version</h1>
    </div>
</body>
</html>

View Code

<html>
<head>
<title></title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .show{
            height:100px;
            width:100px;
            display:none;
        }
    
    </style>
<body>
    <div id="tab">
        <h2>show</h2>
        <div class="show"></div>
        <h1>version</h1>
    </div>
</body>
</html>

View Code

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 点击页面div弹窗以外隐藏的两种思路 Div+CSS两种盒子模型隐藏和显示div的两种方法引入外部CSS的两种方式及区别 css3，transition，animation两种动画实现区别 CSS盒子模型及两种盒子的区别文本输入框的两种div+css的写法关于VAD的两种内存隐藏方式关于html标签的两种隐藏方式两种隐藏元素方式【display: none】和【visibility: hidden】的区别