今天小編給大家分享的是css實現(xiàn)顯示和隱藏的方法,相信很多人都不太了解,為了讓大家更加了解,所以給大家總結(jié)了以下內(nèi)容,一起往下看吧。一定會有所收獲的哦。
站在用戶的角度思考問題,與客戶深入溝通,找到疊彩網(wǎng)站設計與疊彩網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗,讓設計與互聯(lián)網(wǎng)技術結(jié)合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:做網(wǎng)站、成都網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、國際域名空間、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務覆蓋疊彩地區(qū)。
css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言,主要是用來設計網(wǎng)頁的樣式,使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言,并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件中,而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定,從而實現(xiàn)級聯(lián)效果,發(fā)展至今,css不僅能裝飾網(wǎng)頁,也可以配合各種腳本對于網(wǎng)頁進行格式化。
css實現(xiàn)顯示隱藏的方法:1、使用display屬性,語法“display:none|block;”隱藏和顯示html元素;2、使用visibility屬性,語法“visibility:hidden|visible”隱藏和顯示html元素。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在平時的開發(fā)過程中,總是會遇到一些文字在特定的場景下顯示或者隱藏來達到我們想要的效果,css中display和visibility語法,他們都可以隱藏和顯示html元素??雌饋砻菜埔粯?,但是他們還是有一定的區(qū)別的。
首先先來看一下display和visibility的屬性
display屬性設置元素的顯示方式,對應腳本特性為display,可選值為none、block和inline,各值的說明如下:
none:隱藏元素,不保留元素顯示時的空間。
block:塊方式顯示元素。
inline:以內(nèi)嵌方式顯示元素。
visibility屬性設置是否顯示元素,對應的腳本特性為visibility,可選值為inherit、hidden和visible,各值的說明如下:
inherit:繼承父元素的visibility屬性設置。
hidden:隱藏元素,但保留其所占空間。
visible:顯示元素(默認值)。
使用的時候的說明:
display:none;時隱藏該html元素,確切的說,是在瀏覽器中消除該元素,不占屏幕的空間。若其下有其他元素,就會上移到該空間區(qū)域。
dispaly:block;顯示已經(jīng)隱藏的html元素,如果別的元素占有了該空間時,他將下移,空間重新別原來的元素占有。
visibility:hidden;隱藏該元素,真正的隱藏,但他還占有那塊空間。
visibility:visible;讓元素顯示。
下面寫了一個簡單的例子,看一下效果:
將第二行隱藏后依然占據(jù)著原來的位置,將第四行隱藏后,不占據(jù)原來的位置。
關于css實現(xiàn)顯示和隱藏的方法就分享到這里了,希望以上內(nèi)容可以對大家有一定的參考價值,可以學以致用。如果喜歡本篇文章,不妨把它分享出去讓更多的人看到。