CSS控制元素的顯示型別和可見性

2021-10-07 22:31:07 字數 1993 閱讀 8088

造成這種情況的本質是它們的display屬性,即塊級元素被設定為display: block(對於li元素為display: list-item),而行內元素被設定為display: inline

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

ps:行內元素會忽略任何 width、height、margin-top 和 margin-bottom 設定。不過,設定為 inline-block 的元素可以使用。

visibility屬性的主要目的是控制元素是否可見。與display屬性不同的是,使用visibility隱藏元素時,元素及其內容應該出現的位置會留下一片空白區域 。隱藏元素的空白區域仍然會在文件流中佔據位置。值描述

visible

預設值。元素是可見的。

hidden

元素是不可見的。

collapse

當在**元素中使用時,此值可刪除一行或一列,但是它不會影響**的布局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上,會呈現為 "hidden"。

inherit

規定應該從父元素繼承 visibility 屬性的值。

ps:通過結果可以發現用 display:none; 和 visibility:hidden; 都可以隱藏該元素。但是用 visibility 會留下一片空白區域。兩者隱藏後背景色也是不顯示的。

CSS實現控制元素的顯示和隱藏

1 使用label input實現元素的隱藏和顯示 以下 點選 選單 可以實現li列表的顯示和隱藏 style type text css input,ul input checked ul style body label for menu 選單 label div input id menu t...

CSS 的元素顯示

作用 網頁的標籤非常多,在不同地方會用到不同型別的標籤 了解他們的特點可以更好的布局我們的網頁。元素顯示模式就是 元素 標籤 以什麼方式進行顯示,比如 div 自己佔一行,比如一行可以顯示多個 span html 元素一般分為 塊元素 和 行元素 兩種型別。塊元素 常見的塊元素有 h1 h6 p d...

jQuery控制元素隱藏和顯示

1 jquery隱藏和顯示效果 通過 jquery,您可以使用 hide 和 show 方法來隱藏和顯示 html 元素 hide click function 點選id hide 元素時,隱藏所有標籤內容 show click function 點選id show 元素時,顯示所有標籤內容 2 j...