搭建项目相关知识

最新推荐文章于 2024-09-29 23:41:25 发布

zyx127

最新推荐文章于 2024-09-29 23:41:25 发布

阅读量119

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/zyx127/article/details/110881418

版权

一丶 HTML各个标签的分类以及用途

HTML的众多标签可以分为两大类：块（级）元素和行内（内联）元素

块元素	行内元素
定义地址：`<address>`	定义链接：`<a>`
h定义文章：`<article>`	定义缩写: `<abbr>`
定义页面内容之外的内容：`<aside>`	定义粗体字: `<b>`
定义声音内容：`<audio>`	定义文字方向: `<bdo>`
定义长的引用：`<blockquote>`	定义大号文本: `<big>`
定义表格标题：`<caption>`	定义简单的折行： `<br>`
定义定义列表：`<dl>`	定义按钮 (push button)： `<button>`
定义定义列表中的项目：`<dt>`	定义引用：`<cite>`
定义定义列表中项目的描述：`<dd>`	定义计算机代码文本： `<code>`
盒子模型经典标签：`<div>`	定义命令按钮： `<command>`
定义元素的细节：`<details>`	定义定义项目：`<dfn>`
定义围绕表单中元素的边框：`<fieldset>`	定义被删除文本： `<del>`
定义 figure 元素的标题：`<figcaption>`	定义强调文本： `<em>`
定义网页的页脚：`<footer>`	定义外部交互内容或插件： `<embed>`
定义供用户输入的 HTML 表单：`<form>`	定义斜体字：`<i>`
定义表格中的主体内容：`<tbody>`	定义图像： `<img>`
定义网页的页眉：`<header>`	定义输入控件：`<input>`
定义水平线：`<hr>`	定义图像映射：`<map>`
定义 fieldset 元素的标题：`<legend>`	定义键盘文本：`<kbd>`
定义列表的项目：`<li>`	定义 input 元素的标注：`<label>`
定义命令的列表或菜单：`<menu>`	定义有记号的文本：`<mark>`
定义导航链接：`<nav>`	定义内嵌对象：`<objec>`
定义针对不支持框架的用户的替代内容：`<noframes>`	定义任何类型的任务的进度：`<progress>`
定义针对不支持客户端脚本的用户的替代内容：`<noscript>`	定义短的引用：`<p>`
定义有序列表：`<ol>`	定义计算机代码样本：`<samp>`
定义输出的一些类型：`<output>`	定义选择列表（下拉列表）：`<select>`
定义段落：`<p>`	定义小号文本：`<small>`
定义表格：`<table>`	定义文档中的节：`<span>`
定义导航链接：`<nav>`	定义强调文本：`<strong>`
定义针对不支持框架的用户的替代内容：`<noframes>`	定义下标文本：`<sup>`
定义针对不支持客户端脚本的用户的替代内容：`<noscript>`	定义多行的文本输入控件：`<textarea>`
定义有序列表：`<ol>`	定义日期/时间：`<time>`
定义输出的一些类型：`<output>`	定义打字机文本：`<tt>`
定义段落：`<p>`	定义文本的变量部分：`<var>`
定义表格：`<table>`	定义视频：`<video>`
定义表格中的单元：`<td>`	定义可能的换行符：`<wbr>`
定义表格中的表头单元格：`<th>`
定义表格中的表头内容：`<thead>`
定义日期/时间：`<time>`
定义表格中的行：`<tr>`
定义无序列表：`<ul>`

二丶行内元素丶块级元素以及行内块元素

块元素特点：

1.比较霸道，独占一行。
2.高度丶宽度丶内外边距可以控制。
3.块元素的默认宽度为容器（父级元素）的100%。
4.块元素是一个容器或者盒子，里面可以放其他块元素以及行内元素。

注意：
！文字类型的块元素里面是不能放块元素的。
比如<h1>-<h6>丶 <p>等这种文字类型的标签

行内（内联）元素特点：

