實(shí)例詳解display:none與visible:hidden的區(qū)別
更新時(shí)間：2017年03月30日 10:43:26 投稿：lqh
這篇文章主要介紹了實(shí)例詳解display:none與visible:hidden的區(qū)別的相關(guān)資料,需要的朋友可以參考下
display:none與visible:hidden的區(qū)別
display:none和visible:hidden都能把網(wǎng)頁(yè)上某個(gè)元素隱藏起來，但兩者有區(qū)別:
display:none ---不為被隱藏的對(duì)象保留其物理空間，即該對(duì)象在頁(yè)面上徹底消失，通俗來說就是看不見也摸不到。
visible:hidden--- 使對(duì)象在網(wǎng)頁(yè)上不可見，但該對(duì)象在網(wǎng)頁(yè)上所占的空間沒有改變，通俗來說就是看不見但摸得到。
例子：
<html> <head> <title>display:none和visible:hidden的區(qū)別</title> </head> <body > <span style="display:none; background-color:Blue">隱藏區(qū)域</span><span style=" background-color:Green">顯示區(qū)域</span><br /> <span style="visibility:hidden; background-color:Blue">隱藏區(qū)域</span><span style="background-color:Green">顯示區(qū)域</span> </body> </html>
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
JS異步宏隊(duì)列與微隊(duì)列原理區(qū)別詳解
這篇文章主要介紹了JS異步宏隊(duì)列與微隊(duì)列原理區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了小程序登錄態(tài)管理的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了微信WeixinJSBridge API使用實(shí)例,本文直接給出HTML代碼,代碼中包含了很多實(shí)用功能,如圖片預(yù)覽、分享到微博、隱藏右上角按鈕、獲取網(wǎng)絡(luò)狀態(tài)、發(fā)起公眾號(hào)微信支付等內(nèi)容,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了es6 symbol的實(shí)現(xiàn)方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Bootstrap 粘頁(yè)腳，說得具體一點(diǎn)就是“將固定高度的頁(yè)腳緊貼頁(yè)面底部”，本文給大家分享具有實(shí)現(xiàn)代碼，感興趣的朋友參考下吧2016-03-03
寫js時(shí)遇到的一些小問題,需要的朋友可以參考下。2010-12-12
圖片漂浮效果想必大家都有見到過吧，一般都是通過js來實(shí)現(xiàn)的，下面為大家介紹的這個(gè)示例也是通過js實(shí)現(xiàn)的2014-06-06
JavaScript實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼的生成
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼的生成，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
JavaScript中如何判斷一個(gè)變量是數(shù)組Array類型呢？本文向大家提供一個(gè)比較不錯(cuò)的方法，可以說是無懈可擊了2013-09-09
第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁(yè)效果的相關(guān)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09