css怎么設置不占用空間的隱藏？下面本篇文章就來給大家介紹一下使用CSS設置不占用空間隱藏的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

在CSS中，可以利用display屬性，設置display:none來設置不占用空間的隱藏。display屬性規定元素應該生成的框的類型，none值設置此元素不會被顯示。

display 屬性依照詞義真正隱藏元素。將 display 屬性設為 none 確保元素不可見并且連盒模型也不生成。使用這個屬性，被隱藏的元素不占據任何空間。不僅如此，一旦 display 設為 none 任何對該元素直接打用戶交互操作都不可能生效。

我們就可以使用display:none屬性對內容進行隱藏，并且通過瀏覽器也是看不到的，同時被隱藏的內容是不被占用空間的，隱藏之后的內容搜索引擎是不讀取的，一般我們都是用使用js統計代碼去隱藏顯示的圖標。

示例：

元素隱藏--display:none

div{

height: 20px;

}

.demo{

width: 800px;

height: 60px;

margin: 50px auto;

border: 1px solid red;

}

.hide,span{

display:none;

}

元素隱藏1--display:none元素隱藏2--display:none元素隱藏3--display:none元素隱藏1--display:none,元素隱藏2--display:none,元素隱藏3--display:none元素隱藏1--display:none,元素隱藏2--display:none,元素隱藏3--display:none

效果圖：

display屬性

display 屬性規定元素應該生成的框的類型。

屬性值：none：此元素不會被顯示。

block：此元素將顯示為塊級元素，此元素前后會帶有換行符。

inline：默認。此元素會被顯示為內聯元素，元素前后沒有換行符。

inline-block：行內塊元素。(CSS2.1 新增的值)

list-item：此元素會作為列表顯示。

run-in：此元素會根據上下文作為塊級元素或內聯元素顯示。

compact：CSS 中有值 compact，不過由于缺乏廣泛支持，已經從 CSS2.1 中刪除。

marker：CSS 中有值 marker，不過由于缺乏廣泛支持，已經從 CSS2.1 中刪除。

table：此元素會作為塊級表格來顯示(類似

inline-table：此元素會作為內聯表格來顯示(類似

table-row-group：此元素會作為一個或多個行的分組來顯示(類似

)。

table-header-group：此元素會作為一個或多個行的分組來顯示(類似 )。

table-footer-group：此元素會作為一個或多個行的分組來顯示(類似

)。

table-row：此元素會作為一個表格行顯示(類似

)。

table-column-group：此元素會作為一個或多個列的分組來顯示(類似

)。

table-column：此元素會作為一個單元格列顯示(類似

)

table-cell：此元素會作為一個表格單元格顯示(類似

和 )

table-caption：此元素會作為一個表格標題顯示(類似

)

inherit：規定應該從父元素繼承 display 屬性的值。

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。

總結

以上是生活随笔為你收集整理的html显示和隐藏不占空间的是什么,css怎么设置不占用空间的隐藏？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。