display:none和visibility:hidden

原文

作用

用来隐藏页面的元素。

区别

display:none

被隐藏的元素彻底消失，不占物理位置。使用display:block让其重新显示。

visibility:hidden

仅看不见，仍占据物理空间，但是不能被浏览器发现，不能触发事件。

例：
隐藏元素均未隐藏

<span style=" background-color:yellow"> display:none  </span>
<span style=" background-color:green">我前面是display</span>

<br />

<span style=" background-color:yellow">visibility:hidden;</span>
<span style="background-color:green">我前面是visibility</span>

隐藏元素加入隐藏属性

<span style="  display:none ;background-color:yellow"> display:none  </span>
<span style=" background-color:green">我前面是display</span>

<br />

<span style="visibility:hidden; background-color:yellow">visibility:hidden</span>
<span style="background-color:green">我前面是visibility</span>

其他隐藏元素的方法

1. opacity:0;透明度为0

   仅仅不可见，但仍可被浏览器发现，也就能触发各种事件。

2. filter: opacity(0);
   同1

3. transform: scale(0)
   水平竖直方向缩小

4. width: 0; height: 0;

5. margin-left: -100%