用css隐藏页面元素有许多种方法：
display:none (通过隐藏盒子属性，脱标)
visibility:hidden (通过隐藏盒子属性，不脱标)
opacity:0 (通过改变元素的透明度，不脱标)
position:absolute (通过定位将元素定到远离页面的位置，脱标)
cli-path:polygon(0px 0px , 0px 0px,0px 0px,0px 0px) (通过裁剪盒子，不脱标)
position:absolute;与clip:rect(0px 0px 0px 0px)配合 (通过裁剪绝对定位的盒子，脱标)
visibility、display、opacity三者区别：
隐藏后是否占据原有空间
display：none ，不占据空间，页面重新渲染
visibility：hidden，占据空间，不能触发点击事件
opacity：0 ，占据空间，仍可触发点击事件
性能
display：none 引起页面回流与重绘，性能消耗大
visibility：hidden 只造成本元素的重绘，性能消耗较少
opacity：0 只造成本元素重绘，性能消耗较少
继承
display：none和opacity：0 非继承属性，修改子孙节点属也无法显示
visibility：hidden 是继承属性，子孙节点由于继承了visibility：hidden才不显示，通过设置子节点visibility：visible就可以让子孙节点显示出来。
css3动画transition支持性
transition不支持display属性
transition动画支持opacity或者visibility属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隐藏元素的方式</title> <style> .box{ width: 300px; height: 200px; background-color: pink; line-height: 200px; } .hidd{ position: absolute; top:-10000px; left: -10000px; } .clip{ clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); } .poclip{ position: absolute; clip:rect(0px,0px,0px,0px); } </style> </head> <body> <button onclick="change1()">display隐藏</button> <button onclick="change2()">visibility隐藏</button> <button onclick="change3()">opacity隐藏</button> <button onclick="change4()">position隐藏</button> <button onclick="change5()">cli-path隐藏</button> <button onclick="change6()">clip隐藏</button> <div class="box "> <span>https://blog.csdn.net/muzidigbig/</span> </div> <p>我对你开过的玩里面，藏着我想对你说不出的秘密。</p> </body> <script > function change1() { var box = document.getElementsByClassName('box')[0]; //隐藏之后不占据原来的位置(脱标) box.style.display = 'none'; } function change2() { var box = document.getElementsByClassName('box')[0]; //隐藏之后还占据原来的位置(不脱标) box.style.visibility = 'hidden'; } function change3() { var box = document.getElementsByClassName('box')[0]; //通过改变透明度来隐藏(不脱标) box.style.opacity = '0'; } function change4() { var box = document.getElementsByClassName('box')[0]; //定位(脱标) box.className += 'hidd' } function change5() { var box = document.getElementsByClassName('box')[0]; //通过裁剪元素(不脱标) box.className += 'clip' } function change6() { var box = document.getElementsByClassName('box')[0]; //通过裁剪与定位(脱标) box.className += 'poclip' } </script> </html>
