課程
/前端開發
/HTML/CSS
/CSS深入理解之margin
老師，第二節課的后半部分應用的自適應矩形這里不太懂，能否放出相關代碼讓我們看看?
2016-10-17
源自：CSS深入理解之margin 2-1
正在回答
<!DOCTYPE?html> <html> <head> ?<meta?charset="UTF-8"> ?<title>Document</title> ?<style> ??.box?{ ???width:?300px; ???background-color:?olive; ???overflow:?hidden;? ??} ??/*?解釋為什么會有overflow。 ???可能是觸發BFC，BFC一個特性是被觸發BFC的元素不會影響到外面的元素，所以上下左右四個margin:?50%;不會出現在.box外面。那為什么會是呈現出高寬相等的呢。 ???因為在.box內部元素的排版按扎正常流的方式，所以會是的一個元素自身發生上下margin重疊現象，所以只有一個margin:50%; ???*/ ??.box?>?div?{ ???margin:?50%; ??} ?</style> </head> <body> ?<div> ??<div></div> ?</div> </body> </html>
Audrey_rong
Close_0 提問者
上下margin 一共50% 左右margin 各50% 一共100% 因此撐開成一個2:1的容器
上面改正：
那為什么? 不? 會是呈現出高寬相等的呢
因為在.box內部元素的排版按照正常流的方式，所以會是的一個元素自身發生上下margin重疊現象，所以只有一個margin:50%;
舉報
本CSS教程帶你深入講解CSS的margin屬性，解決你多年困惑
5 回答求高寬2:1的源碼. 我試了問答里的都不太好用
3 回答寬度2：1請教怎么實現？
1 回答沒設置寬高，那藍色區域是怎么做到的？
1 回答請問他那個下面空隙咱出來的我的為啥沒有？求解釋
2 回答求解求大神照顧
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-10-18
<!DOCTYPE?html> <html> <head> ?<meta?charset="UTF-8"> ?<title>Document</title> ?<style> ??.box?{ ???width:?300px; ???background-color:?olive; ???overflow:?hidden;? ??} ??/*?解釋為什么會有overflow。 ???可能是觸發BFC，BFC一個特性是被觸發BFC的元素不會影響到外面的元素，所以上下左右四個margin:?50%;不會出現在.box外面。那為什么會是呈現出高寬相等的呢。 ???因為在.box內部元素的排版按扎正常流的方式，所以會是的一個元素自身發生上下margin重疊現象，所以只有一個margin:50%; ???*/ ??.box?>?div?{ ???margin:?50%; ??} ?</style> </head> <body> ?<div> ??<div></div> ?</div> </body> </html>2018-01-07
上下margin 一共50% 左右margin 各50% 一共100% 因此撐開成一個2:1的容器
2016-10-18
上面改正：
那為什么? 不? 會是呈現出高寬相等的呢
因為在.box內部元素的排版按照正常流的方式，所以會是的一個元素自身發生上下margin重疊現象，所以只有一個margin:50%;