任務三：三欄式佈局

面向人羣：

不熟悉基本的 CSS 佈局者

難度：

簡單

重要說明

百度前端技術學院的課程任務是由百度前端工程師專爲對前端不一樣掌握程度的同窗設計。咱們盡力保證課程內容的質量以及學習難度的合理性，但即便如此，真正決定課程效果的，仍是你的每一次思考和實踐。

課程多數題目的解決方案都不是惟一的，這和咱們在實際工做中的狀況也是一致的。所以，咱們的要求不單單是實現設計稿的效果，更是要多去思考不一樣的解決方案，評估不一樣方案的優劣，而後使用在該場景下最優雅的方式去實現。那些最終沒有被咱們採納的方案，一樣也能夠幫助咱們學到不少知識。因此，咱們列出的參考資料未必是實現需求所必須的。有的時候，實現題目的要求很簡單，甚至參考資料裏就有，可是背後的思考和親手去實踐倒是任務最關鍵的一部分。在學習這些資料時，要多思考，多提問，多質疑。相信經過和小夥伴們的交流，能讓你的學習事半功倍。

任務目標

• 掌握HTML/CSS佈局的概念
• 掌握盒模型的概念
• 掌握position與float的概念以及在佈局時的用法

任務描述

• 使用 HTML 與 CSS 按照 示例圖（點擊查看） 實現三欄式佈局。
• 左右兩欄寬度固定，中間一欄根據父元素寬度填充滿，最外面的框應理解爲瀏覽器。背景色爲 #eee 區域的高度取決於三個子元素中最高的高度。

任務注意事項

• 嘗試 position 和 float 的效果，思考它們的異同和應用場景。
• 注意測試不一樣狀況，尤爲是極端狀況下的效果。
• 圖片和文字內容請自行替換，儘量體現團隊的特點。
• 調節瀏覽器寬度，固定寬度和自適應寬度的效果始終符合預期。
• 改變中間一欄的內容長度，以確保在中間一欄較高和右邊一欄較高時，父元素的高度始終爲子元素中最高的高度。
• 其餘效果圖中給出的標識均被正確地實現。

任務協做建議

• 團隊集中討論，明確題目要求，保證隊伍各自對題目要求認知一致
• 各自完成任務實踐
• 交叉互相Review其餘人的代碼，建議每一個人至少看一個同組隊友的代碼
• 相互討論，最後合成一份組內最佳代碼進行提交

參考資料

• MDN：position：瞭解 CSS position 屬性的基本知識
• MDN：float：瞭解 CSS float 屬性的基本知識
• Learn CSS Positioning in Ten Steps：經過具體的例子熟悉 position 屬性
• 清除浮動（clearfix hack）：清除浮動是什麼，如何簡單地清除浮動
• StackOverflow：Which method of ‘clearfix’ is best?：清除浮動黑科技完整解讀