CSS中如何隐藏DOM节点

今晚注定是个不眠夜呀，手贱的同窗又要送上一则小文，来分享分享

一：

咱们在想对如何隐藏节点这个问题上有所建树的话，那么咱们就必需要先知道浏览器渲染引擎的基本工做原理，如今渲染引擎主力军有（Firefox使用Gecko —— Mozilla自家的渲染引擎；Safari 和 Chrome 使用 Webkit。Webkit是一种开源的渲染引擎）。

渲染的基本流程：

解析HTML构建DOM树——构建渲染树——渲染树布局——绘制渲染树。

若是亲你不知道，请关注这个链接有所介绍：http://ued.ctrip.com/blog/?p=3295

二：

完成上面的脑补以后就能够说说咱们的隐藏节点了。有两个CSS语句能起到隐藏节点的做用

一、visibility；

W3c定义的是规定了元素的是否可见，值得注意的是在下面提示部分有一句话说：即便不可见也会占用上面的空间，在这里就是在指它与display的不同了

二、display；

W3C在说明这个属性的时候是比较客观的，这个属性用于定义创建布局时元素生成的显示框类型。对于 HTML 等文档类型，若是使用 display 不谨慎会很危险，由于可能违反 HTML 中已经定义的显示层次结构。对于 XML，因为 XML 没有内置的这种层次结构，全部 display 是绝对必要的。

三、对比这两个他们都有相同的功能就是隐藏，而只有知道了他们的不一样点咱们才能够很好地使用这两种隐藏的方法。

不一样点：

当咱们定义了display后，在渲染树中不会引擎是不会去构建这个框的。而visibility当咱们使它隐藏的时候，他在渲染树中会构建，只是不去渲染。这也就是W3c上面所说的不可见会占空间的缘由。他们二者在优化中visibility会显得更好，由于咱们不会由于它而去改变了文档中已经定义好的显示层次结构了。