下面是我写的, 实现不了..
<!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(谷歌)
2016-10-26
<!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 合并。
代码已经给出，浏览器运行拖动下试试 ?
<!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>
举报
