最近面试遇到了一个很细节的题目，面试官问由浅入深分别询问1.你知道哪些css属性可以隐藏元素？，2.它们之间各有什么区别可以说一说嘛？3.如果给父元素设置上述属性，怎样可以让子元素显示出来？面试的时候这道题答得不是很好，对相关概念比较模糊，于是准备写篇文章记录下。
css有以下五种属性可以隐藏元素
1.display：none
display展示的意思，display:none即不展示，此时元素看不见（没有渲染出来）摸不着（不占据空间位置），会导致页面的回流和重绘。Vue框架中的v-show就是通过控制元素的这个属性来显示和隐藏。
父元素设置display:none后，子元素不管设置什么属性都无法出现。
2.visibility：hidden
visibility可见性的意思。设置visibility:hidden,此时元素看不见（没有渲染出来）但摸得着（占据空间位置）。会导致页面的重绘。
visibility：visible | hidden | collapse | inherit
父元素设置visibility：hidden后，子元素设置visibility：visible可以出现。
3.opcity：0
opacity透明度的意思。设置opacity：0即将元素透明度调成0，此时元素不可见。元素看不见（没有渲染出来）但摸得着（占据空间位置）。会导致页面的重绘。
4.transform:scale(0)
将一个元素缩放到0，它会消失，但是缩放不会影响元素的位置或布局，因此如果你缩小一个元素，它仍然会占用与原始大小相同的空间。
4.clip：rect(0, 0,0,0)
该属性只针对绝对定位元素起作用，将元素裁剪到0，使其不可见，但此时元素依旧占据着位置。
clip：shape(设置元素形状唯一合法的形状值是：rect (*top*, *right*, *bottom*, *left*)) | auto(默认值) |inherit
注：除了visibility：hidden，子元素重新设置visibility：visible可以出现。别的属性父元素隐藏后子元素也没法出现。
