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 屬性的值， |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502031.html
標籤：其他
上一篇：React 高階組件