求高宽2：1的源代码及解释？
来源：2-1 CSS margin与百分比单位
Close_0
2016-10-17 16:09
老师，第二节课的后半部分应用的自适应矩形这里不太懂，能否放出相关代码让我们看看?
写回答
关注
3回答
-
- 慕莱坞4529473
- 2016-10-18 17:05:28
<!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> -
- 慕妹3578523
- 2018-01-07 11:43:36
上下margin 一共50% 左右margin 各50% 一共100% 因此撑开成一个2:1的容器
-
- 慕莱坞4529473
- 2016-10-18 17:07:10
上面改正：
那为什么 不 会是呈现出高宽相等的呢
因为在.box内部元素的排版按照正常流的方式，所以会是的一个元素自身发生上下margin重叠现象，所以只有一个margin:50%;
CSS深入理解之margin
本CSS教程带你深入讲解CSS的margin属性，解决你多年困惑
55943 学习 · 66 问题
相似问题