課程
/前端開發
/HTML/CSS
/如何用CSS進行網頁布局
第16行代碼任務四處填寫margin：600px 0 0 0能實現與clear：both相同的效果，但是不應該是100（head）+600(main)=700px嗎？求教
2016-11-23
源自：如何用CSS進行網頁布局 5-2
正在回答
margin并不是相對于窗口，而是相對于自身，舉個栗子
榴蓮，外面的刺可以理解為margin（外邊距），皮的厚度可以理解為padding（內填充/內邊距）
第一個盒子head-高度100px
第二個盒子main（浮動）-高度600px
第三個盒子footer，margin-top:600px;（相當于自身的刺為600px，拉開了與第一個盒子的距離）
head的高度不用加，因為不加的時候剛好是頂著head，要增加的高度只是left，right的高度600px
暮女神 提問者
stone310 回復 暮女神 提問者
暮女神 提問者 回復 stone310
舉報
用最簡潔的案例教你布局的那些知識，這是前端工程師基本技能
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-11-30
margin并不是相對于窗口，而是相對于自身，舉個栗子
榴蓮，外面的刺可以理解為margin（外邊距），皮的厚度可以理解為padding（內填充/內邊距）
第一個盒子head-高度100px
第二個盒子main（浮動）-高度600px
第三個盒子footer，margin-top:600px;（相當于自身的刺為600px，拉開了與第一個盒子的距離）
2016-11-23
head的高度不用加，因為不加的時候剛好是頂著head，要增加的高度只是left，right的高度600px