css中實現顯示和隱藏

2021-06-10 18:53:41 字數 974 閱讀 9777

css中的display和visibility

在平時的開發過程中,總是會遇到一些文字在特定的場景下顯示或者隱藏來達到我們想要的效果,css中display和visibility語法,他們都可以隱藏和顯示html元素。看起來貌似一樣,但是他們還是有一定的區別的。

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

display屬性設定元素的顯示方式,對應指令碼特性為display,可選值為none、block和inline,各值的說明如下:

none 隱藏元素,不保留元素顯示時的空間。

block塊方式顯示元素。

inline 以內嵌方式顯示元素。

visibility屬性設定是否顯示元素,對應的指令碼特性為visibility,可選值為inherit、hidden和visible,各值的說明如下:

inherit 繼承父元素的visibility屬性設定。

hidden 隱藏元素,但保留其所佔空間。

visible 顯示元素(預設值)。

使用的時候的說明:

display:none;時隱藏該html元素,確切的說,是在瀏覽器中消除該元素,不佔螢幕的空間。若其下有其他元素,就會上移到該空間區域。

dispaly:block;顯示已經隱藏的html元素,如果別的元素占有了該空間時,他將下移,空間重新別原來的元素占有。

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

visibility:visible;讓元素顯示.

下面寫了乙個簡單的例子,看一下效果:

將第二行隱藏後依然佔據著原來的位置,將第四行隱藏後,不佔據原來的位置。

CSS實現控制元素的顯示和隱藏

1 使用label input實現元素的隱藏和顯示 以下 點選 選單 可以實現li列表的顯示和隱藏 style type text css input,ul input checked ul style body label for menu 選單 label div input id menu t...

CSS和JS控制DIV層顯示和隱藏的實現方法

css中display和visibility可以隱藏和顯示html元素包括div層。看起來兩者非常類似,很多人會搞混。下面分別介紹兩者的屬性 display none block 1.display none 隱藏該html元素,在瀏覽器中消除該元素,不佔螢幕的空間。若其下有其他元素,就會上移到該空...

CSS控制DIV層顯示和隱藏的實現方法

css中的display和visibility屬性 css中display和visibility可以隱藏和顯示html元素包括div層。看起來兩者非常類似,很多人會搞混。下面分別介紹兩者的屬性 display none block display none 隱藏該html元素,確切的說,是在瀏覽器中...