首頁 > web前端 > css教學 > 主體

display none是什麼意思? display none的用法範例

不言
發布: 2018-10-23 14:58:49
原創
65468 人瀏覽過

css的display屬性在網頁版面中是常會用到的,尤其是display屬性中的block、inline-block、inline以及none這四個屬性值,今天的這篇文章就來介紹一下display屬性中none屬性值的用法,有需要的朋友可以參考一下。

ps:關於css display屬性的相關知識簡介,大家可以參考一下css display屬性是什麼意思? css中display屬性的詳解。

首先我們來看display none的意思是什麼?

display:none的意思:

# 隱藏元素並且脫離文檔,流是隱藏該區域,不佔實際空間,但對後台來說真實存在,可以獲得被隱藏的元素簡單的來說就是將元素設為none的時候既不會佔據空間,也無法顯示,相當於該元素不存在。

看完了display none的意思後,我們就接著來看一下display none的用法

display none的用法:

我們直接來看一個display:none的範例:

<html>
<head>
<title></title>
<style type="text/css">
    div{
        background: lightblue;
        width: 200px;
        height: 200px;
    }
    span{
        background: pink;
        display: none;
    }
</style>
</head>
<body >
    <div><span>需要隐藏的区域</span></div>
</body>
</html>
登入後複製

上述程式碼中span若是沒有設定display:none屬性值;效果如下:

display none是什麼意思? display none的用法範例

設定了display:none屬性值,則變成瞭如下圖所示的效果:需要隱藏的區域就被隱藏了。

display none是什麼意思? display none的用法範例

使用display:none要注意的是:

1、如果是透過樣式檔案或

2、如果在樣式檔案或頁面檔案程式碼中直接用display:none對元素進行了隱藏,載入頁面後,在沒有透過js設定樣式使元素顯示的前提下,使用js程式碼會無法正確取得該元素的一些屬性,例如offSetTop,offSetLeft等,傳回的值會為0,透過js設定style.display使元素顯示後才能正確獲得這些值。

以上是display none是什麼意思? display none的用法範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板