css知识总结

一 .实现隐藏

1、display：none

display:none可以让网页中所有内容不显示，不为被隐藏的对象保留物理空间，重现时触发reflow渲染，会影响到dom结构的渲染 ，同时触发repaint重绘。

display可能的值：

none——此元素不会被显示。

block——此元素将显示为块级元素，此元素前后会带有换行符。

inline——此元素会被显示为内联元素，元素前后没有换行符。

inline-block——行内块元素。（CSS2.1 新增的值）

list-item——此元素会作为列表显示。

2、visiblity：hidden

隐藏元素，占据空间，仅视觉上完全透明，重现时触发repaint重绘

visible——默认值。元素是可见的。

hidden——元素是不可见的。

collapse——当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。

3、使用overflow:hidden隐藏溢出内容结合height：0

overflow : hidden 这种方式可以隐藏掉固定区域外的内容，它可以有效控制显示区域。但应注意，使用它时需要给它定义宽度和高度，否则会无效。

overflow用法中存在一个分支，overflow-x:hidden和overflow-y:hidden，x是横向范围，y是纵向范围，这两个属性经常用在需要隐藏滚动条时。

visible——默认值。内容不会被修剪，会呈现在元素框之外。

hidden——内容会被修剪，并且其余内容是不可见的。

scroll——内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto ——如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }

相对于 display 来说适用范围太窄，但是好处是能使用 CSS3 动画。

4、opacity: 0;

严格来说这个并不是隐藏，透明之后它还占据着页面位置，所以在重排的时候还是会被计算消耗性能。

5、设置位置

{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }
{ position: relative; top: -999em; /* 占据空间，无法点击 */ }

6、CSS3属性

在W3C官方的标准里，通过transform下的scale属性可是由于目前几乎所有的浏览器对这个属性的渲染效率都很低，所以我们可以用下面的hack去提高渲染效率：

{
zoom: 0.001;      /*IE浏览器缩放
-moz-transform: scale(0); /* Firefox浏览器 */
-webkit-transform: scale(0); /* Webkit内核浏览器 */
-o-transform: scale(0);/* Opera浏览器 */
transform: scale(0);
/* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 ，若想都不占据空间，增加position: absolute;*/
}