分類
網頁製作/軟體開發知識

用 CSS 來隱藏網頁元素的三種方法

想要隱藏頁面上的元素,可以透過這三種常見的方法:

  1. visibility: hidden;
  2. visibility: collapse;
  3. display: none;

以下針對這三種方法的特性來做介紹


1. visibility: hidden;

(選擇器) {
    visibility: hidden;
}

單看字面上的意思,就是:看不見。

被指定這個 CSS declaration 的元素,會在視覺上消失,但是這個元素所佔據的空間還是依然存在。如果該元素有包含子元素,且子元素的 visibility 設定為 visible 的話,那麼子元素就會被看見。

2. visibility: collapse;

(選擇器) {
    visibility: collapse;
}

依照被指定的元素不同,會呈現出不同的效果:

  • 如果是 <table> 元素的列或欄被指定,那麼該欄或是列就會被隱藏,且不會佔據任何空間(就像是被套用了 display: none;),但是整個 <table> 元素所含的儲存格數量還是會被計算。
  • 如果是套用在 flex item 上,那麼該元素既會被隱藏起來,也不會佔據任何空間。
  • 其餘的元素被套用這個 declaration,所呈現出的效果跟 visibility: hidden; 相同。

3. display: none;

(選擇器) {
    display: none;
}

顧名思義:不顯示。

被套用這個 declaration 的元素,就好像不存在於網頁中一樣,既不會佔據任何空間,也不會被顯示出來。


參考資料:visibilitydisplay

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *