目录
CSS显示模式简介
元素显示模式就是元素（标签）以什么方式进行显示，比如<div></div>自己占一行，比如一行可以放多个<span></span>。当网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局网页
CSS显示模式的分类
块元素
常见的块元素有以下标签：
html
标题标签
<h1></h1>~<h6></h6>
段落标签
<p></p>
<div></div>
无序列表标签
<ul>
<li></li>
<li></li>
</ul>
有序列表标签
<ol>
<li></li>
<li></li>
</ol>其中，<div></div>是典型的块元素标签
块元素标签的特点：
- 每一个标签独占一行。
- 高度，宽度、外边距以及内边距都可以控制。
- 宽度默认是容器（父级宽度）的100%。
- 一个容器及盒子，里面可以放行内或者块级元素
📌
文字类的元素内不能放块级元素，例如<p></p>中不可以放块级元素，特别是不能放<div> </div>同理， <h1></h1>~<h6></h6>等都是文字类块级标签，里面也不能放其他块级元素
示例代码：
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>
div{
width: 200px;
height: 200px;
background-color: red;
}
h1 {
background-color: blue;
}
</style>
</head>
<body>
<h1>这是一段内容</h1>
<div>这是一段内容</div>
</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>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
h1 {
background-color: blue;
}
</style>
</head>
<body>
<h1>这是一段内容</h1>
<p><div>这是一段内容</div></p>
<div>这是一段内容</div>
</body>
</html>问题如下：
行元素
常见的行元素标签：
html
链接标签
<a></a>
粗体标签
<strong></strong>
<b></b>
斜体标签
<em></em>
删除线标签
<del></del>
<s></s>
下划线标签
<ins></ins>
<u></u>
<span></span><span></span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
📌
链接里面不能再放链接，特殊情况链接 <a></a>里面可以放块级元素，但是给 <a></a> 转换一下块级模式最安全
示例代码：
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>
span {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<span>这是一段内容</span>
</body>
</html>效果如下：
行内块元素
常见的行内块标签：
html
<img />
<input />
<td></td>行内块元素同时具有块元素和行内元素的特点：
- 和相邻行内元素（或者行内块元素）在一行上，但是他们之间会有空白缝隙。
- 一行可以显示多个行内块元素（行内元素特点）。
- 默认宽度就是它本身内容的宽度（行内元素特点）。
- 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
元素显示模式的转换
即一个模式的元素需要另外一种模式的特性，比如想要增加链接 <a></a>的触发范围
转换方式：
- 转换为块元素：
display: block; - 转换为行内元素：
display: inline; - 转换为行内块：
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标签转换为行内块元素 */
a {
display: inline-block;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<a href="#">链接</a>
<a href="#">链接</a>
</body>
</html>效果如下：
使块内文字垂直居中的方法
在CSS中没有直接对文字设置垂直居中的属性，但是可以采用行高的设置来解决这个问题
当行高与当前块高度相同时，文字会被上下两个间隙挤在块的中间
同理，当行高大于当前块高度时，则此时因为上下间隙均等分布，所以上面的间隙会占据大部分的块空间，从而使文字向下移动，反之当行高小于当前块高度时，使文字向上移动
设计简单小米侧边栏（实践）
参考图如下：
参考小米商城链接：小米商城
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;
width: 237px;
height: 50px;
/* 设置每一个链接的背景颜色 */
background-color: rgb(80, 85, 92);
/* 设置每一个链接的文字缩进 */
text-indent: 2em;
/* 设置每一个链接文字的行高，使内容文本垂直居中 */
line-height: 50px;
}
/* 设置链接默认显示效果 */
a:link {
color: whitesmoke;
text-decoration: none;
}
/* 设置当鼠标悬停时链接的效果 */
a:hover {
background-color: rgb(205, 103, 0);
}
</style>
</head>
<body>
<a href="#">手机</a>
<a href="#">电视</a>
<a href="#">家电</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">耳机 音箱</a>
<a href="#">健康 儿童</a>
<a href="#">生活 箱包</a>
<a href="#">智能 路由器</a>
<a href="#">电源 配件</a>
</body>
</html>