求高寬2:1的源碼. 我試了問答里的都不太好用
下面是我寫的, 實現不了..
<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title></title>
<style>
.box?{
height:?600px;
width:?600px;
overflow:?hidden;
border:?1px?solid?red;
}
.box?>?div?{
background:?greenyellow;
margin:?50%;
}
</style>
</head>
<body>
<div?class="box">
<div></div>
</div>
</body>
</html>效果是:?
測試了火狐是360(谷歌)
2020-11-05
<!DOCTYPE?html><html?lang="en"><head><meta?charset="UTF-8"><meta?name="viewport"?content="width=device-width,?initial-scale=1.0"><title>Document</title><style>.box?{border:?1px?dashed?skyblue;width:?50vw;}.box?div?{margin:?50%;}</style></head><body><div?class="box"><div></div></div></body></html>margin 的百分比參考祖先元素，所以空 div 需要一個給寬的祖先元素（不用給高，因為空div會把它撐起來），我們給 50vw，便于拖動演示。空 div 垂直方向上發生 margin 合并導致，占空只有 50%，空 div 水平方向上不發生 margin 合并導致占空100%，正好造成寬高比 2:1 。父級元素里面只有一個元素，又造成 margin 合并，給 父級元素一個田間 border 正好避免 父子級的 margin 合并。
代碼已經給出，瀏覽器運行拖動下試試 ?
2017-11-02
把高度取消 ?你把高度定死了。
2016-12-02
（1）最里層的div是普通元素，所以其margin的百分比是相對于其容器.box的寬度來計算的；
（2）最里層的div是空元素，所以本身不占據空間；
（3）.box設置overflow:hidden;觸發BFC，它會重新計算.box整個盒子的大?。ㄕ紦叽纾?，使得被觸發BFC的元素不會影響到外面的元素，所以上下左右四個margin: 50%;不會出現在.box外面；
（4）為什么2：1？因為垂直方向上margin重疊，所以高度上只有一個margin:50%;
2016-10-26
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="utf-8">
? ? ? ? <title></title>
? ? ? ? <style>
? ? ? ? ? ? .box {
? ? ? ? ? ? ? ? height: 600px;
? ? ? ? ? ? ? ? width: 600px;
? ? ? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? ? ? border: 1px solid red;
? ? ? ? ? ? }
? ? ? ? ? ? ?
? ? ? ? ? ? .box1 {
? ? ? ? ? ? width: 150px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? ? ? background: greenyellow;
? ? ? ? ? ? ? ? margin: 20%;
? ? ? ? ? ? }
? ? ? ? </style>
? ? </head>
? ? <body>
? ? ? ? <div class="box">
? ? ? ? ? ? <div class="box1"></div>
? ? ? ? </div>
? ? </body>
</html>