前端基礎
這裏只寫一些易混淆的點，以後有空再更新。
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條意思是不要用那些東西。。。