CSS

CSS visibility与display可见性区别

主要区别：

visibility:hidden//设置的不可见的元素任然会占据页面空间。    
 display:none     //因display属性主要是框类型，none 隐藏元素则不会占据原有空间

以下详细

属性

visibility属性规定元素是否可见。

display属性规定应该生成的框的类型。

特性

都可以显示隐藏元素。

visibillity

属性 解释
visibility 默认值。元素是可见的
hidden 元素是不可见的。
collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
inherit 规定应该从父元素继承 visibility 属性的值。

display

属性 解释
none 此元素不会被显示

当然display还有很多属性（可参考W3school最近好像改版了，比原来好看多了），和visibility的区别主要也是可见性。

DEMO

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>visibility</title>
<style type="text/css">
    div{
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 10px;
    }
    #b1{

    }
</style>
</head>
<body>
    <div id="b1">1</div>
    <div>2</div>
</body>
</html>

visibility

#b1{
    visibility:hidden;
}

display

#b1{
    display:none;
}

感谢：）