CSS display顯示

2018-10-27 17:13 更新

顯示或隱藏

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

要隱藏元素，請將display屬性設(shè)置為“none”或?qū)isibility屬性設(shè)置為“hidden”。

visibility：hidden 隱藏元素，但是元素仍然占據(jù)空間并影響布局。

h1.hidden {
    visibility: hidden;
}

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

h1.hidden {
    display: none;
}

block（塊）和 inline（內(nèi)聯(lián)）元素

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

<h1>, <p>, <li>, <div> 
都是塊元素的示例。

內(nèi)聯(lián)元素與其他內(nèi)聯(lián)元素保持在同一行中，并且不會開始新行。

<a>, <span> 是內(nèi)聯(lián)元素的示例。

我們可以使用display屬性來更改塊或內(nèi)聯(lián)函數(shù)。

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

li {
    display: inline;
}

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

span {
    display: block;
}

Inline-Block（內(nèi)聯(lián)塊）

inline-block值混合塊和內(nèi)聯(lián)特性。

盒子的外部被視為內(nèi)聯(lián)元素。因此，不會為元素創(chuàng)建新行。

框的內(nèi)部被視為塊元素，并應(yīng)用諸如寬度，高度和邊距的屬性。

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

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
  display: inline;
}

span {
  display: inline-block;
  border: medium double black;
  margin: 2em;
  width: 10em;
  height: 2em;
}
</style>
</head>
<body>
  <p>This is a test.</p>
  <p>This is a test. <span>This is a test.</span>
  </p>
</body>
</html>


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號