CSS隐藏内容的几种做法
一、CSS元素隐藏
在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。后宫选秀——一个一个看。
{ display: none; /* 不占据空间，无法点击 */ }{ visibility: hidden; /* 占据空间，无法点击 */ }{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间，无法点击 */ }{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }{ position: relative; top: -999em; /* 占据空间，无法点击 */ }{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }{
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */
}{
position: absolute;
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* 不占据空间，无法点击 */
}二、display:none和visibility:hidden的区别
- 空间占据 visibility:hidden占据空间
- 回流与渲染
- 株连性
display:none隐藏产生reflow和repaint(回流与重绘)，而visibility:hidden没有这个影响前端性能的问题；第三点估计是不少同行不知道的，就是“株连性”方面的差异。
株连性： 一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。
而我们给一个父元素应用visibility:hidden 如果子孙元素应用了visibility:visible，那么这个子孙元素又会显现出来。
三、height:0和overflow:hidden的组合
overflow:hidden用中文理解就是“溢出隐藏”，也就是盒子以外的内容都咔嚓掉不可见的。加上height:0，只要是一般的非inline水平元素，则元素内部所有子孙都应该是不可见的
height:0和overflow:hidden组合隐藏“失效”的条件如下：祖先元素没有position:relative/absolute/fixed声明，同时内部子元素应用了position:absolute/fixed声明。
overflow可以剪裁超出块状元素之外的元素。除非超出元素的包含块是整个视区或是该overflow元素的祖先元素。然后绝对定位元素的包含块应该就是含有position:relative/absolute/fixed的祖先元素。
因此：
body
height: 0; overflow: hidden;
position: absolute; /* 不会被隐藏 */position: relative;
height: 0; overflow: hidden;
position: absolute; /* 不会被隐藏 */height: 0; overflow: hidden; position: relative;
position: absolute; /* 会被隐藏 */height: 0; overflow: hidden;
position: relative;
position: absolute; /* 会被隐藏 */记住这个：position: absolute元素溢出overflow: hidden元素的时候，如果其第一个含有position属性(static除外)的祖先元素（一直到body）是overflow: hidden元素祖先元素的时候，则不隐藏；否则，隐藏。
腾讯云开发者
