无限期持续更新中。。。
1. span 之间的神秘缝隙
来看例子：
实际的效果是：
发现 span 在换行后，会出现缝隙。
事实上这是行内元素和inline-block元素的缝隙问题。
解决办法 1：你就不要换行了，毕竟span是行内元素。
解决办法 2：设置父元素的font-size为0，再设置目标span的font-size。
2. 忽高忽低的img图标
直接用img标签附加小图标时经常会发现小图标位置不是太高就是太低。
不管怎么调height，line-height，margin，padding都没用。
解决办法：
在img标签中加入vertical-align属性，
vertical-align有多种值总有一种符合你的要求，慢慢调试去吧。
3. github上传成功但不显示活跃颜色
如果当前git设置的用户名及邮箱和github上不同，那么上传文件到github的时候就会不显示用户活跃颜色。
因为github认为不是本人在上传。
解决办法：
首先可以用 git config --global user.name "xxxx"
$ git config --global user.email "xxxx@xxx"
ps：如果在list里没有出现user.name 和 user.email，就意味着当前git 没有设置用户名和邮箱。
4. 如何用三个均等div平铺一个大div
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.big::after{ /* 父元素清除浮动 */
content: "";
display: block;
clear: both;
}
.small{
/* padding和border可任意加 */
/* 因为设置为border-box了，padding和border一起算在了width里 */
width: 33.33%;
float: left;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="big">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
</div>
</body>
</html>
5. 标题多出字为省略号
//单行文字
.single-line-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
//多行文字
. multi-line-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
6. width系列知识
width() //宽度
innerWidth() //宽度+padding
outerWidth() //宽度+padding+border
outerWidth(true) //宽度+padding+border+margin
