css控制div顯示 隱藏方法及 種方法比較原碼

2021-04-25 22:29:46 字數 745 閱讀 1847

css中的display和visibility

css中display和visibility語法,他們都可以隱藏和顯示html元素。看齊來他們很相似,所以很多人還是會搞錯。

談們的屬性分別如下:

display:none|block;

display:none;時隱藏該html元素,確切的說,是在瀏覽器中消除該元素,不佔螢幕的空間。若其下有其他元素,就會上移到該空間區域(好像桌子上有100塊錢,現在我把它放在抽屜裡藏起來,桌子上放100錢的地方可以放在其他任何東西)。

dispaly:block;顯示已經隱藏的html元素,如果別的元素占有了該空間時,他將下移,空間重新別原來的元素占有。(把100塊錢重新從抽屜裡那出來放回桌子上)

visibility:hidden|visible;

visibility:hidden;隱藏該元素,正真的隱藏,但他還占有那塊空間。這時,(桌子上有100塊錢,這是我蓋了桌布把他隱藏起來,錢還在那裡)。

visibility:visible;讓元素顯示(拿掉了桌布,看到了100塊錢)。

接下來用**來舉個例子,**:

display

visibility

執行一下框中的**就可以看到,當testd隱藏時,裡面所有的框都隱藏,而且下面的divv和按鈕都上移,而當divv隱藏的時候,只有他自己隱藏了,裡面的其他元素都沒有隱藏。(這裡主要是把裡面的div元素style屬性設定為display和visible,如果去掉也會隱藏,但是,按鈕還是不會上移,可以試一下。)

css控制div顯示 隱藏方法

css中隱藏和顯示html元素 可以用display和visibility,屬性如下 1.display none block display none 隱藏該html元素,在瀏覽器中消除該元素,不佔螢幕的空間。dispaly block 顯示已經隱藏的html元素,如果該空間被別的元素占有了,他將...

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

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

CSS隱藏div及html內容方法

網頁製作中我們經常會人為的隱藏一些網頁元素,比如站長統計的圖示,或者滑鼠滑過隱藏效果,現在我們來講講css如何隱藏div及html內容。css隱藏div盒子及html內容方法 html中怎麼使用css樣式隱藏內容,又不影響 功能使用。我們常常想隱藏一些內容,比如 新增第三方統計顯示的圖示,如何通過c...