首页 > 试题广场 > display:none和visibility:hidden
[问答题]
display:none和visibility:hidden的区别?
1,display:none会让元素从渲染树中消失,渲染的时候不占据任何空间;visibility:hidden不会让元素从渲染树中消失,渲染的时候仍然占据空间,只是内容不可见。
2,display:none是非继承属性,子孙节点消失是由于元素从渲染树中消失造成,通过修改子孙节点的属性无法显示;visibility:hidden是继承属性,子孙节点消失是由于继承了hidden,通过设置visibility:visible,可以让子孙节点显示。
3,读屏器不会读取display:none的元素内容,而会读取visibility:hidden的元素内容。
发表于 2016-09-18 19:54:44 回复(0)
(网上看到的很形象)
对比总结: 
display:none是个相当惨无人道的声明,子孙后代全部搞死(株连性),而且连块安葬的地方都不留(不留空间),导致全体民众哗然(渲染与回流)。 
visibility:hidden则具有人道***关怀,虽然不得已搞死子孙,但是子孙可以通过一定手段避免(伪株连性),而且死后全尸,墓地俱全(占据空间),国内民众比较淡然(无渲染与回流)。
发表于 2018-02-26 15:13:11 回复(0)
1、display:none的子孙节点消失,这是由于元素从渲染树中消失造成,visibility:hidden会子孙节点消失是由于继承性,可以设置visibility:visible让子孙节点显示
2、display:none不占据任何空间;visibility:hidden仍占据空间;
3、display:none会引起回流和重绘,visibility:hidden会引起重绘。
发表于 2018-08-24 16:37:09 回复(0)
<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>

发表于 2015-12-04 10:37:10 回复(0)
display:none,会触发reflow(回流),进行渲染。 visibility:hidden,只会触发repaint(重绘),因为没有发现位置变化,不进行渲染。
发表于 2019-04-26 11:16:42 回复(0)
display:none  隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,
就当他从来不存在。

visibility:hidden  隐藏对应的元素,但是在文档布局中仍保留原来的空间。
发表于 2015-07-27 12:04:25 回复(0)
龙丨行 关注 V-if与display:none的区别 (v-if v-show display:none visibility:hidden 辨析) 原创 2021-04-02 09:50:02 龙丨行 码龄5年 关注 前言:网上有很多相似的内容,为啥我还再写一篇?因为那些文章千篇一律都说的是 v-if 与 v-show, display:none 与 visibility:hidden各自的关系,而对于v-if与display,v-show与display的关系说得不是很清楚,所以写下这篇小记。 v-if :让Dom 节点直接消失。(即:视觉上看不到,也没有位置,dom节点也不在。) v-show: 调用display:none 来控制元素是否展示。 display:none --> 物理空间消失,但是dom还在(即:视觉上看不到,也没有位置,但是dom节点还在)。 visibility:hidden; -->物理空间以及dom都还在(即:视觉上看不到,但位置它还站着,但是dom节点还)。 综上所述:V-if与display:none的区别就是: v-if = display:none + 干掉其Dom节点。
发表于 2021-06-12 22:57:21 回复(0)
display:none会导致子节点消失。并且不会为其保留空间,会导致重排与重绘 V:h 也是导致消失。但是会为其保留空间。并且无重排与重绘 扩展:重排就是页面合适进行重新排列,重绘是页面的颜色与背景修改后重新渲染 重绘不一定重排 重排一定会重绘
发表于 2021-02-18 14:52:26 回复(0)
<p>display:none 不为隐藏对象保留空间,该对象在页面上彻底消失,看不见也摸不着</p><p>visible:hidden 不可见但仍然占据空间</p><p><br></p>
发表于 2021-01-06 19:21:50 回复(0)
display:none    隐藏对应的元素,在文档布局中不再给他分配空间,就当他不存在一样。
visibility:none  隐藏对应的元素,但是在文档布局中给他分配空间,把他在的位置给留出来。
发表于 2020-10-17 19:12:49 回复(0)
html标签
发表于 2020-09-16 16:36:17 回复(0)
<p>none,是不渲染dom元素,不占用位置,hidden 元素,依旧占用位置</p>
发表于 2020-09-11 20:56:54 回复(0)
<p>第一个none,不会保留空间。</p><p>第二个,即使隐藏了,还会留有空间。</p>
发表于 2020-07-26 00:27:58 回复(0)
display:none;会触发回流,元素隐藏不占用文档空间,相当于把元素删除;
visibility:hidden;元素隐藏,但是依然在文档空间中
发表于 2020-07-24 15:23:20 回复(0)
<p>display:none该元素隐藏且不占用文档空间位置,visibility:hidden该元素隐藏还是会文档空间</p>
发表于 2020-07-08 03:18:32 回复(0)
<p>display none将会使层完全消失 不占据文档流</p><p>另一个则是隐藏</p>
发表于 2020-06-17 14:55:51 回复(0)
<p>前者从渲染树消失,不占空间,株连子孙,无法读取,会引起重绘和回流</p><p>后者仍在渲染树,占据空间,子孙继承属性,放可修改,可以读取,只会引起重绘</p>
发表于 2020-05-30 23:17:44 回复(0)
<p>字面意思display有运行的意思,</p><p>visibility有可视化的意思</p>
发表于 2020-05-19 19:16:38 回复(0)
<p>display不存在dom元素,切换样式后文档会回流,性能消耗大</p><p>Visibility存在页面中,并且占有位置,切换样式文档重绘,性能消耗相对小</p>
发表于 2020-05-12 14:52:51 回复(0)

<p>display:none在渲染树中不占据空间,不可继承属性</p><p><br><br></p>

visibility:hidden只是隐藏看不见,在文档流中占据空间,在子元素中可以通过改变属性visibility使其看得见

编辑于 2020-05-02 15:23:07 回复(0)