display:none和visiblity:hidden区别

简介:

相同:

1、两者都能隐藏元素。

不同:

1、display:none 不占页面空间,visiblity:hidden 占据原先页面空间。

这里必须说明的是,元素不占页面空间后,取该元素或其内部元素的宽高值永远是0。如果想隐藏又想取到宽高值,那就得用visiblity:hidden。

2、display:none 的子元素也一定无法显示,visiblity:hidden 的子元素可以设置显示。

display:none元素及其子元素都将隐藏,而visiblity:hidden元素的子元素却可以设置visibility: visible 显示出来。在这一点上,如果页面是比较复杂或者是不受控制的,就要慎重使用visiblity:hidden,因为保不齐哪个元素被设置成可见,影响显示效果。

3、display:none 引起页面重绘和回流, visiblity:hidden 只引起页面重绘。

visiblity:hidden 看起来的性能比display:none好些,在两者都能使用情况下,可先考虑visiblity:hidden。但也不用千方百计用visiblity:hidden,用哪个还是看需求,性能优化只是其中一部分,莫要本末倒置。



本文转自 海角在眼前 博客园博客,原文链接:  http://www.cnblogs.com/lovesong/p/8045091.html ,如需转载请自行联系原作者

相关文章
|
1月前
|
前端开发 JavaScript
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
在CSS中,`opacity: 0`、`visibility: hidden` 和 `display: none` 都能隐藏元素,但各有千秋。`opacity: 0` 使元素透明但仍占布局空间;`visibility: hidden` 同样保留空间但使元素完全不可见;而 `display: none` 则彻底移除元素及其所占空间。根据具体需求选择合适方式可优化页面表现与性能。
|
6天前
|
前端开发
使用display:inline-block会产生什么问题?解决方法?
【10月更文挑战第27天】使用`display: inline-block`时可能会出现空白间隙和垂直对齐等问题,但通过上述相应的解决方法,可以有效地克服这些问题,实现更精确、更美观的页面布局效果。
CSS3【display: flex;】与【align-items: 侧轴对齐方式;】的使用
CSS3【display: flex;】与【align-items: 侧轴对齐方式;】的使用
77 0
|
容器
【已解决】text-overflow: ellipsis; 不生效(除了white-space:nowrap;overflow: hidden;之外)
text-overflow: ellipsis; 不生效(除了white-space:nowrap;overflow: hidden;之外)
1100 0
|
前端开发 容器
CSS - float & overflow: hidden
CSS - float & overflow: hidden
175 0