我們在學習web前端技術的時候,css樣式的知識是少不了的,關于css樣式的知識點有很多,本期小編為大家介紹一下web前端培訓教程:CSS怎樣控制元素的顯示與隱藏?
web前端培訓教程:CSS怎樣控制元素的顯示與隱藏?
瀏覽網頁時,常常會有網站廣告,當我們點擊關閉就不見了,但是我們重新刷新頁面,會重新出現。這種效果本質上是讓一個元素在頁面中隱藏或者顯示出來。
display 顯示隱藏
visibility 顯示隱藏
overflow 溢出顯示隱藏
display 屬性
display 屬性用于設置一個元素應如何顯示。
display: none ;隱藏對象
display:block ;除了轉換為塊級元素之外,同時還有顯示元素的意思
display 隱藏元素后,不再占有原來的位置。 后面應用及其廣泛,搭配JS 可以做很多的網頁特效。
visibility 可見性
visibility屬性用于指定一個元素應可見還是隱藏。
visibility:visible ; 元素可視
visibility:hidden; 元素隱藏
visibility 隱藏元素后,繼續占有原來的位置。 如果隱藏元素想要原來位置,就用visibility:hidden 如果隱藏元素不想要原來位置,就用display:none (用處更多重點)
overflow 溢出
一般情況下,我們都不想讓溢出的內容顯示出來,因為溢出的部分會影響布局。
但是如果有定位的盒子,請慎用overflow:hidden因為它會隱藏多余的部分。
注意:
display 顯示隱藏元素但是不保留位置
visibility 顯示隱藏元素但是保留原來的位置
overflow 溢出顯示隱藏但是只是對于溢出的部分處理
以上就是為大家介紹的關于“CSS怎樣控制元素的顯示與隱藏”的內容,希望能夠給大家帶來幫助,想要了解更多的web前端培訓班、課程、價格、試聽等信息,請您留下聯系方式,千鋒教育課程顧問會盡快聯系您,為您定制專屬課程,開始您的學習之旅。