display , visibility 僅會改變元素顯示，不會改變元素種類。可以配合 js 使用使元素可以動態的顯示隱藏。 可以使用 display 或 visibility 實現html元素的隱藏功能，但是這兩種方式有不一樣的地方。display 中的 none 值隱藏，元素後不會在占據頁面空間 ...
display , visibility 僅會改變元素顯示，不會改變元素種類。可以配合 js 使用使元素可以動態的顯示隱藏。
可以使用 display 或 visibility 實現html元素的隱藏功能，但是這兩種方式有不一樣的地方。display 中的 none 值隱藏，元素後不會在占據頁面空間，但是 visibility 的 hidden 值隱藏，元素是看不見了不過會占據頁面空間。
display 說明
| 值 | 說明 |
|---|---|
| none | 隱藏。 |
| block | 使元素占據一行的全部空間 。 |
| inline | 使元素僅占據所需的寬度（作用元素中不能有塊元素）。 |
註意 ： 使用 inline 時元素不能有塊元素不然樣式不生效。
<!DOCTYPE html>
<html>
<head>
<style>
li,div {
display: inline;
}
</style>
</head>
<body>
<p>把鏈接列表顯示為水平導航欄：</p>
<ul>
<li><a target="_blank">HTML</a></li>
<li><a target="_blank">CSS</a></li>
<li><a target="_blank">JavaScript</a></li>
</ul>
<div>1</div>
<div>1</div>
<div><h1>2</h1></div>
<div><h1>2</h1></div>
p 標簽內容被隱藏了
<div><p>123<p></div>
</body>
</html>
visibility 說明 用法和 display 差不多。
| 值 | 說明 |
|---|---|
| visible | 預設值顯示。 |
| hidden | 元素不可見，但還占據頁面上的空間 |
| collapse | 當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的佈局。被行或列占據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 "hidden"。 |
| inherit | 規定應該從父元素繼承 visibility 屬性的值。 |
