display:none和visibility:hidden

[问答题]

display:none和visibility:hidden的区别？

鸢尾飞飞

1、display:none的子孙节点消失，这是由于元素从渲染树中消失造成，visibility:hidden会子孙节点消失是由于继承性，可以设置visibility：visible让子孙节点显示；

2、display：none不占据任何空间；visibility：hidden仍占据空间；

3、display:none会引起回流和重绘，visibility:hidden会引起重绘。

发表于 2018-08-24 16:37:09 回复(0)

一个好名字

display:none，会触发reflow（回流），进行渲染。 visibility:hidden，只会触发repaint（重绘），因为没有发现位置变化，不进行渲染。

发表于 2019-04-26 11:16:42 回复(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 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，

就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

发表于 2015-07-27 12:04:25 回复(0)

牛客3905078号

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)

_Xicm

（网上看到的很形象）

对比总结：

display:none是个相当惨无人道的声明，子孙后代全部搞死（株连性），而且连块安葬的地方都不留（不留空间），导致全体民众哗然（渲染与回流）。
visibility:hidden则具有人道***关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。

发表于 2018-02-26 15:13:11 回复(0)

Songcubi

龙丨行关注 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)