源自：2-1 CSS margin与百分比单位
后面自适应部分没听懂。。。
老师，第二节课的后半部分应用的自适应矩形这里不太懂，能否放出相关代码让我们看看
提问者：吐槽职人
2016-07-20 22:28
个回答
-
- m慕光
- 2016-11-08 16:59:24
因为在.box内部元素的排版按扎正常流的方式，所以会是的一个元素自身发生上下margin重叠现象，所以只有一个margin:50%;
-
- tsdd
- 2016-08-10 20:51:26
老师不厚道，讲的一知半解的。下面是我理解的，可能跟老师的不一样，但是老师讲的是什么意思，我也实在是不了解。 <html> <head></head> <body> <div style="background: rgb(238, 238, 238); margin: 100px auto 0px; width: 600px; height: 400px; overflow: hidden; position: relative;"> <div style="width: 100%; height: 100%; position: absolute; z-index: 1; background-color: blue;"></div> <div style="background: white; width: 100%; height: 1000px; margin-top: 50%; position: absolute; z-index: 2;"></div> </div> </body> </html> 容器是相对定位的，里面有两个div。第一个是为了显示内容用的，第二个是为了遮住父元素的一部分的，也就是margin-top:50%，父元素宽度的一半。
-
- lemonTree123
- 2016-07-30 16:01:29
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>自适应矩形</title> <script type="text/javascript" src="../../js/jquery-3.0.0.min.js"></script> <style type="text/css"> .box { background-color: olive; overflow: hidden; resize: both; width: 400px; height:250px; display: block; } .box > div { margin-top:50%; background-color: #eee; width: 100%; height: 100%; } </style> </head> <body> <div> <div></div> </div> </body> </html>我觉得应该是这样
-
- 吐槽职人
- 2016-07-22 11:49:10
还是没有明白它是怎么自适应的。。。这个自适应矩形难道不是指.box的这个矩形吗？
-
- 我要成为前端大姐大
- 2016-07-21 22:41:33
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 900px; height: 200px; background-color: olive; overflow: hidden; position: relative; } .tent{ margin: 20%; background-color: red; position: absolute; } </style> </head> <body> <div> <div>122333</div> </div> </body> </html>是根据相对定位和绝对定位的 3：00那里重新看下
-
- 吐槽职人
- 2016-07-21 22:12:00
我的意思是，我自己没有实现例子中的效果
显示效果
-
- 我要成为前端大姐大
- 2016-07-21 09:10:42
你的问题估计老师也没看懂