顯示或隱藏

我們可以通過使用visibility屬性或display屬性來顯示或隱藏元素。

要隱藏元素，請將display屬性設置為“none”或將visibility屬性設置為“hidden”。

visibility：hidden隱藏元素，但是元素仍然占據空間并影響布局。h1.hidden {

visibility: hidden;

}

display：none隱藏元素，并從布局中刪除元素。h1.hidden {

display: none;

}

block(塊)和 inline(內聯)元素

塊元素嘗試獲取整個寬度，并在布局中開始新行。一些HTML元素是塊元素或塊級元素。

,

,

, 都是塊元素的示例。

內聯元素與其他內聯元素保持在同一行中，并且不會開始新行。

, 是內聯元素的示例。

我們可以使用display屬性來更改塊或內聯函數。

以下代碼使li元素顯示為內聯元素。不是開始一個新行作為正常li元素，它顯示li元素在同一行。li {

display: inline;

}

以下代碼使span元素顯示為塊元素。現在每個span元素將像div元素，默認情況下它是一個塊元素。span {

display: block;

}

Inline-Block(內聯塊)

inline-block值混合塊和內聯特性。

盒子的外部被視為內聯元素。因此，不會為元素創建新行。

框的內部被視為塊元素，并應用諸如寬度，高度和邊距的屬性。

以下代碼顯示如何使用inline-block值。

p {

display: inline;

}

span {

display: inline-block;

border: medium double black;

margin: 2em;

width: 10em;

height: 2em;

}

This is a test.

This is a test. This is a test.

總結

以上是生活随笔為你收集整理的html display 显示,CSS display显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。