在 CSS 中,有一種常見的語法被稱為“占位但不顯示”,也就是說有些 CSS 屬性可以讓元素在頁面上占據位置,但是并不顯示,這種方法經常被用來在頁面布局中調整元素位置。
.selector { visibility: hidden; height: 0; width: 0; }
上面的 CSS 代碼中,使用了三個屬性來隱藏元素,分別是 visibility、height 和 width,下面分別解釋一下:
- visibility: hidden;
- height: 0;
- width: 0;
這個屬性將元素設置為不可見,但是仍然會占據空間。
將元素的高度設置為 0,雖然有時候在布局中我們并不需要將元素高度設置為 0,但是這個屬性可以自動適應元素的內容,同時也可以讓元素無效。
和 height 一樣,這個屬性將元素的寬度設置為 0,同樣也可以讓元素無效。
有時候我們只需要讓元素在垂直或者水平方向上占據空間,而不需要同時使用這兩個屬性,因此可以選擇使用其中的一個屬性來實現相同的效果。
.selector { visibility: hidden; }
這是更加簡單的方法,只需要將元素的 visibility 屬性設置為 hidden,就可以讓元素在頁面上占據位置但是不會顯示。
需要注意的是,這種“占位但不顯示”的方法應該謹慎使用,因為在某些情況下可能會對頁面性能產生影響,畢竟不顯示的元素還是需要進行計算的。
下一篇docker大綱