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>

1.png

隐藏元素加入隐藏属性

<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>

屏幕快照 2019-07-06 下午3.58.34.png

其他隐藏元素的方法

  1. opacity:0;透明度为0

    仅仅不可见,但仍可被浏览器发现,也就能触发各种事件。
  2. filter: opacity(0);

    同1
  3. transform: scale(0)

    水平竖直方向缩小
  4. width: 0; height: 0;
  5. margin-left: -100%

声明:coder-syl|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - display:none和visibility:hidden


Carpe Diem and Do what I like