display:none和visibility:hidden的区别?

在CSS中,让元素隐藏指屏幕范围内肉眼不可见的方法很多,只不过有的依然保留空间,而有的却消失的不留痕迹,;
实际场景中大多数用来做display:none;但是visiblty也是在一些特殊场景中使用的;
面试的时候一般会问这个问题(估计网上搜的);
其实主要是考究背后的原理,我个人感觉这个应该问:display:none和visibility:hidden分别应用哪些场景,以及优缺点等更好;
如何和javascript如何搭配;这样可能会更加的实用。。。
相同点

这两个声明都可以让元素隐藏;

不同之处

display:none隐藏后的元素不占据任何空间它各边的元素会合拢,就当他从来不存在;(HTML元素(对象)的宽度、高度等各种属性值都将“丢失”,通俗来说就是看不见也摸不到。)

而visibility:hidden隐藏的元素空间依旧存在。(HTML元素(对象)仅仅是在视觉上看不见(完全透明,通俗来说就是看不见但摸得到。)

visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏览时保留位置;而display:none视为不存在,且不加载!

这个问题,我记得最先是从张鑫旭的博客上看到的,然后大家一起展开讨论和开始面试的;

这种程度的答案说明你在HTML/CSS方面的造诣只是了解这个层面,并不能让面试官眼前一亮。 目前,我所知道的不同有三点(欢迎补充):空间占据、回流与渲染、株连性

  • 第一点,想必都知道;
  • 第二点,display:none隐藏产生reflow和repaint(回流与重绘),而visibility:hidden没有这个影响前端性能的问题;
  • 第三点估计是不少同行不知道的,就是“株连性”方面的差异。 所谓“株连性”,就是如果祖先元素遭遇某祸害,则其子子孙孙无一例外也要遭殃。display:none就是“株连性”明显的声明:一旦父节点元素应用了display:none,父节点及其子孙节点元素全部不可见,而且无论其子孙元素如何不屈地挣扎都无济于事。 何时隐藏“失效”?很简单,如果子孙元素应用了visibility:visible,那么这个子孙元素可以显现出来。

下面是在牛客网上看到别人的总结,可以参考下

  • 1,display:none会让元素从渲染树中消失,渲染的时候不占据任何空间;visibility:hidden不会让元素从渲染树中消失,渲染的时候仍然占据空间,只是内容不可见。
  • 2,display:none是非继承属性,子孙节点消失是由于元素从渲染树中消失造成,通过修改子孙节点的属性无法显示;visibility:hidden是继承属性,子孙节点消失是由于继承了hidden,通过设置visibility:visible,可以让子孙节点显示。
  • 3,读屏器不会读取display:none的元素内容,而会读取visibility:hidden的元素内容。
<p>可以自己试试哦,一目了然。 </p>
<div id=d1 style='background:red;width:30px;height:30px'></div>
<div id=d2 style='background:yellow;width:30px;height:30px;visibility:hidden'></div>
<div id=d3 style='background:red;width:30px;height:30px'></div>
<div id=d4 style='background:red;width:30px;height:30px;display:none'></div>
<div id=d5 style='background:red;width:30px;height:30px'></div>
<div style="display:">显示</div>
<div style="display:none;">隐藏不占位</div>

<div style="visibility:">显示</div>
<div style="visibility:hidden;">隐藏占位</div>

<div visible="true" runat="server">显示</div>
<div visible="false" runat="server">消失不占位</div>

说明:

  1)display

    隐藏必须使用none值,该隐藏不占位,页面源代码可见。

    显示可使用空或block或inline,意思分别为:无此属性、显示视为div(有换行符)、显示视为span(无换行符)。

  2)visibility

    隐藏必须使用hidden值,该隐藏占位,页面源代码可见。

    显示可使用空或visible,意思分别为:无此属性、显示。

  3)visible(服务器控件)

隐藏必须使用false值与runat=”server”,该隐藏不占位,页面源代码不可见。

    显示可使用空或true,意思分别为:无此属性、可见。

看下例子吧:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td>
<table border="1">
<tr>
<td>第一行</td>
</tr>
<tr style="display:none">
<td>第二行</td>
</tr>
<tr>
<td>第三行</td>
</tr>
</table>
</td>
<td>
<table border="1">
<tr>
<td>第一行</td>
</tr>
<tr style="visibility:hidden">
<td>第二行</td>
</tr>
<tr>
<td>第三行</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>style="display:none"</td>
<td>style="visibility:hidden"</td>
</tr>
</table>
</body>
</html>

对比总结:这两个声明都可以让元素隐藏

display:none;隐藏后的元素不占据任何空间,有株连性,父级设置none,子元素就显示不出来了,回引起渲染与回流,影响性能。

visibility:hidden;隐藏的元素空间依旧存在;伪株连性,父级设计hidden,子元素默认不现实,但是可以用过visibility:visible显示出子元素,无渲染与回流。

{ display: none; /* 不占据空间,无法点击 */ }
{ visibility: hidden; /* 占据空间,无法点击 */ }
{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ }
{ position: relative; top: -999em; /* 占据空间,无法点击 */ }
{ position: absolute; visibility: hidden; /* 不占据空间,无法点击 */ }
{ height: 0; overflow: hidden; /* 不占据空间,无法点击 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */ }
{
    zoom: 0.001;
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
/* IE6/IE7/IE9不占据空间,IE8/FireFox/Chrome/Opera占据空间。都无法点击 */
}
/********************************************************************************/
{
    position: absolute;
    zoom: 0.001;
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
/* 不占据空间,无法点击 */
}

CSS display:none和visibility:hidden的区别

visibility:hidden隐藏,但在浏览时保留位置;CSS display:none视为不存在,且不加载!

Overflow属性值{visible|hidden|scroll|auto}前提是先要限制DIV的宽度(width)和高度(height)。二者都是隐藏HTML元素,在视觉效果上没有区别,但在一些DOM操作中二者还是有所不同的。

CSS display:none;

使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;

visibility:hidden;

使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。

总结

使用CSS display:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;

而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。

CSS display:none和visibility:hidden的区别

visibility:hidden隐藏,但在浏览时保留位置;CSS display:none视为不存在,且不加载!

Overflow属性值{visible|hidden|scroll|auto}前提是先要限制DIV的宽度(width)和高度(height)。二者都是隐藏HTML元素,在视觉效果上没有区别,但在一些DOM操作中二者还是有所不同的。

CSS display:none;

使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;

visibility:hidden;

使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。

~~~

未经允许不得转载:WEB前端开发 » display:none和visibility:hidden的区别?

赞 (0)