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會顯得更好，由於咱們不會由於它而去改變了文檔中已經定義好的顯示層次結構了。