一、 元素分类
| 元素类型 | 元素排列 | 设置模式 | 默认宽度 | 包含 |
|---|
| 块级元素 | 一行只能放一个 | 可以设置宽高 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个 | 不能设置宽高 | 本身内容的宽度 | 容纳文本或其他行内元素 |
| 行内块元素 | 一行可以放多个 | 可以设置宽高 | 本身内容的宽度 |
1. 块元素
常见的块元素有 <h1> ~ <h6>、<p> 、<div>、<ul>、<ol>、<li>等
块元素的特点：
- 独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 宽度默认是容器（父级元素）的100%
- 可以看做一个容器，可以放其他块元素或行内元素
注意：
文字类元素内不能使用快级元素，如 p 元素 h1 ~ h6 元素
2. 行内元素
行内元素 也叫 内联元素，常见的有 <a>、<strong>、<b>、<em>、<span>等
行内元素的特点：
- 相邻的行内元素在一行上，一行可以显示多个
- 不能设置宽、高
- 默认宽度是它本身内容宽度
- 行内元只能容纳文本或其他行内元素
注意：
- 链接 a 元素中不能再放链接
- a 元素中放块级元素时，需要转换为块级模式
3. 行内块元素
行内块元素 ：同时包含块元素 和 行内元素的特点，如：<img />、<input />、<td>等
行内块元素的特点：
- 和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙，一行可以显示多个（行内元素特点）
- 默认宽度就是他本身内容的宽度（行内元素特点）
- 宽度 和 行高 、外边距以及内边距都可以控制（块级元素特点）
二、 元素模式转换
当一个模式的元素需要另一种模式的特性时，就需要转换模式（行内元素 和 块级元素 转换），如：增加 a 元素的触发范围
1. 行内元素 转换为 块级元素
::: tip
行内元素 转换为 块级元素 : display:block;
:::
::: details
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
height: 50px;
width: 300px;
display: block;
background-color: #aaffff;
}
</style>
</head>
<body>
<a href="https://www.pupper.cn">蚊子🦟的小破站</a>
</body>
</html>
|
:::
2. 块级元素 转换为 行内元素
::: tip
块级元素 转换为 行内元素: display:inline
:::
::: details
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 50px;
width: 300px;
display: inline;
background-color: #aaffff;
}
</style>
</head>
<body>
<div> 这是块级元素，转为行内元素 </div>
<div> 这是块级元素，转为行内元素 </div>
</body>
</html>
|
:::
3. 行内元素 转换为 行内块元素
::: tip
行内元素 转换为 行内块元素 ： display:inline-block;
:::
::: details
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span {
height: 50px;
width: 300px;
display: inline-block;
background-color: #aaffff;
}
</style>
</head>
<body>
<div>
<span>行内元素，转换为行内块元素</span>
<span>行内元素，转换为行内块元素</span>
</div>
</body>
</html>
|
:::
案例一
::: details
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a {
display: block;
background-color:rgb(114, 112, 112);
width: 200px;
height: 40px;
text-indent: 2em;
line-height: 40px;
color: rgb(250, 246, 246);
text-decoration: none;
}
a:hover{
background-color: rgb(248, 122, 5);
}
</style>
</head>
<body>
<div>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音箱</a>
</div>
</body>
</html>
|
:::
