一.CSS的元素显示模式
作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解它们的特点可以更好地布局我们的网页
元素显示模式就是元素（标签）以什么方式进行显示
比如div自己占一行，比如一行可以放多个span
HTML元素一般分为块元素和行内元素两种类型
1.块元素：
常见的块元素：<h1>~<h6> <p> <div> <ul> <ol> <li>等
其中<div>是最典型的块元素
块级元素的特点：
- 比较霸道，自己独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 宽度默认是容器（父级容器）的100%
- 是一个容器和盒子，里面可以放行内元素或块级元素
注意：
文字类的元素中不能放块级元素，比如<p>标签内主要用来放文字，不能放<div>标签
2.行内元素
常见的行内元素（内联元素）有<a> <strong> <em> <b> <del> <span>等
其中<span>是最典型的行内元素
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高度、宽度直接设置是无效的
- 默认宽度就是它本身容器的宽度
- 行内元素只能容纳文本或其他行内元素
注意：
- 链接里面不能再放链接
- 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
3.行内块元素
在行内元素中有几个特殊的元素，如<img> <input> <td> ，它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素
特点：
- 和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙，一行可以显示多个（行内元素特点）
- 默认宽度就是它本身内容的宽度（行内元素特点）
- 行高、行宽、外边距和内边距都可以控制（块级元素的特点）
4.元素显示模式的转换
特殊情况下，我们需要元素的显示模式的转换
比如，<a>是超链接标签，是行内元素，但是很多时候，要扩宽超链接的点击范围，以便用户更方便地点击到超链接（增加链接的触发范围）
转换为块元素语法：
html
display:block;转换为行内元素语法：
html
display: inline;转换为行内块元素语法：
html
display:inline-block;代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素显示模式的转换</title>
<style>
a {
width: 150px;
height: 60px;
color: green;
display: block;
background-color: skyblue;
}
div {
width: 200;
height: 80;
background-color: yellow;
display: inline;
}
span {
width: 300;
height: 150;
background-color: darkgreen;
display: inline-block;
}
</style>
</head>
<body>
<a href="#">珍惜时间</a>
<p><a href="#">本来2025年的暑假是不会被浪费掉的</a></p>
<p><a href="#">以后不要再说"本来我可以怎么怎么样了"</a></p>
<div>我是第一个块级元素</div>
<div>我是第二个块级元素</div>
<span>我是一个行内元素</span>
<span>我也是一个行内元素</span>
<a href="https://www.baidu.com">点此打开百度</a>
</body>
</html>效果：
二.练习：制作一个简洁版的小米侧边栏
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简洁的小米侧边栏</title>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
</body>
</html>效果：
在<head>标签内加上<style>CSS标签：a.{display:block;}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简洁的小米侧边栏</title>
<style>
a {
display: block;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
</body>
</html>效果：
再加上行高，行宽，背景颜色，height,width,background-color
html
<style>
a {
display: block;
width: 230px;
height: 40px;
background-color: #55585a;
}
</style>效果：
模仿小米官网的样式，文字颜色改为白色，文字不要下划线，文字与边框有一定距离
html
<style>
a {
display: block;
width: 230px;
height: 40px;
background-color: #55585a;
font-size: 14px;
color: #fff;
/*white*/
text-decoration: none;
text-indent: 2em;
}
</style>效果：
然后还要设置鼠标光标经过链接时，要改变背景颜色
html
a:hover {
background-color: #ff6700;
}效果：
设置单行文字垂直居中：让文字行高等于盒子行高
行高line-height 盒子高度heihgt
盒子高度等于行高加文字上下的空隙的高度，让line-height=height，由于文字上下的空隙是一样的，则相当于文字就位于盒子的中间部分，即实现了单行文字的垂直居中
如果行高小于盒子高度，则文字会偏上
如果行高大于盒子高度，则文字会偏下（还有可能到盒子范围外面去了）
html
<style>
a {
display: block;
width: 230px;
height: 40px;
background-color: #55585a;
font-size: 14px;
color: #fff;
/*white*/
text-decoration: none;
text-indent: 2em;
line-height: 40px;
}
a:hover {
background-color: #ff6700;
}
</style>效果：