1.相邻行内元素都在一行上显示，一行可以显示多个。
2.宽丶高直接设置是无效的。
3.默认宽度就是它本身内容的宽度。
4.行内元素只能容纳文本或者是其他行内元素。

注意：
a链接标签里不能再放链接了，但是a标签在特殊情况下可以放块级元素。

行内块元素：

在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。
有些资料称它们为行内块元素。
行内块元素特点：

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

三种元素显示方式对比：

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

学习元素显示模式的主要目的就是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素

三种模式的相互转化

特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性
比如想要增加链接 <a> 的触发范围，就可以把<a>元素转化为块元素或者行内块元素设置宽高。

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

三丶盒子模型

所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的HTML的块级元素或者行内块元素 ，它包括：边框（border）、外边距（margin）、内边距（padding）、和实际内容（content）

边框（border）：

属性	作用
border-width	设置边框的宽度，单位为px
border-style	设置边框的样式
border-color	设置边框的颜色

边框样式 border-style 可以设置如下值：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线

边框设置时可以采取分开写的方式：

border-top: 1px solid red;/* 只设定上边框， 其余同理 */  
1

也可以采取连写的方式：

border: 1px solid red; /* 没有顺序 */
1

注意
边框会额外增加盒子的实际大小。因此我们有两种方案解决:

测量盒子大小的时候,不量边框.
如果测量的时候包含了边框,则需要 width/height 减去边框宽度

内边距（padding）：

内边距分开写时：

padding-top:20px;/* 只设定上边框， 其余同理 */
1

当它们简写时：

值的个数	代表
`padding:5px;`	上丶下丶左丶右内边距都为5像素
`padding:5px 10px;`	上下内边距为5像素，左右内边距为10像素
`padding:5px 10px 25px;`	上内边距为5px,左右内边距都为10像素,下内边距为25像素
`padding:5px 10px 15px 25px;`	上内边距为5像素丶右内边距为10像素丶下内边距为15像素丶左内边距为25像素（顺时针）

注意：
当我们给盒子指定 padding 值之后，发生了 2 件事情：

内容和边框有了距离，添加了内边距。
padding影响了盒子实际大小。
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案：
如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。
或者盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小

外边距（margin）:

margin 属性用于设置外边距，即控制盒子和盒子之间的距离
内外边距的书写相似，可以参考内边距。

外边距的经典应用：
外边距可以让块级盒子水平居中，但是必须满足两个条件：
① 盒子必须指定了宽度（width）。
② 盒子左右的外边距都设置为 auto 。
注意
以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可

四丶页面中布局的三种方式

网页布局的本质就是把一块一块的内容当成一个个盒子摆放在网页上。
基础页面布局

标准流布局：

所谓的标准流: 就是标签按照规定好默认方式排列.

块级元素会独占一行，从上向下顺序排列。
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
常用元素：span、a、i、em 等

上图4个盒子是标准流排列

浮动：

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。比如：
两个DIV盒子默认是上下顺序要想让他们在同一行显示就需要添加浮动。
浮动前
添加浮动效果后：
浮动后
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

浮动的特性（重点）：

脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标）
浮动的盒子不再保留原先的位置，如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
浮动元素会具有行内块元素特性。

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
浮动的盒子中间是没有缝隙的，是紧挨着一起的
行内元素同理

定位：

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
定位 = 定位模式 + 边偏移。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

静态定位( static )：

静态定位是元素的默认定位方式，无定位的意思

相对定位(relative)：

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。
相对定位的特点：（务必记住）
1. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的…

绝对定位（absolute）：

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。
== 绝对定位的特点：（务必记住）==
1. 如果没有祖先元素或者祖先元素没有定位，则以整个浏览器为准定位（Document 文档）。2. 如果祖先元素都有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。3. 绝对定位不再占有原先的位置。（脱标）所以绝对定位是脱离标准流的。

口诀：子绝父相：

弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。
这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。

① 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。② 父盒子需要加定位限制子盒子在父盒子内显示。③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

固定定位（fixed）:

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
固定定位的特点：（务必记住）

以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系
不随滚动条滚动。

