CSS實戰筆記 八 元素隱藏

2021-10-03 22:04:34 字數 745 閱讀 4707

在 css 中,隱藏乙個元素有很多種方法,下面我們來一一介紹

opacity

: 0;

將元素的不透明度設定為 0,但是這個元素還是會佔據原來的位置,只是在視覺上不可見而已

它不會改變頁面的布局,還能夠響應使用者的操作

visibility

: hidden;

將元素的可見性設定為隱藏,從而使得這個元素是不可見的,但是它仍佔據著原來的位置

它不會改變頁面的布局,但不能響應使用者的操作

另外,這個元素的子孫元素也會被設定為隱藏,但是可以給子孫元素顯式設定 visibility 為 visible 取消隱藏

display

: none;

這是真正意義上的隱藏元素,它不會佔據原來的空間,就好像這個元素本來就不存在一樣

這意味著它改變了頁面的布局,自然它也不能響應使用者的操作

另外,這個元素的子孫元素也會被設定為隱藏

position

: absolute;

top: -999px;

left

: -999px;

設定元素的定位方式為絕對定位,這樣可以使元素脫離文件流

然後設定 left 和 top 為乙個較大的負數,將元素移出可見區域,實現元素隱藏

最後補充乙個屬性,overflow,用來規定當內容超出元素框時要怎麼處理,可選值如下:

CSS 九 元素隱藏和利弊

可以配合我寫的 html 食用 隱藏元素.html 我將他們分為 可以點選 和 無法點選兩類。可以點選 設定了position absolute 往往不佔據空間,display none 是直接蒸發了,根本沒有空間一說。position relative 是相對原來的位置定位,還是佔據著空間。opa...

CSS學習筆記 六 元素定位

盒模型,就是瀏覽器為頁面中的每個 html 元素生成的矩形盒子。這些盒子們都要按照可見版式模型 visual formatting model 在頁面上排布。可見的頁面版式主要由三個屬性控制 position 屬性 display 屬性和 float 屬性。其中,position 屬性控制頁面上元素...

2 元素的顯示與隱藏

類似於 廣告,當我們點選關閉就不見了,但我們重新重新整理頁面,會重新出現!本質 讓乙個元素在頁面中隱藏或者顯示出來。display屬性用於設定乙個元素應如何顯示。dispaly隱藏元素後,不再占有原來的位置。visibility屬性用於指定乙個元素是可見還是隱藏的。visibility hidden...