【零基础学习web前端】CSS中display和visibility的区别

Amy

【零基础学习web前端】CSS中display和visibility的区别

【零基础学习web前端】教程目录导航

http://www.sufeinet.com/thread-24027-1-1.html

display（显示） 属性和 visibility（可见性）属性都可以用来隐藏某个元素。但是
display:none 隐藏对象不保留物理空间；
visibility:hidden 隐藏对象保留所占据的物理空间。
例如：

[CSS] 纯文本查看 复制代码

.box{
        width: 120px;
        height: 220px;
        background: #c5c5c5;
    }
    .box1{
        width:100px;
        height: 100px;
        background: #6283ff;
    }
    .box2{
        width:100px;
        height: 100px;
        background: #62beff;
    }
    .hidden1{
        display: none;
    }
    .hidden2{
        visibility: hidden;
    }

[HTML] 纯文本查看 复制代码

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>  

以下是给box1不添加隐藏样式、给box1添加样式hidden1、给box1添加样式hidden2，效果图：

可以看出，display：none 隐藏后的元素不占据空间，而visibility：hidden隐藏后仍占据空间。

Amy

display的其他属性
display：block 以块方式显示元素，前后会带有换行符。
display：inline  会被显示为内联元素，前后没有换行符。
display：inline-block   行内块元素，相邻的元素将显示在同一行。

惜

我只是路过打酱油的。

范范

强烈支持楼主ing……

sufei

强烈支持楼主ing……

竹林风

楼主加油，持续关注中

liu

强烈支持楼主ing……