opacity:0；Display:none 、visibility:hidden的区别

display:none的用处

display:none 一般用于JavaScript动态隐藏元素，值得注意的是：被隐藏的元素不占据原本的位置空间

display:none的实例

设置三个行内块盒子，添加相关属性，代码如下：

    <div class="box1">I am Box 1</div>
    <div class="box2">I am Box 2</div>
    <div class="box3">I am Box 3</div>

div{
    display: inline-block;
    width: 150px;
    height: 150px;
    border: 1px solid black;
    text-indent: 2em;
}

display:inline-block，将块级元素转化为行内块元素，故可在同一行排列，也可设置宽度高度属性，另外text-indent:2em是设置文本缩进（关于文本属性会有文章另外详细介绍）。
效果为：

此时为第二个盒子Box2设置 display:none

.box2{
    display: none;
}

则第二个盒子会“消失”，不再显示，不再占有原本的位置。

visibility:hidden也可以隐藏元素

visibility:hidden也可以用于元素的隐藏，但效果却不一样
譬如把box2的CSS样式改作：

.box2{
    /* display: none; */
    visibility: hidden;
}

添加了visibility:hidden 查看效果：

可得结论，visibility:hidden，确实可以隐藏元素，但是隐藏元素仍占有原本的位置，即没有彻底消失， 这与 display:none还是有很大区别的！

display：none的注意事项

许多资料都有作过说明，个人认为这一点容易被忽略，但确实是很重要的。即，display:none不推荐用于隐藏对SEO关键的部分。
若某个元素施以display:none，则搜索引擎会直接忽略隐藏的元素，不将其权重加入整体进行考虑。

举个例子，在一般情况里，我们通常会把logo图片放在h1标签里。logo是很重要的元素，h1又正好在搜索引擎优化中是很重要的标签。
我们可设置h1元素的长宽与logo图片一样，再为h1标签设定background-image属性，将logo图片作为h1标签的背景图片。这样就保证了logo的重要性。
但我们并不可把h1中的内容标签，用display:none来隐藏

h1{
    display: none;
    width: 200px;
    height: 200px;
    background-image: url();
}

尽管display：none能把h1标签中的文字给隐藏了，达到了视觉效果，但这样会使得整个h1标签的权重丢失，使它对搜索引擎来说不重要了！
因此，为了又能保证LOGO的权重和重要性，又能隐藏h1标签内的文字，我们用text-indent:-9999px 。用足够大的“负缩进”把文本放到我们看不到的地方，以达到隐藏的效果，但又不至于让搜索引擎忽视了h1的重要性。

opacity:0；Display:none 、visibility:hidden的区别

• opacity:0;设置透明度为0，隐藏该元素，但不影响布局。同时若该元素绑定了一些事件，如click事件，点击该区域还是能触发所绑定的事件。
• display:none；元素被隐藏起来了，且不占有原来的位置，会影响布局，且忽略掉该元素的权重。 相当于被删除了。
• visibility:hidden；隐藏该元素，不影响布局。但是所绑定的事件不会再被触发。