固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

五丶选择器的分类及其权重

一个完整的CSS样式语句是：

h1 {
      font-size:16px;
     }
123

其中分为三块：对象h1丶声明部分font-size和关键字16px。
对象h1叫做选择器，用于选择声明的对象。其中，选择器可以分两类：基础选择器和复合选择器。
注意

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文“:”分开
多个“键值对”之间用英文“;”进行区分

基础选择器

标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
语法：p {font-size:16px;}
页面中所有的<p>标签里面的文字大小就会为16px。

作用

标签选择器可以把某一类标签全部选择出来，比如所有的

标签和所有的标签。

优点

能快速为页面中同类型的标签统一设置样式。

缺点

不能设计差异化样式，只能选择全部的当前标签。

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
语法：.box { border:1px solid red; }
调用时：<div class="box"></div>
注意
① 类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
② 可以理解为给这个标签起了一个名字，来表示。
③ 长名称或词组可以使用中横线来为选择器命名。
④ 不要使用纯数字、中文丶标签名等命名，尽量使用英文字母来表示。
⑤ 命名要有意义，尽量使别人一眼就知道这个类名的目的。

类选择器-多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签.

多类名使用方式
2.4 类选择器

<div class="red font20 border">亚瑟</div>
1

(1) 在标签class 属性中写多个类名
(2) 多个类名中间必须用空格分开
(3) 这个标签就可以分别具有这些类名的样式
注意

各个类名中间用空格隔开
简单理解：就是给某个标签添加了多个类，或者这个标签有多个名字
这个标签就可以分别具有这些类名的样式
从而节省CSS代码,统一修改也非常方便.
多类名选择器在后期布局比较复杂的情况下，还是较多使用的

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。
语法 :#bargain {color:red;}
调用时：<div id="bargain"></div>
注意
id 属性只能在每个 HTML 文档中出现一次。
口诀: 样式#定义,结构id调用, 只能调用一次, 别人切勿使用.

类选择器与id选择器的区别

① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
② id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
③ id 选择器和类选择器最大的不同在于使用次数上。
④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

通配符选择器

在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。
语法：* {padding：0；}

通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况下才会使用。比如清除页面本身的一些元素属性。

基础选择器的总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p {color:red;}
类选择器	可以选一个或多个标签	可以根据需求选择	普遍	.red {color:red;}
id选择器	一次只能选一个标签	ID属性只能在HTML文档中出现一次	搭配Javascript使用	#nav {color:red;}
通配符选择器	选择所有的标签	选择的太多，但是有部分不需要	特殊情况使用	* {padding:0;}

复合选择器

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

复合选择器可以更准确、更高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。比如：

ul li { color：red; } /* 选择 ul 里面所有的 li标签元素 */
1

注意

元素1 和元素2 中间用空格隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
元素1 和元素2 可以是任意基础选择器

子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.例如：

div > p { font-size:16px; } /* 选择 div 里面所有最近一级 p 标签元素 */
1

注意

元素1 和元素2 中间用大于号隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器

并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明.
并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。例如：

ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */ 
1

注意

元素1 和元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。例如：

 /* a 是标签选择器 所有的链接 */
 a {
 color: gray;
 }
 /* :hover 是链接伪类选择器 鼠标经过 */
 a:hover {
 color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
1234567

复合选择器总结

复合选择器	作用	特点	使用情况	用法
后代选择器	用来选择后代	可以是子孙后代	较多	符号是空格。.nav a{声明}
子代选择器	选择最近一级元素	只能选亲儿子	较少	符号是大于号。.nav>a {声明}
并集选择器	选择某些相同样式的元素	用于集体声明	较多	符号是逗号。.nav,a{声明}
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	a{}与a:hover{}

css的三大特性

层叠性

层叠性是指当一个标签被设置了多个重复的样式的时候，会采取就近原则，使得离标签近的样式覆盖另一个相同属性的样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS的层叠性</title>
    <style>
        div {
            background-color: blue;
            width: 200px;
            height: 200px;
            border: 5px solid deeppink;
        }
        
        div {
            background-color: gold;
        }
    </style>
</head>

<body>
    <div>123</div>
</body>

</html>
1234567891011121314151617181920212223242526

猜猜div的背景颜色是蓝色还是黄色？
层叠性
此时div标签背景颜色并没有选择蓝色而是选择了离它近的金黄色。
注意
这里要注意只覆盖同样的不可重复的样式属性，不会覆盖不重复的属性，不重复的属性会合并下来（包括那些允许设置多个值的属性也会合并，比如text-shadow）。

继承性

继承性是指当子标签没有设置样式时，会继承父标签的样式。
比如一个子标签没有设置背景颜色，那么子标签会继承父标签的背景颜色。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS的继承性</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            font-weight: 700;
            color: blueviolet;
            background-color: pink;
        }
        
        .son {
            width: 200px;
            height: 200px;
            border: 3px solid red;
        }
    </style>
