后面自适应部分没听懂。。。-慕课网

首页课程实战体系课手记专栏慕课教程

后面自适应部分没听懂。。。

来源：2-1 CSS margin与百分比单位

吐槽职人

2016-07-20 22:28

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

写回答关注

7回答

m慕光

2016-11-08 16:59:24

因为在.box内部元素的排版按扎正常流的方式，所以会是的一个元素自身发生上下margin重叠现象，所以只有一个margin:50%;

0 0

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%，父元素宽度的一半。

2 0

tsdd

里面可能有用不到的属性。

2016-08-10 20:54:14

共 2 条回复 >

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>

我觉得应该是这样

0 0

吐槽职人

2016-07-22 11:49:10

还是没有明白它是怎么自适应的。。。这个自适应矩形难道不是指.box的这个矩形吗？

1 0

吐槽职人

而且和我写的没什么区别吧，里面的这个div我不写绝对定位的话，margin的计算目标还是上层div宽度啊，和你使用绝对定位然后让上一层相对定位来让margin的计算目标变成上一层的宽度，有什么不同吗？

2016-07-22 11:55:25

共 1 条回复 >

我要成为前端大姐大: 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那里重新看下

0 1