CSS中隐藏页面元素的几种方式和区别

CSS中隐藏页面元素的几种方式和区别

总结方法:

display : none ;
visibility : hidden ;
opacity : 0;

方法一 : display : none ;

元素不可见,不占据空间,会导致浏览器重排的重绘,无法响应点击事件

方法二 : visibility : hidden

从页面上隐藏,DOM依旧存在,不会发生重排,但是会发生重绘。

方法三 : opacity : 0

表示元素的透明度,只是页面上透明度为0,自身事件仍然可以触发

总结区别

CSS中隐藏页面元素的几种方式和区别_第1张图片

扩展 :

重绘 :元素外观导致的浏览器行为,比如 : 修改CSS样式
重排 : DOM元素被JS触发,渲染树需要重新计算

你可能感兴趣的:(面试题,css,css3,前端)