5.元素模式转换

Pupper大约 3 分钟学习笔记前端基础CSS

一、元素分类

元素类型	元素排列	设置模式	默认宽度	包含
块级元素	一行只能放一个	可以设置宽高	容器的 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. 行内元素转换为块级元素

提示

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

详情

<!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

详情

<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;

详情

<!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>

案例一

详情

<!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>