百度 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 部分：
<div id="div6">
<div class="div6-a"></div>
<div class="div6-b"></div>
<div class="div6-c"></div>
</div>CSS 部分：
#div6 {
margin-bottom: 10px;
}
.div6-a {
float: left;
width: 50px;
height: 50px;
background: #f00;
}
.div6-b {
margin: 0 50px;
height: 50px;
background: #00f;
}
.div6-c {
float: right;
width: 50px;
height: 50px;
background: #ff0;
}结果出现问题：
黄色的 C 元素跑到下一行去了
尝试了下先把 C 元素 flow 到右侧再填充 B 元素，即：
HTML 部分：
<div id="div6">
<div class="div6-a"></div>
<div class="div6-c"></div>
<div class="div6-b"></div>
</div>达到预期结果：
原因：浮动元素在文档流空出的位置，由后续的 (非浮动) 元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素；内联元素则有空隙就插入。
所以加入 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 空白间距（参考 Why does container div insist on being slightly larger than its content? -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 高度保持一致。
.content {
width: 980px;
overflow: hidden;
}
.post {
width: 320px;
float: left;
margin-bottom: -10000px;
padding-bottom: 10000px;
background: #fff;
}我是这样理解的：通过 padding-bottom: 10000px，外边距和内边距同时加 10000px，再通过 margin: -10000px，内边距同时减 10000px，然后，在没达到同一高度时，较长的元素的外边距跟着减小，而较短的元素外边距不变，达到同一高度后，较长元素和较短元素外边距同时减小。结果就高度一致了。
8. tr 边框（参考 CSS 如何修改 tr 边框属性）
像这样在 CSS 中直接给 tr 设置边框不起作用，而如果指定 td 的边框又会有间断的现象出现
tr {
border: 1px solid #000;
}如果同时给 table 设置 border-collapse 属性，tr 设置的边框就能出现了
table {
border-collapse: collapse;
}
tr {
border: 1px solid #000;
}原因见参考
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"？）
修改：
<head lang="zh-CN"> <head>
单一的 zh 和 zh-CN 均属于废弃用法。
看了下百度 淘宝 微博等网站均没有写 lang 属性，可以放心删掉啦。
10. 使用 h1 标签 （参考 HTML 之 h1 h2 h3 h4 标签知识经验篇 - DIVCSS5）
修改：
<div class="logo">
<a href="index.html"><img src="img/logo.png" alt="logo" width="200px"></a>
</div>
<h1 class="logo">
<a href="index.html"><img src="img/logo.png" alt="logo" width="200px"></a>
</h1>h1 h2 h3 h4 标题标签常常使用在一个网页中唯一标题、重要栏目、重要标题等情形下。
其中 h1 在一个网页中最好只使用一次，如对一个网页唯一标题使用。
在一个网页中可以适当使用 h1 h2 h3 h4 标签，有利于网页的重点部分突出，同时也利于搜索引擎排名。
看到淘宝也是这样做的，在 logo 的代码外包了一个 h1 标签。
11. 其他修改
没想到在 a 标签上用 class，多套了一层 div：
<div class="icon-github">
<a href="https://github.com/DIYgod" target="_blank"><img src="img/icon-github.png"></a>
</div>
<a class="icon-github" href="https://github.com/DIYgod" target="_blank"><img src="img/icon-github.png"></a>命名：
<div class="description"> <div class="banner">
将 <hr> 用 border 代替：
“不推荐 < hr>，用上下容器的 border 来代替吧
当我不需要这条线的时候，只需要改变样式即可，不需要改动 html”
使用 ul li 或者 dl 之类的列表语义的 dom。