display與visibility的使用 區別

2021-09-08 06:34:50 字數 1328 閱讀 3700

display:none;隱藏元素,且此元素無物理位置;

visibility:hidden;隱藏元素,但元素的物理位置依然存在;

因為display:none導致頁面上無此元素的空間,js就獲取不到此元素的資訊,此時應用visibility:hidden來代替display:none;

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 屬性的值。

visibility:

屬性用來確定元素是顯示還是隱藏的,這用visibility="visible|hidden"來表示(visible表示顯示,hidden表示隱藏)

posted @

2017-02-15 14:38

monroe.yu 閱讀(

...)

編輯收藏

display運用與理解

display 規定元素應該生成的框的型別 以下是一些關於display比較常用的屬性值 值描述 none 元素不會顯示 block 此元素將顯示為塊級元素,此元素前後會帶有換行符。inline 預設。此元素會被顯示為內聯元素,元素前後沒有換行符。line block 行內塊元素。css2.1 新增...

visibility與display的區別

visibility與display之設定元素顯隱的區別 在css裡的visibility 屬性,通常其值被設定成visible 或hidden。visibility hidden 相當於display none,能把元素隱藏起來,但是兩者的區別在於 display none 不顯示對應的元素,在文...

處理元素邊框與display

很多情況下,都需要給元素設定邊框,使頁面看起來層次分明更加美觀 但是,往往設定邊框又不是每條邊都需要 box bt box div box div box div box id bt div ps 行元素與塊元素 塊元素獨佔一行,但是在實際的頁面布局中這種情況是很少的 為了處理這種情況加入了disp...