display 屬性依照詞義真正隱藏元素。將 display 屬性設(shè)為 none 確保元素不可見并且連盒模型也不生成。使用這個(gè)屬性，被隱藏的元素不占據(jù)任何空間。

一旦 display 設(shè)為 none 任何對(duì)該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會(huì)讀到元素的內(nèi)容。這種方式產(chǎn)生的效果就像元素完全不存在。

任何這個(gè)元素的子孫元素也會(huì)被同時(shí)隱藏。為這個(gè)屬性添加過(guò)渡動(dòng)畫是無(wú)效的，它的任何不同狀態(tài)值之間的切換總是會(huì)立即生效。

不過(guò)請(qǐng)注意，通過(guò) DOM 依然可以訪問(wèn)到這個(gè)元素。因此你可以通過(guò) DOM 來(lái)操作它，就像操作其他的元素。

示例：

HTML中文網(wǎng)

.div1 {display:none}

第一個(gè)div隱藏的div這兩個(gè)div之間沒(méi)有距離。

效果圖：

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

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

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

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

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

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

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

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

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

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

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

)。

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

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

)。

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

)。

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

)。

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

)

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

和 )

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

)

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的div靠边隐藏_css如何隐藏div不占位置？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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