前端基础
这里只写一些易混淆的点，以后有空再更新。
1. 选择器 [checked]{…}—-表示的是选中的状态
2. .logo+.active {…}—–表示的是相邻选择器的状态
3. #header.logo{…} —–中间不加空格表示的是<div id="header" class="logo">...</div>里边的状态
4. .logo~.active{…} —–表示所有相邻元素
5. .logo::before {…} —–伪类元素
6. @keyframes —–关键帧
bfc
block formatting content —-块级格式化上下文
将元素按照从上到下的顺序去排列。
作用：
1. 清除浮动—-不要用它来清除浮动，但是可以说为了其它的某种需求加了bfc刚好可以达到清除浮动的效果
2. 边距合并
3. 外边距合并
触发bfc——overflow:hidden—–如果外层加上overflow hidden 的话，其它元素只会与最外级元素发生外边距合并，不会作用于其里边的。
ifc
inline formatting content —–行内格式化上下文
1. 你以为font-size规定的是什么？
我猜你们应该都没有想过这个问题，包括我，我也从没想过。因为你写了font-size，然后它就会有一个肉眼可见的大小。但是如果你较真一点，用工具仔细量一下，你会发现，这个font-size很玄，不是你能测量出来的任何数值。
不知道你们知不知道有一种东西叫做活字印刷术，不知道的话可以百度一下。印刷的时候我们每个字都是放在一个模子里的，而这个模子的高度，就是我们所写的font-size的数值。所以怎么确定一个字占多少像素呢？没法确定。因为每种字体在模子里占据的空间不一样大。甚至有的字体中某些字符会超出这个模子。
2. line-height决定一个内联元素的真正占地高度
不要以为它决定真正的占地高度就很好控制，你试试用两个风格迥异的字体放进同一个容器p中并且设置相同的line-height看最终包裹它们的容器p究竟会有多高。相信我，不要用那些正正经经规规矩矩的字体的话，基本上p是会被撑开一点点的。内联元素默认baseline对齐，不同字体的baseline不同的话，是不在一个水平线上的，它们只要错开了一点点，p的高度就超过这两个元素的line-height了。
line-height不指定的话结果是设计师指定的字体行高。
3. vertical-align: top;—-这个是让两个实际占地面积的上方对齐。像下图，事实上，它们的底部依然是错开的。不同字体的默认行高不同所以实际占地面积不同，所以用vertical-align的各种对齐都不好使，因为和字体有关系。
元素实际位置和里边的字位置不一定是一样的，如果说用baseline对齐的话我们只能做到边框对齐，所以不要用基线对齐。
两个内联元素在一起的话默认基线对齐，一个内联元素的话也会跟一个看不见的基线对齐，比如p元素有默认的baseline。
4. 一个div里边放一个img，你以为img的高度就是div的高度吗？
你可以给div加个边框试一试。是的，你会惊讶的发现div的下边框和img之间会有一点间隙，有一点间隙。是的，它就是这么不讲道理的给了你一点间隙。
想要消除这个间隙的话你可以尝试着给img加上一个vertical-align:text-bottom;，或者给img加上display:block;或者给div加上一个display:flex;什么都可以除了baseline也就是vertical-align:baseline;。当然，用font-size:0;也可以达到你要的效果，但是后续会有一堆麻烦事。
5. 两个span之间默认是有间隙的，如果你想去掉这个毫无用处的间隙，可以在它们的父级元素上加上display:flex;或者给它们本身加上float。
and最后的总结：
ps:
第3条意思两个100px放到同一行这一行的高度会被撑到103px。。
第4条意思是不要用那些东西。。。