在这个系列里我会为大家讲解一些前端面试里有关css的常考题。在面试官问到我们有关css的问题时，很有可能会问到这些问题。
回流重绘
什么是回流重绘
- 回流：浏览器渲染页面之前需要对结构进行布局计算 。回流会导致浏览器重新计算并绘制元素的几何属性，然后确定页面上每个元素的位置和大小，然后进行布局调整。
- 重绘：将已经计算好布局的容器绘制出来。重绘只会更新元素的外观，而不会影响其几何属性或布局。
值得注意的是，回流对于性能的开销要比重绘大还很多，因为重绘只需要对页面上的元素进行更新而不需要和回流一样进行布局计算。
回流重绘的触发
- 回流：页面上有容器的几何属性发生变更时，会触发回流。
- 重绘：容器非几何属性变更（字体，颜色），但不影响其在页面中的布局时，会触发重绘。
值得注意的是，在实际的开发中为了提升性能我们应该尽量减少回流和重绘的触发。
css中隐藏页面元素的方法
- display: none
使用display: none可以将页面元素隐藏，并且不占据任何空间，但是它不会影响页面的布局。当一个元素设置为display: none时，它会脱离文档流，并且无法响应事件，使用display: none时会造成回流重绘。
- visibility: hidden
使用visibility: hidden可以将页面元素隐藏，但是隐藏后的元素仍然会占据文档流，即使元素被隐藏了，但它仍然会影响页面的布局。同时visibility: hidden无法响应事件，使用visibility: hidden时只会造成重绘而不会造成回流。
- opacity: 0
opacity: 0能够响应事件的作用是使元素的透明度变为0，因此使用opacity: 0将元素完全后即使元素不可见，但是它仍然会占据文档流，依旧会影响到页面上的其他元素，而且依旧能够响应事件。它的使用可能会造成重绘。
- position: absolute
position: absolute的作用是相对于最近的父级元素进行定位，我们可以通过控制使用了position: absolute的元素的位置来实现页面元素的隐藏。使用position: absolute会脱离文档流，脱离了文档流之后的元素并不会占据页面上的空间，不会影响页面布局。position: absolute无法响应事件而且它的使用会造成回流和重绘。
- clip-path: circle(0%)
clip-path: circle()的作用是裁剪，它可以用来剪裁元素的可见部分，使得元素只有在指定形状范围内可见，clip-path: circle(0%)则会将页面元素完全隐藏。clip-path: circle(0%)会占据文档流且无法响应事件同时它的使用会造成重绘。
以上让页面元素隐藏的方法的不同点我用加粗进行了标注，希望能够对你有所帮助。
