首先看看两者在mdn上的解释:
visibility: visible | hidden | collapse | inherit
visible: 元素正常显示.
hidden: 隐藏元素,但是其他元素的布局不改变.相当于此元素变成透明
collapse: 暂时没用过,以后用到了再补充.
默认值是visible, 是继承属性:意味着我们给父元素设置visibility: hidden,则子元素继承该属性,表现为隐藏,符合我们的预期.
display: none | inline | block | flex ....
display 属性指定用于元素的呈现框的类型,元素默认的display属性取决于html规范中所描述的行为或浏览器的默认样式表.
比较特别的是display: none,声明了该属性的元素包括其子元素都不会被浏览器渲染.即元素节点"不存在".
区别
- 首先是布局上: visibility:hidden 占用布局,display:none不会占用页面布局.
- visibility: hidden是可以被过渡的属性(与transition配合使用).
看例子:
.foo {
background-color: orange;
width: 100px;
height: 100px;
border: 1px solid;
transition: all 0.5s ease-in;
visibility: visible;
}
.foo:hover {
visibility: hidden;
}
元素会在0.5s后隐藏.可以将它与opacity属性做类比: visible等价于1, hidden等价于0,当值为0时元素隐藏.
相同点
visibility:hidden的元素无法捕获点击等事件(与display: none相同)
一个用于二级导航的例子:
.menu-item-has-children:hover .sub-menu {
visibility: visible;
opacity: 1;
}
.sub-menu {
transition: all 0.3s ease-in-out;
visibility: hidden;
opacity: 0;
}
这里给二级导航栏添加了渐隐效果,同时为了防止二级导航栏隐藏以后依然可点击,于是添加了visibility属性过渡.
opacity: 0时元素依然可以捕获点击事件! 此时只是元素变透明而已
