一、CSS 隱藏頁面元素的方法

1、display:none

設(shè)置元素的display為none是最常用的隱藏元素的方法。將元素設(shè)置為display:none后，元素在頁面上將徹底消失，元素本來占有的空間就會被其他元素占有，也就是說它會導(dǎo)致瀏覽器的重排和重繪。

2、visibility:hidden

設(shè)置元素的visibility為hidden也是一種常用的隱藏元素的方法，和display:none的區(qū)別在于，元素在頁面消失后，其占據(jù)的空間依舊會保留著，所以它只會導(dǎo)致瀏覽器重繪而不會重排。visibility:hidden適用于那些元素隱藏后不希望頁面布局會發(fā)生變化的場景

3、opacity:0

opacity屬性表示元素的透明度，而將元素的透明度設(shè)置為0后，在我們用戶眼中，元素也是隱藏的，這算是一種隱藏元素的方法。這種方法和visibility:hidden的一個共同點是元素隱藏后依舊占據(jù)著空間，但我們都知道，設(shè)置透明度為0后，元素只是隱身了，它依舊存在頁面中。

4、設(shè)置height，width等盒模型屬性為0

簡單說就是將元素的margin，border，padding，height和width等影響元素盒模型的屬性設(shè)置成0，如果元素內(nèi)有子元素或內(nèi)容，還應(yīng)該設(shè)置其overflow:hidden來隱藏其子元素。

這種方式既不實用，也可能存在著著一些問題。但平時我們用到的一些頁面效果可能就是采用這種方式來完成的，比如jquery的slideUp動畫，它就是設(shè)置元素的overflow:hidden后，接著通過定時器，不斷地設(shè)置元素的height，margin-較好，margin-bottom，border-較好，border-bottom，padding-較好，padding-bottom為0，從而達(dá)到slideUp的效果。

5、CSS的clip讓元素在視覺上不可見

注意，該clip屬性只能在元素設(shè)置了“position:absolute”或者“position:fixed”屬性起作用，其次clip屬性目前已經(jīng)從網(wǎng)頁標(biāo)準(zhǔn)里面給移出了，現(xiàn)在更多的寫就是用clip-path來代替，所以如果想要兼容所有瀏覽器的話，可以書寫clip屬性和clip-path屬性一起用。這個方法隱藏之后，空間還在。

6、position:absolute

position:absolute配合任何一個足夠大的left、right、bottom或較好的負(fù)值，讓元素不在視口范圍內(nèi)顯示。定位這個屬性的目的主要不是為了做隱藏的，在一些具體的案例里面，需要在頁面上隱藏一個元素，但是呢又不想影響頁面布局，可以用position配合較好和left的值，達(dá)到隱藏的效果，但是用這個方法的前提是在該元素的祖先元素上添加overflow:hidden。

二、CSS特點

1、豐富的樣式定義

CSS提供了豐富的文檔樣式外觀，以及設(shè)置文本和背景屬性的能力；允許為任何元素創(chuàng)建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內(nèi)容間的距離；允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。

2、易于使用和修改

CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個專門的CSS文件中，以供HTML頁面引用。總之，CSS樣式表可以將所有的樣式聲明統(tǒng)一存放，進(jìn)行統(tǒng)一管理。另外，可以將相同樣式的元素進(jìn)行歸類，使用同一個樣式進(jìn)行定義，也可以將某個樣式應(yīng)用到所有同名的HTML標(biāo)簽中，也可以將一個CSS樣式指定到某個頁面元素中。如果要修改樣式，只需要在樣式列表中找到相應(yīng)的樣式聲明進(jìn)行修改。

3、多頁面應(yīng)用

CSS樣式表可以單獨存放在一個CSS文件中，這樣就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬于任何頁面文件，在任何頁面文件中都可以將其引用。這樣就可以實現(xiàn)多個頁面風(fēng)格的統(tǒng)一。

4、層疊

簡單的說，層疊就是對一個元素多次設(shè)置同一個樣式，這將使用最后一次設(shè)置的屬性值。例如對一個站點中的多個頁面使用了同一套CSS樣式表，而某些頁面中的某些元素想使用其他樣式，就可以針對這些樣式單獨定義一個樣式表應(yīng)用到頁面中。這些后來定義的樣式將對前面的樣式設(shè)置進(jìn)行重寫，在瀏覽器中看到的將是最后面設(shè)置的樣式效果。

5、頁面壓縮

在使用HTML定義頁面效果的網(wǎng)站中，往往需要大量或重復(fù)的表格和font元素形成各種規(guī)格的文字樣式，這樣做的后果就是會產(chǎn)生大量的HTML標(biāo)簽，從而使頁面文件的大小增加。而將樣式的聲明單獨放到CSS樣式表中，可以大大的減小頁面的體積，這樣在加載頁面時使用的時間也會大大的減少。另外，CSS樣式表的復(fù)用更大程度的縮減了頁面的體積，減少下載的時間。

延伸閱讀1：CSS

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。