CSS隐藏元素的几种方式

CSS隐藏元素的几种方式

前言

开始之前，先来了解一下回流和重绘的概念。(经小伙伴评论提醒，后来加的内容)

回流：当我们修改元素的几何位置属性，如宽度、高度时，浏览器会重新布局，这个过程就叫回流

重绘：当我们修改元素的绘制属性，如背景色、颜色等，浏览器不会重新布局，但是需要重新进入绘制阶段，这个过程就是重绘。

可以通过css triggers网站查询元素是否会导致回流、重绘。

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

display: none

最常见的隐藏元素的方法，不会渲染该元素，所以该元素不会占位置，也不会响应绑定的事件。

html

<div></div>
<div onclick="alert('赤蓝紫')"></div>
<div></div> 

css

body {
    display: flex;
}
​
div {
    width: 100px;
    height: 100px;
}
​
div:nth-child(1) {
    background-color: red;
}
​
div:nth-child(2) {
    display: none;
    background-color: blue;
}
​
div:nth-child(3) {
    background-color: purple;
}