在 css 中,隱藏乙個元素有很多種方法,下面我們來一一介紹
將元素的不透明度設定為 0,但是這個元素還是會佔據原來的位置,只是在視覺上不可見而已opacity
: 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...