百度 Web 前端技术学院（Baidu Institute of Front-End Technology の略称 IFE）は、百度 EFE チームと百度人力資源部のキャンパス採用グループが共同で制作した、在校大学生を対象としたフロントエンドトレーニング組織です。百度の多くの優れたフロントエンドエンジニアと豊富なフロントエンド知識の蓄積を活用し、大学生がより効率的かつ体系的に Web フロントエンド技術を学ぶ手助けをします。
百度 Web 前端技術学院は正式に開校し、私は幸運にも第 1 期の初級クラスの学生となり、仲間たちと一緒に楽しむことができます～
一緒に学びたいけれども入学できなかった方は、グループに参加してください：438966405
TASK 0001 が発表され、初級クラスのレビュー提出期限は 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
オンラインデモ：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 属性には 4 つの値があります：static relative absolute fixed。 static はデフォルトで、要素のボックスが通常通り生成され、normal flow に現れます；relative は要素のボックスをある距離だけオフセットし、元の占有スペースは保持され、normal flow に現れます；absolute は要素のボックスを normal flow から完全に削除し、含まれるブロックに対して位置を指定し、元の占有スペースは消失します；fixed も同様に要素のボックスを normal flow から削除し、ブラウザウィンドウに対して位置を指定します。
2. 浮動要素とその後の非浮動要素の埋め込み位置（参考 CSS float 浮動属性）
当時の状況は次の通りです：HTML 部分：
CSS 部分：
結果として問題が発生：
黄色の C 要素が次の行に移動しました。
C 要素を右側にフローさせてから 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 が浮動をクリアする原理は参考を見てください）。
ここまでで、2 日間かけて 1-6 節の実践的な練習内容を完成させました。成果は次の通りです：https://www.anotherhome.net/file/ife/task0001-16/task0001.html
以下は総合練習です。見た目はとても難しそうです。。
5. absolute 要素の位置決め（参考 CSS において、なぜ絶対位置（absolute）の親要素は相対位置（relative）でなければならないのか？- 知乎）
第 7 問のナビゲーションバーを書くときに絶対位置を使用する必要がありましたが、絶対位置は誰に対して位置を指定するのでしょうか？以前はずっと理解できませんでした。
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/
更新：多謝 天然傲娇、理由は理解しました。<img> はデフォルトで inline 要素（インライン要素）であり、高さを計算する際に line-height のデフォルト値（4px）が加算されます。
stackoverflow からの引用：
<img> はデフォルトでインライン要素であるため、その高さはデフォルトの line-height 値に関連して異なって計算されます。
ブロックレベル要素では、line-height は要素内の行ボックスの最小高さを指定します。
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 完了：
第 7 問デモ：https://www.anotherhome.net/file/ife/task0001/
1-6 問デモ：https://www.anotherhome.net/file/ife/task0001-16/task0001.html
☆ﾐ(o*･ω･)ﾉ完結散花 待ってレビュー
レビューが終了し、指導者の提案に基づいて修正およびまとめは以下の通りです：
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 は、ウェブページ内でできるだけ 1 回だけ使用するのが最適です。ウェブページ内で h1、h2、h3、h4 タグを適切に使用することで、ウェブページの重要な部分を強調し、検索エンジンのランキングにも役立ちます。
淘宝もこのように行っていることがわかりました。ロゴのコードの外側に h1 タグを包んでいます。
11. その他の修正
a タグに class を使用することを考慮せず、div を多重にしました：
命名：
<hr> を border で代用：
“<hr> は推奨されず、上下のコンテナの border で代用しましょう。
この線が必要ないときは、スタイルを変更するだけで済み、html を変更する必要はありません。”
ul li または dl などのリストセマンティクスの DOM を使用します。