css實(shí)現(xiàn)顯示和隱藏的方法

今天小編給大家分享的是css實(shí)現(xiàn)顯示和隱藏的方法，相信很多人都不太了解，為了讓大家更加了解，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會(huì)有所收獲的哦。

css是什么意思

css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，主要是用來設(shè)計(jì)網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對(duì)于網(wǎng)頁進(jìn)行格式化。

css實(shí)現(xiàn)顯示隱藏的方法：1、使用display屬性，語法“display:none|block;”隱藏和顯示html元素；2、使用visibility屬性，語法“visibility:hidden|visible”隱藏和顯示html元素。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在平時(shí)的開發(fā)過程中，總是會(huì)遇到一些文字在特定的場景下顯示或者隱藏來達(dá)到我們想要的效果，css中display和visibility語法，他們都可以隱藏和顯示html元素?？雌饋砻菜埔粯?，但是他們還是有一定的區(qū)別的。

首先先來看一下display和visibility的屬性

display屬性設(shè)置元素的顯示方式，對(duì)應(yīng)腳本特性為display，可選值為none、block和inline，各值的說明如下：

• none：隱藏元素，不保留元素顯示時(shí)的空間。

• block：塊方式顯示元素。

• inline：以內(nèi)嵌方式顯示元素。

visibility屬性設(shè)置是否顯示元素，對(duì)應(yīng)的腳本特性為visibility，可選值為inherit、hidden和visible，各值的說明如下：

• inherit：繼承父元素的visibility屬性設(shè)置。

• hidden：隱藏元素，但保留其所占空間。

• visible：顯示元素(默認(rèn)值)。
  

使用的時(shí)候的說明：

display:none;時(shí)隱藏該html元素，確切的說，是在瀏覽器中消除該元素，不占屏幕的空間。若其下有其他元素，就會(huì)上移到該空間區(qū)域。

dispaly:block;顯示已經(jīng)隱藏的html元素，如果別的元素占有了該空間時(shí)，他將下移，空間重新別原來的元素占有。

visibility:hidden;隱藏該元素，真正的隱藏，但他還占有那塊空間。

visibility:visible;讓元素顯示。

下面寫了一個(gè)簡單的例子，看一下效果：

將第二行隱藏后依然占據(jù)著原來的位置，將第四行隱藏后，不占據(jù)原來的位置。

關(guān)于css實(shí)現(xiàn)顯示和隱藏的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。