求高寬2:1的源碼. 我試了問答里的都不太好用
下面是我寫的, 實(shí)現(xiàn)不了..
<!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>效果是:?
測(cè)試了火狐是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 需要一個(gè)給寬的祖先元素（不用給高，因?yàn)榭誨iv會(huì)把它撐起來），我們給 50vw，便于拖動(dòng)演示。空 div 垂直方向上發(fā)生 margin 合并導(dǎo)致，占空只有 50%，空 div 水平方向上不發(fā)生 margin 合并導(dǎo)致占空100%，正好造成寬高比 2:1 。父級(jí)元素里面只有一個(gè)元素，又造成 margin 合并，給 父級(jí)元素一個(gè)田間 border 正好避免 父子級(jí)的 margin 合并。
代碼已經(jīng)給出，瀏覽器運(yùn)行拖動(dòng)下試試 ?
2017-11-02
把高度取消 ?你把高度定死了。
2016-12-02
（1）最里層的div是普通元素，所以其margin的百分比是相對(duì)于其容器.box的寬度來計(jì)算的；
（2）最里層的div是空元素，所以本身不占據(jù)空間；
（3）.box設(shè)置overflow:hidden;觸發(fā)BFC，它會(huì)重新計(jì)算.box整個(gè)盒子的大小（占據(jù)尺寸），使得被觸發(fā)BFC的元素不會(huì)影響到外面的元素，所以上下左右四個(gè)margin: 50%;不會(huì)出現(xiàn)在.box外面；
（4）為什么2：1？因?yàn)榇怪狈较蛏蟤argin重疊，所以高度上只有一個(gè)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>