                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /CSS深入理解之margin

后面自適應(yīng)部分沒聽懂。。。

老師，第二節(jié)課的后半部分應(yīng)用的自適應(yīng)矩形這里不太懂，能否放出相關(guān)代碼讓我們看看

吐槽職人

2016-07-20

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

關(guān)注問題我要回答

2052

操作

收起

7 回答

m慕光
2016-11-08

? ?因為在.box內(nèi)部元素的排版按扎正常流的方式，所以會是的一個元素自身發(fā)生上下margin重疊現(xiàn)象，所以只有一個margin:50%;

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

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。第一個是為了顯示內(nèi)容用的，第二個是為了遮住父元素的一部分的，也就是margin-top:50%，父元素寬度的一半。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

tsdd

不過真不知道這有什么用。

2016-08-10 回復(fù) 有任何疑惑可以回復(fù)我~

#2

tsdd

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

2016-08-10 回復(fù) 有任何疑惑可以回復(fù)我~

lemonTree123
2016-07-30

<!doctype?html>
<html>
<head>
<meta?charset="UTF-8">
<title>自適應(yīng)矩形</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>

我覺得應(yīng)該是這樣

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

吐槽職人提問者
2016-07-22

還是沒有明白它是怎么自適應(yīng)的。。。這個自適應(yīng)矩形難道不是指.box的這個矩形嗎？

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

吐槽職人提問者

而且和我寫的沒什么區(qū)別吧，里面的這個div我不寫絕對定位的話，margin的計算目標(biāo)還是上層div寬度啊，和你使用絕對定位然后讓上一層相對定位來讓margin的計算目標(biāo)變成上一層的寬度，有什么不同嗎？

2016-07-22 回復(fù) 有任何疑惑可以回復(fù)我~

我要成為前端大姐大
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>

是根據(jù)相對定位和絕對定位的 ?3：00那里重新看下

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答