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，用哪个还是看需求，性能优化只是其中一部分，莫要本末倒置。

转载于:https://www.cnblogs.com/lovesong/p/8045091.html

display:none和visiblity:hidden区别相关推荐

CSS的display:none与visible:hidden区别
1 display:none和visible:hidden都能把网页上某个元素隐藏起来. 2区别 display:none 不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见 ...
display:none和visibility:hidden区别
转载于:https://www.cnblogs.com/qunxiadexiaoxiangjiao/p/8516511.html
display:none与visible:hidden的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就 ...
关于CSS属性display:none和visible:hidden的区别
display:none和visible:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,经过亲自实验,我发现使用visible:hidden属性会使对象不可见,但该对象在网页所占的空 ...
display:none和visible:hidden两者的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就 ...
[css] 说说display:none和visibility:hidden的区别
[css] 说说display:none和visibility:hidden的区别 display:none dom对象不渲染. visibility:hidden 隐藏但是dom对象渲染. 个人简介 ...
display:none和visibility:hidden两者的区别
使用css让元素不可见的方法有很多种,裁剪.定位到屏幕外边.透明度变换等都是可以的.但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden.很多公司的面 ...
易混淆知识点（2）：display:none与visible:hidden的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none 不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不 ...
display:none与visible:hidden的区别？
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就 ...

display:none和visiblity:hidden区别

display:none和visiblity:hidden区别相关推荐

最新文章

热门文章