作用
用来隐藏页面的元素。
区别
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%
