前端面试题-display:none和visibility:hidden的区别
一、display:none和visibility:hidden的区别
1.1 空间占据
1.2 回流和渲染
1.3 株连性
二、空间占据
display:none 隐藏后的元素不占据任何空间,而 visibility:hidden 隐藏的元素空间依旧存在。
三、回流和渲染
display:none 隐藏产生回流和重绘(reflow 和 repaint),而 visibility:hidden 只产生重绘。
三、株连性
display:none 就是“株连性”明显的声明:一旦父节点元素应用了 display:none,父节点及其子孙节点元素全部不可见,而且无论其子孙元素如何不屈地挣扎都无济于事。
四、隐藏失效
若子孙元素应用了 visibility:visible,则这个子孙元素不但不会隐藏,而且会显现出来。
Code
Example
相关推荐
-
学习CSS中的BFC css3
2018-10-25
-
CSS粘性定位是怎样工作的 css3
2019-2-12
-
关于元素间的边距重叠问题与BFC css3
2019-10-9
-
flex布局入门 css3
2019-9-1
-
CSS 自适应布局 css3
2019-3-26
-
常用的布局方式之 Flex 布局 css3
2019-6-15
-
纯css3实现曲线运动——贝塞尔曲线(cubic-bezier) css3
2019-8-21
-
深入解析CSS FlexBox css3
2019-5-11
-
CSS:自适应N列布局如何解决两端对齐 css3
2019-3-9
-
css3实现元素环绕中心点布局 css3
2019-1-1