CSS Display(顯示) 與 Visibility（可見性）

## 隱藏元素- display:none或visibility:hidden

display屬性設定元素如何顯示,visibility屬性設定了元素的可見性.display:none不佔用空間而visibility:hidden雖然元素不可見但是依然佔用同樣的空間.

區塊級元素的特徵是佔用正航寬度強制換行,例如div,p,h1

內聯元素只佔用需要的寬度並且不強制換行,例如span, a.

可以互相更改兩種元素顯示方式,例如span{display:block;}或li{display:inline;}

visibility的屬性值可以是hidden或visible或是collapse ,collapse屬性可以用來隱藏表格的一行或一列,並且不影響表格的佈局,將隱藏元素的位置用相同的空白代替.

CSS Display - 區塊和內聯元素

塊元素是一個元素，佔據了全部寬度，在前後都是換行符。

區塊元素的範例：

<h1>

#<p>

<div>

#內聯元素只需要必要的寬度，不強制換行。

內聯元素的範例：

<span>

#<a>

如何改變一個元素顯示

可以更改內聯元素和區塊元素，反之亦然，可以使頁面看起來以特定的方式組合，並且仍然遵循web標準。

下面的範例把span元素當作區塊元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
span
{
display:block;
}
</style>
</head>
<body>
<h2>标题</h2>
<span>这是一段内容</span>
<span>这也是一段内容</span>
<h2>标题</h2>
<span>内容</span>
<span>也是内容</span>
</body>
</html>

注意：變更元素的顯示類型看該元素是如何顯示，它是什麼樣的元素。例如：一個內聯元素設定為display:block是不允許有它內部的巢狀區塊元素。

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> span { display:block; } </style> </head> <body> <h2>标题</h2> <span>这是一段内容</span> <span>这也是一段内容</span> <h2>标题</h2> <span>内容</span> <span>也是内容</span> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear