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要注意的是:
1、如果是透過樣式檔案或
2、如果在樣式檔案或頁面檔案程式碼中直接用display:none對元素進行了隱藏,載入頁面後,在沒有透過js設定樣式使元素顯示的前提下,使用js程式碼會無法正確取得該元素的一些屬性,例如offSetTop,offSetLeft等,傳回的值會為0,透過js設定style.display使元素顯示後才能正確獲得這些值。
以上是display none是什麼意思? display none的用法範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!