百度 Web 前端技术学院（Baidu Institute of Front-End Technology 簡稱 IFE）是一個由百度 EFE 團隊、百度人力資源部校園招聘組聯合出品的、面向在校大學生的前端培訓組織，借助百度大量優秀的前端工程師以及豐富的前端知識積累，幫助大學生們更加高效、系統地學習 Web 前端技術。
百度 Web 前端技術學院已正式開學，我有幸成為了第一期的初級班學員，可以和菊苣們一起玩耍啦～
想一起學但是沒錄取的可以加群：438966405
TASK 0001 發布，初級班 Review 提交截止時間為 4 月 23 日，中級班為 4 月 16 日。
TASK 0001 內容：https://github.com/baidu-ife/ife/tree/master/task/task0001（還設置了 1-6 小節照顧我這樣的弱菜，大讚～）
我做的：https://github.com/DIYgod/ife-work/tree/master/task0001
在線 Demo： https://www.anotherhome.net/file/ife/task0001/
本次任務累計花費時間 6 天（4.13-4.19 ）
下面是我做 TASK 0001 過程中的一些記錄。
1. position 屬性（參考 CSS 定位 - W3School、CSS+DIV 佈局中 absolute 和 relative）
position 屬性比較重要，但自己看的時候沒看很明白，馬馬虎虎略過了，於是做任務的時候就出了莫名其妙的問題，在蛋炒飯的幫助才發現是因為 position 屬性沒搞懂。
用自己的話簡單總結一下：position 屬性有四個屬性值：static relative absolute fixed。 static 為默認，元素框正常生成，出現在 normal flow 中；relative 使元素框偏移某個距離，原本所占的空間仍保留，也是出現在 normal flow 中；absolute 使元素框跳出 normal flow 完全刪除，並相對於其包含塊定位，原本所占的空間消失；fixed 同樣使元素框跳出 normal flow，相對於瀏覽器窗口進行定位。
2. 浮動元素及其後續非浮動元素填充的位置（參考 CSS float 浮動屬性）
當時的情況是這樣的：HTML 部分：
CSS 部分：
結果出現問題：
黃色的 C 元素跑到下一行去了
嘗試了下先把 C 元素 flow 到右側再填充 B 元素，即：
HTML 部分：
達到預期結果：
原因：浮動元素在文檔流空出的位置，由後續的 (非浮動) 元素填充上去：塊級元素直接填充上去，若跟浮動元素的範圍發生重疊，浮動元素覆蓋塊級元素；內聯元素則有空隙就插入。
所以加入 C 元素後再加入 B 元素時，B 元素直接填充到 A C 元素的同一行；加入 B 元素後再加入 C 元素時，由於 B 元素一行沒有空隙，C 元素浮動到下一行。
3. 負邊距 (negative margin)（參考 CSS 佈局奇淫巧計之 - 強大的負邊距）
聖杯佈局、雙飛翼佈局都用了負邊距對浮動元素的影響的原理，某個元素雖然寫在了後面，但可以通過負邊距讓它在瀏覽器顯示的時候是在前面的，具體見參考，寫得非常好。
4. 清除浮動（參考 那些年我們一起清除過的浮動）
做浮動佈局那題時，裝藍色方塊的紅色容器總是顯示不出來，用 F12 看到紅色容器的高度不知道為什麼變成了 0，於是參考雙飛翼佈局的代碼，發現雙飛翼佈局在父級元素設置了一個 overflow: hidden 的屬性，我嘗試了一下給紅色容器也加上 overflow: hidden 屬性，高度居然神奇地可以自適應了，十分不理解。
經過蛋炒飯的指點知道了，子級元素都是 flow 屬性的時候，會造成父級元素沒有高度，而 overflow: hidden 有清除浮動的效果，所以加上後會使父級恢復高度（overflow: hidden 清除浮動的原理見參考）。
到此為止，花了兩天時間，已經完成了 1-6 節實戰小練習的內容，成果見：https://www.anotherhome.net/file/ife/task0001-16/task0001.html
下面就是綜合練習了，看起來就好難。。
5. absolute 元素的定位（參考 CSS 中，為什麼絕對定位（absolute）的父級元素必須是相對定位（relative）？- 知乎）
寫第七題中導航欄的時候需要用到絕對定位，但絕對定位是相對誰定位呢？之前一直沒搞清楚。
absolute 元素的定位是上溯父級元素，找第一個不是 static 的元素，以其為 absolute 的基準。如果父級元素全都沒有設置（static），則裡面的絕對定位以 body 定位。
所以一般的做法是將想作為基準的父級元素加上 position: relative 屬性。
6. 圖片的 4px 空白間距（參考 為什麼容器 div 堅持比其內容稍大？ -stackoverflow）
插入頂部圖片時候發現了一個很詭異的問題，見圖：
圖片高度 500px
父級高度 504px
多出來 4px。。。
網上搜了下基本上都是因為設置inline-block 元素才出現的空白間距，但我沒有 inline-block 元素呀。但是可以通過類似的方法消除 4px 間距，我用了設置父元素的字體大小為 0 的方法解決。
我已經將上述問題的代碼化簡後傳到了伺服器上，有興趣的可以幫我看一下：https://www.anotherhome.net/file/ife/task0001-7_problem/
Update：多謝 天然傲嬌，原因已了解，<img> 默認是 inline 元素（內聯元素、行內元素），計算高度時要加上 line-height 的默認值（4px）。
來自 stackoverflow：
Since an <img> is an inline element by default, it's height is calculated differently as related to the default line-height value.
On inline elements, the line-height CSS property specifies the height that is used in the calculation of the line box height.
On block level elements, line-height specifies the minimal height of line boxes within the element.
7. CSS 控制 DIV 兩列左右高度一致（參考 CSS 控制 DIV 兩列左右高度一致）
content 為父級元素，多個 post 作為子級元素，目的是使 post 高度保持一致。
我是這樣理解的：通過 padding-bottom: 10000px，外邊距和內邊距同時加 10000px，再通過 margin: -10000px，內邊距同時減 10000px，然後，在沒達到同一高度時，較長的元素的外邊距跟著減小，而較短的元素外邊距不變，達到同一高度後，較長元素和較短元素外邊距同時減小。結果就高度一致了。
8. tr 邊框（參考 CSS 如何修改 tr 邊框屬性）
像這樣在 CSS 中直接給 tr 設置邊框不起作用，而如果指定 td 的邊框又會有間斷的現象出現
如果同時給 table 設置 border-collapse 屬性，tr 設置的邊框就能出現了
原因見參考
TASK0001 全部完成：
第七題 Demo：https://www.anotherhome.net/file/ife/task0001/
1-6 題 Demo：https://www.anotherhome.net/file/ife/task0001-16/task0001.html
☆ﾐ(o*･ω･)ﾉ完結散花 等待 review
Review 結束，根據導師的建議修改及總結如下：
9. 刪除 lang="zh-CN" （參考 網頁頭部的聲明應該是用 lang="zh" 還是 lang="zh-cn"？）
修改：
單一的 zh 和 zh-CN 均屬於廢棄用法。
看了下百度 淘寶 微博等網站均沒有寫 lang 屬性，可以放心刪掉啦。
10. 使用 h1 標籤 （參考 HTML 之 h1 h2 h3 h4 標籤知識經驗篇 - DIVCSS5）
修改：
h1 h2 h3 h4 標題標籤常常使用在一個網頁中唯一標題、重要欄目、重要標題等情形下。
其中 h1 在一個網頁中最好只使用一次，如對一個網頁唯一標題使用。
在一個網頁中可以適當使用 h1 h2 h3 h4 標籤，有利於網頁的重點部分突出，同時也利於搜索引擎排名。
看到淘寶也是這樣做的，在 logo 的代碼外包了一個 h1 標籤。
11. 其他修改
沒想到在 a 標籤上用 class，多套了一層 div：
命名：
將 <hr> 用 border 代替：
“不推薦 < hr>，用上下容器的 border 來代替吧
當我不需要這條線的時候，只需要改變樣式即可，不需要改動 html”
使用 ul li 或者 dl 之類的列表語義的 dom。