html显示和隐藏不占空间的是什么,css怎么设置不占用空间的隐藏?
css怎么設置不占用空間的隱藏?下面本篇文章就來給大家介紹一下使用CSS設置不占用空間隱藏的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。
在CSS中,可以利用display屬性,設置display:none來設置不占用空間的隱藏。display屬性規定元素應該生成的框的類型,none值設置此元素不會被顯示。
display 屬性依照詞義真正隱藏元素。將 display 屬性設為 none 確保元素不可見并且連盒模型也不生成。使用這個屬性,被隱藏的元素不占據任何空間。不僅如此,一旦 display 設為 none 任何對該元素直接打用戶交互操作都不可能生效。
我們就可以使用display:none屬性對內容進行隱藏,并且通過瀏覽器也是看不到的,同時被隱藏的內容是不被占用空間的,隱藏之后的內容搜索引擎是不讀取的,一般我們都是用使用js統計代碼去隱藏顯示的圖標。
示例:
元素隱藏--display:nonediv{
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怎么设置不占用空间的隐藏?的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 简单点赞效果html,js实现点赞效果
- 下一篇: html中给文章怎么设置行高,css如何