作用
用来隐藏页面的元素。
区别
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>
其他隐藏元素的方法
- opacity:0;透明度为0
仅仅不可见,但仍可被浏览器发现,也就能触发各种事件。 - filter: opacity(0);
同1 - transform: scale(0)
水平竖直方向缩小 - width: 0; height: 0;
- margin-left: -100%