任務(wù)十八

任務(wù)目標(biāo)

掌握HTML/CSS布局的概念

掌握盒模型的概念

掌握position與float的概念以及在布局時(shí)的用法

任務(wù)描述

使用 HTML 與 CSS 按照示例圖（ http://7xrp04.com1.z0.glb.clouddn.com/task_1_3_1.png)實(shí)現(xiàn)三欄式布局。

左右兩欄寬度固定，中間一欄根據(jù)父元素寬度填充滿，最外面的框應(yīng)理解為瀏覽器。背景色為 #eee 區(qū)域的高度取決于三個(gè)子元素中最高的高度。

任務(wù)注意事項(xiàng)

嘗試 position 和 float 的效果，思考它們的異同和應(yīng)用場(chǎng)景。

注意測(cè)試不同情況，尤其是極端情況下的效果。

圖片和文字內(nèi)容請(qǐng)自行替換，盡可能體現(xiàn)團(tuán)隊(duì)的特色。

調(diào)節(jié)瀏覽器寬度，固定寬度和自適應(yīng)寬度的效果始終符合預(yù)期。

改變中間一欄的內(nèi)容長度，以確保在中間一欄較高和右邊一欄較高時(shí)，父元素的高度始終為子元素中最高的高度。

其他效果圖中給出的標(biāo)識(shí)均被正確地實(shí)現(xiàn)。

參考資料：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

https://developer.mozilla.org/zh-CN/docs/CSS/float

http://zh.learnlayout.com/clearfix.html

https://segmentfault.com/a/1190000004865198

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容