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

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

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

吐槽职人

2016-07-20

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

关注问题我要回答

2002

操作

收起

7 回答

m慕光
2016-11-08

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

0 回复有任何疑惑可以回复我~

收起回答

tsdd
2016-08-10

老师不厚道，讲的一知半解的。下面是我理解的，可能跟老师的不一样，但是老师讲的是什么意思，我也实在是不了解。
<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%，父元素宽度的一半。

0 回复有任何疑惑可以回复我~

收起回答

tsdd

不过真不知道这有什么用。

2016-08-10 回复有任何疑惑可以回复我~

tsdd

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

2016-08-10 回复有任何疑惑可以回复我~

lemonTree123
2016-07-30

<!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 回复有任何疑惑可以回复我~

收起回答

吐槽职人提问者
2016-07-22

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

0 回复有任何疑惑可以回复我~

收起回答

吐槽职人提问者

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

2016-07-22 回复有任何疑惑可以回复我~

我要成为前端大姐大
2016-07-21

<!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那里重新看下

1 回复有任何疑惑可以回复我~

收起回答