display none是什麼意思？ display none的用法範例
- 不言原創
- 2018-10-23 14:58:4965495瀏覽
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中文網其他相關文章！