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

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

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

我們就可以使用display:none屬性對(duì)內(nèi)容進(jìn)行隱藏，并且通過瀏覽器也是看不到的，同時(shí)被隱藏的內(nèi)容是不被占用空間的，隱藏之后的內(nèi)容搜索引擎是不讀取的，一般我們都是用使用js統(tǒng)計(jì)代碼去隱藏顯示的圖標(biāo)。

示例：

元素隱藏--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 屬性規(guī)定元素應(yīng)該生成的框的類型。

屬性值：none：此元素不會(huì)被顯示。

block：此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。

inline：默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。

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

list-item：此元素會(huì)作為列表顯示。

run-in：此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。

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

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

table：此元素會(huì)作為塊級(jí)表格來顯示(類似

inline-table：此元素會(huì)作為內(nèi)聯(lián)表格來顯示(類似

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

)。

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

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

)。

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

)。

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

)。

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

)

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

和 )

table-caption：此元素會(huì)作為一個(gè)表格標(biāo)題顯示(類似

)

inherit：規(guī)定應(yīng)該從父元素繼承 display 屬性的值。

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號(hào)。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。