                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之margin

求高宽2：1的源代码及解释？

老师，第二节课的后半部分应用的自适应矩形这里不太懂，能否放出相关代码让我们看看?

Close_0

2016-10-17

源自：CSS深入理解之margin 2-1

关注问题我要回答

1954

操作

收起

3 回答

慕莱坞4529473 回答被采纳 +3 积分
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>