求高宽2：1的源代码及解释？
老师，第二节课的后半部分应用的自适应矩形这里不太懂，能否放出相关代码让我们看看?
3 回答
<!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>
举报
0/150
提交
取消
