1. 隱藏元素 （display:none）
1.1 Display
- 作用：
隱藏某個(gè)元素，且該元素不占用空間。
- 示例
{display:none;}
1.2 和 Visibility比較
- 作用
隱藏某個(gè)元素，但該元素仍占用之前空間。
- 語法
visibility:hidden
2. 內(nèi)聯(lián)元素→ 塊元素 （display:inline）
內(nèi)聯(lián)元素（行內(nèi)元素）
- 語法
display:inline;
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello</title>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<p>內(nèi)聯(lián)元素顯示為行內(nèi)元素：</p>
<ul>
<li>劉備劉玄德</li>
<li>關(guān)羽關(guān)云長</li>
<li>張飛張翼德</li>
</ul>
</body>
</html>
- 不加
display:inline;時(shí)應(yīng)顯示為塊元素：
image.png
-
添加后顯示為內(nèi)聯(lián)元素：
image.png
3. 塊元素 → 內(nèi)聯(lián)元素 （display:block）
- 語法
display:block;
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-SONG</title>
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>關(guān)羽</span>
<span>關(guān)云長</span>
</body>
- < span > 是內(nèi)聯(lián)元素，應(yīng)該顯示為一行
關(guān)羽 關(guān)云長
- 變成塊元素后結(jié)果為
關(guān)羽
關(guān)云長
image.png
