前端面试宝典 每日一题（11）关于css隐藏元素的一些思考

🧑🏻‍写在前面的话：
这个系列文章可能开始，有人会觉得很low， 我是打算从H5先开始整理，最后到常见的前端框架、以及一些前端常见的算法、leetcode的一些算法解析， 感兴趣的小伙伴可以持续关注，每天分享一个前端知识点，希望大家一起进步。

1.隐藏元素的方法有哪些？

1. overflow的hidden用来隐藏元素溢出部分，元素会占据空间，无法响应点击事件。
2. opacity:0; 元素占据空间，可以响应点击事件
3. visibility:hidden;占据空间，无法响应点击事件
4. display:none; 不占据空间，无法响应点击事件 彻底的隐藏了元素，不占据空间，也就不影响布局。
5. z-index 脱离文档流的元素，可以通过设置 z-index 为负值 来隐藏元素，
6. transform: scale(0,0) 通过transform 中的缩放属性，将元素缩小为0，达到隐藏效果，还会占据布局空间

这里我整理了6中实现元素隐藏的方法，分别从是否占据空间和能否响应点击事件两个方面去考虑，每一种方法之间都会有些细微的差距，当然每个人可能都会有自己比较熟悉的实现方案，随着我们经验的增长，我相信每个人都会得到一个最优解。

2.为什么有时候translate来改变位置而不是定位？

translate 不会触发浏览的重绘，如果使用定位去修改位置 ，会触发重新布局，transform使浏览器为元素创建一个GPU 图层，但改变绝对定位会使用到 CPU进行重新渲染。 因此translate()更高效，可以缩短平滑动画的绘制时间。

这篇文章给大家整理了，两个比较常见的知识点，希望对大家学习前端有所帮助。