學習筆記，僅供參考，有錯必糾
CSS
標籤的類型(顯示模式)
HTML標記一般分爲塊標記和行內標記2種類型，它們也稱塊元素和行內元素。
塊元素
- 每個塊元素通常都會獨自佔據一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。
- 塊級元素容器可以容納多個嵌套的塊級標籤或行內標籤。
- 常見的塊元素有
<h1> ~ <h6>, <p>, <div>, <ul>, <ol>, <li>等，其中<div>標記是最典型的塊元素。
行元素
- 行內元素不佔有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對齊等屬性，常用於控制頁面中文本的樣式。
- 行內元素不能嵌套塊級標籤，只能嵌套其他的行內標籤。
- 常見的行內標籤有
<strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <a>, <span>等，其中<span>標記是最典型的行內元素。
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dispaly</title>
</head>
<body>
<!-- 行內元素 -->
<span>我是span</span>
<strong>我是strong標籤</strong>
<s>我是一個s標籤</s>
<!-- 塊級標籤 -->
<div>
我是一個div
</div>
</body>
</html>
頁面：
display改變標籤顯示模式
- display爲inline或block
display可以控制標籤的顯示模式，比如，將塊級元素(例如<div>)按照行級標籤的形式顯示，再比如，將行級標籤(例如<strong>)按照塊級標籤的形式顯示，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dispaly</title>
<style>
div {
background-color: silver;
display: inline; /* 可以讓塊元素變成行內顯示模式*/
}
strong {
display: block; /* 可以讓行內元素變成塊顯示模式*/
background-color: yellow;
}
</style>
</head>
<body>
<!-- 行內元素 -->
<span>我是span</span>
<strong>我是strong標籤</strong>
<s>我是一個s標籤</s>
<!-- 塊級標籤 -->
<div>
我是一個div
</div>
</body>
</html>
頁面：
- display爲none
若我們把display設置爲none，那麼這個標籤就會被從頁面中移除，不進行顯示，也不影響頁面佈局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dispaly</title>
<style>
div {
background-color: silver;
display: inline; /* 可以讓元素編成行內模式的標籤*/
}
strong {
/* display: block; */
display: none;
background-color: yellow;
}
</style>
</head>
<body>
<!-- 行內元素 -->
<span>我是span</span>
<strong>我是strong標籤</strong>
<s>我是一個s標籤</s>
<!-- 塊級標籤 -->
<div>
我是一個div
</div>
</body>
</html>
頁面：
- visibility爲hidden
我們也可以設置visibility爲hidden，將標籤隱藏起來，但是它和display: none有點不同，它僅僅是不顯示標籤，但是依然佔用我們的頁面空間：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dispaly</title>
<style>
div {
background-color: silver;
display: inline;
}
strong {
visibility: hidden;
background-color: yellow;
}
</style>
</head>
<body>
<!-- 行內元素 -->
<span>我是span</span>
<strong>我是strong標籤</strong>
<s>我是一個s標籤</s>
<!-- 塊級標籤 -->
<div>
我是一個div
</div>
</body>
</html>
頁面：
- display爲inline-block
我們先來看下面一段代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dispaly</title>
<style>
div {
background-color: silver;
display: inline-block;
height: 100px;
}
span {
background-color: blue;
height: 200px;
}
</style>
</head>
<body>
<!-- 行內元素 -->
<span>我是span</span>
<strong>我是strong標籤</strong>
<s>我是一個s標籤</s>
<!-- 塊級標籤 -->
<div>
我是一個行內塊div
</div>
</body>
</html>
頁面：
可以看到，行內塊元素可以設置寬高，但是行內元素卻不能。
- 行內元素,塊級元素,行內塊元素之間的對比
| 是否可以設置寬高 | 邊距 | 是否可以獨佔行 | |
|---|---|---|---|
| 行內元素 | × | 左右 | × |
| 塊級元素 | √ | 上下左右 | √ |
| 行內塊元素 | √ | 左右 | × |