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%