CSS 元素模式转换

一、 元素分类

元素类型元素排列设置模式默认宽度包含
块级元素一行只能放一个可以设置宽高容器的100%容器级可以包含任何标签
行内元素一行可以放多个不能设置宽高本身内容的宽度容纳文本或其他行内元素
行内块元素一行可以放多个可以设置宽高本身内容的宽度

1. 块元素

常见的块元素有 <h1> ~ <h6>、<p> 、<div>、<ul>、<ol>、<li>等

块元素的特点：

  1. 独占一行
  2. 高度、宽度、外边距以及内边距都可以控制
  3. 宽度默认是容器（父级元素）的100%
  4. 可以看做一个容器，可以放其他块元素或行内元素

注意：

文字类元素内不能使用快级元素，如 p 元素 h1 ~ h6 元素

2. 行内元素

行内元素 也叫 内联元素，常见的有 <a>、<strong>、<b>、<em>、<span>等

行内元素的特点：

  1. 相邻的行内元素在一行上，一行可以显示多个
  2. 不能设置宽、高
  3. 默认宽度是它本身内容宽度
  4. 行内元只能容纳文本或其他行内元素

注意：

  1. 链接 a 元素中不能再放链接
  2. a 元素中放块级元素时，需要转换为块级模式

3. 行内块元素

行内块元素 ：同时包含块元素 和 行内元素的特点，如：<img />、<input />、<td>等

行内块元素的特点：

  1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙，一行可以显示多个（行内元素特点）
  2. 默认宽度就是他本身内容的宽度（行内元素特点）
  3. 宽度 和 行高 、外边距以及内边距都可以控制（块级元素特点）

二、 元素模式转换

当一个模式的元素需要另一种模式的特性时，就需要转换模式（行内元素 和 块级元素 转换），如：增加 a 元素的触发范围

1. 行内元素 转换为 块级元素

行内元素 转换为 块级元素 : display:block;

代码示例
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. 块级元素 转换为 行内元素

块级元素 转换为 行内元素: display:inline

代码示例
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. 行内元素 转换为 行内块元素

行内元素 转换为 行内块元素 ： display:inline-block;

代码示例
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>

案例一

代码示例
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>