这是我参与2022首次更文挑战的第20天
一、vertical-align属性应用
CSS 的 vertical-align 属性使用场景：经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法：
vertical-align : baseline | top | middle | bottom
1.图片、表单和文字对齐
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了
2.解决图片底部默认空白缝隙问题
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
1）给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
2）把图片转换为块级元素 display: block;（变成块级元素后自己独占一行，可能会影响其他布局）。
二、溢出文字省略号显示
1.单行文本溢出显示省略号
单行文本溢出显示省略号--必须满足三个条件：
/1. 先强制一行内显示文本/
white-space: nowrap; （ 默认 normal 自动换行）
/2. 超出的部分隐藏/
overflow: hidden;
/3. 文字用省略号替代超出的部分/
text-overflow: ellipsis;
2.多行文本溢出显示省略号（了解）
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）。
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
语法：
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 /
display: -webkit-box;
/ 限制在一个块元素显示的文本的行数 /
-webkit-line-clamp: 2;
/ 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
三、CSS初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化。
简单理解： CSS初始化是指重设浏览器的样式。 (也称为CSS reset）
每个网页都必须首先进行 CSS初始化。
Unicode编码字体：
把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如：黑体 \9ED1\4F53、宋体 \5B8B\4F53、微软雅黑 \5FAE\8F6F\96C5\9ED1。