</head>

<body>
    <div class="father">
        我是爸爸
        <div class="son">我是儿子</div>
    </div>
</body>

</html>
1234567891011121314151617181920212223242526272829303132

儿子的字体样式与背景颜色都未声明，继承了父亲的样式。
继承性

优先级

优先级：!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
【优先级高的规则会忽视层叠性，忽视就近原则来定义样式。比如定义了!important，即使行内样式离得近，最终生效的还是!important标注的属性】
!important是css的一种语法，定义在样式属性后面，代表这个属性不会被覆盖，最终生效的属性一定是!important标注的属性。

div {color:green!important;}
1

权重计算方法（特异性）
权重使用四个数字来衡量(x,x,x,x)【CSS2使用三位】
简单的权重比较：

继承的权重为(0,0,0,0)
标签选择器的权重为(0,0,0,1)
类、伪类选择器的权重为(0,0,1,0)
id选择器选择器的权重为(0,1,0,0)
行内样式的权重为(1,0,0,0)
!important的权重无限大
复杂的权重计算
多个选择器混杂时，权重之和也是用四个数字来组成，每一位的值为多个选择器四个数字的每位之和，比如div:first-child的权重为(0,0,0,1)+(0,0,1,0)=(0,0,1,1)，比如div ul li 为(0,0,0,3),比如a:hover为(0,0,1,1)
权重之和的数制是不会进位的，再多的标签选择器权重加和也抵不过一个类选择器。
多个选择器之间的顺序是无关的，不影响权重之和。
注意：对于并集选择器来说不是权重的加和，因为理论上它还是独立的，它只相当于将多个选择器的相同内容归于一个并集选择器中，理论上每个选择器是独立的。

六丶字体丶文本基本属性介绍

字体：

字体系列

p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
12

注意

各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }

字体粗细

p {
 font-weight: bold;
}
123

属性值	描述
normal	默认值（不加粗的）
bold	定义加粗（加粗的）
100-900	normal=400 而 bold=700 数字后面没有单位

注意

学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
实际开发时，我们更喜欢用数字表示粗细

字体样式

p {
 font-style: normal;
}
123

属性值	描述
normal	默认值，浏览器会显示标准的字体样式
italic	浏览器会显示斜体的字体样式

字体的复合属性

字体的属性可以复合在一起写，以便节约代码，例如：

p {font: none 400 12px/26px "Microsoft Yahei";}
/*即p {
 font: font-style font-weight font-size/line-height font-family;
}
*/
12345

注意

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

文本：

文本的颜色

color 属性用于定义文本的颜色。

div {
 color: red;
}
123

对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式

div {
 text-align: center;
}
123

属性值	作用
left	默认值左对齐
right	右对齐
center	居中对齐

装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

div {
 text-decoration：underline；
}
123

属性值	作用
none	默认没有装饰线
underline	下划线
line-through	删除线

文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

p {
 text-indent: 2em;
}
123

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

p {
 line-height: 26px;
}
123

行间距=上间距+文字高度+下间距
所以要想文字垂直居中，就可以将它们的行高设置为盒子的高度