首页 > 试题广场 >

下列说法正确的是（）

[不定项选择题]

下列说法正确的是（）

display: none；不为被隐藏的对象保留其物理空间；

visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明；

visibility:hidden;产生reflow和repaint(回流与重绘)；

visibility:hidden;与display: none;两者没有本质上的区别；

查看正确选项

阿里内推王

display: none和visibility:hidden的区别就是visibility:hidden会保留元素的空间


repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。

reflow(渲染)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。

所以display:none才会产生reflow

visibility:hidden只会出发repaint

发表于 2016-04-29 11:14:06 回复(4)

炫

display:none可以理解为看不见摸不着
visibility：hidden可以理解为看不见摸得着
display的切换会触发reflow，而visibility不会。

编辑于 2016-05-11 14:07:36 回复(1)

胖胖梅

display:none改变了dom的结构，所以产生了reflow visibility:hidden没有改变dom结构，触发repaint

发表于 2016-06-17 11:03:12 回复(2)

牛客340164号

DOM元素属性变化，浏览器通知render重新描绘相应元素，这过程称为repaint（重绘）！如果该次变化设计元素布局，浏览器抛弃原属性，重新计算并把结果传递给render以重新描绘页面元素，称该过程为reflow（回流）！ display切换会触发reflow，visibility不会，前者脱离文档流，后者还存在于文档流

发表于 2016-05-25 16:36:59 回复(0)

最讨厌晚上9点半，钉钉响起的声音

ps：
display: none（不保留物理空间）
和visibility:hidden（保留物理空间）

display 会引起reflow（回流，渲染）
visibility会引起repaint （重绘）

回流（reflow）必将引起重绘（repaint），重绘不一定会造成回流。

发表于 2017-03-26 21:01:26 回复(1)

Jnim

display:none元素会被隐藏并且不会占用空间

visibility:hidden元素虽然被隐藏但是还会占用空间

通过构造渲染树将可见的节点与样式结合起来，display:none不会显示在渲染树上，visibility:hidden会显示在渲染树上

计算元素在设备视口的位置的阶段就是回流

知道了元素的样式与几何信息（位置大小）就可以将节点转化为屏幕上的具体像素，就叫重绘节点

当布局与几何信息发生改变时就会产生回流

回流一定会触发重绘，而重绘不一定会回流

https://segmentfault.com/a/1190000017329980#item-2

链接里面讲的是回流重绘，挺清楚的

display:none会导致位置变化，所以触发回流重绘

visibility:hidden不会导致位置变化，只会改变外观为隐藏，所以只会触发重绘

发表于 2020-06-26 17:59:57 回复(0)

小北风.

display：none；可以理解为看不见摸不着

visibility：hidden；可以理解为看不见摸得着

由于display：none看不见摸不着，它改变了dom结构，所以产生了reflow

而visibility：none是看不见摸得着，即元素隐藏但是空间还在，所以产生repaint

display：none和visibility：hidden的区别在于display不保留空间，而visibility保留空间

发表于 2017-10-30 09:07:03 回复(0)

进击的呢哞

css隐藏元素的方法一：使用opacity属性

检索或设置对象的不透明度当他的透明度为0的时候,视觉上它是消失了,但是他依然占据着那个位置,并对网页的布局起作用。它也将响应用户交互。添加了opacity属性的元素,它的背景和元素内容也是会跟着变化的。

css隐藏元素的方法二：使用display属性

当元素的display属性为none时,该元素就会就会从视觉中消失,并且连盒模型也不生成.也不会在页面占据任何位置,不但如此,就连它的子元素也会一同从盒子模型中消失。

css隐藏元素的方法三：使用visibility属性

visibility属性类似opacity属性，该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。

css隐藏元素的方法四：使用position属性

position属性的意义就是把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），达到一定的值，离开当前可是页面。

发表于 2022-03-19 15:25:51 回复(0)

YPKSEU

应该是AB

发表于 2016-07-14 18:36:09 回复(0)

悲伤荷包蛋o

display

控制元素显示模式，还可以让元素隐藏

通过display隐藏的元素不占据页面位置,会影响其他元素排列

visibility

只能控制元素的显示与隐藏

通过visibility隐藏的元素还占据页面位置,不会影响其他元素排列

发表于 2022-09-23 18:06:18 回复(0)

在吵架的劳伦斯很不想泡池子

visibility:hidden;仅为视觉上的完全透明?这个怎么理解，怪怪的，透明不是opacity吗

发表于 2023-10-08 13:55:04 回复(0)

已注销

display: none和visibility:hidden的区别就是visibility:hidden会保留元素的空间 repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。 reflow(渲染)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。所以display:none才会产生reflow visibility:hidden只会出发repaint

发表于 2023-07-27 23:54:59 回复(0)

长夜辞忧

display:none元素隐藏，不占据空间，涉及到了DOM结构，所以产生回流重绘 visibility:hidden元素不可见但是保留空间不影响结构，所以只产生重绘

发表于 2022-09-12 21:57:25 回复(0)

…201909091230891

repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。

reflow(渲染)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。

所以display:none才会产生reflow

visibility:hidden只会出发repaint

编辑于 2022-05-16 22:23:15 回复(0)

坦荡的林北希望被捞

发表于 2021-12-25 16:30:35 回复(0)

牛客514600772号

看错题可还行

发表于 2021-04-28 21:49:16 回复(0)

牛客683351551号

重流一定会引起重绘

发表于 2020-08-14 01:26:50 回复(0)

陳呼呼

display: none和visibility:hidden的区别就是visibility:hidden会保留元素的空间
display:none 会改变dom结构，才会产生reflow

visibility:hidden 不会改变dom结构 ，只会出发repaint

发表于 2020-06-09 11:41:15 回复(0)

牛客174685427号

reflow

发表于 2020-04-02 13:44:34 回复(0)

Three_Stone

Repaint 只是改变 display:none Reflow 未改变结构 visibility :hidden

发表于 2019-07-26 23:50:41 回复(0)

提交观点

问题信息

2017 前端工程师字节跳动 HTML

来自：字节跳动2017前端工...

难度：

40条回答 2320收藏 10900浏览

下列说法正确的是（）

问题信息

热门推荐

相关试题