*學(xué)習(xí)筆記

1.margin疊加問題

? ? 出現(xiàn)在上下margin同時(shí)存在的時(shí)候，會(huì)取上下中值較大的作為疊加的值。

如：<style>

????#div1{width:?100px;height:?100px; background:brown;margin-bottom:30px}

????#div2{width:?100px;height:?100px;background:seagreen; margin-top:30px}

</style>

????<div?id="div1"></div>

????<div?id="div2"></div>

</body>

這里只會(huì)顯示一個(gè)30px的距離，上下的margin進(jìn)行了重疊。

2.margin傳遞問題

? ? 出現(xiàn)在嵌套的結(jié)構(gòu)中，且只是針對(duì)margin-top的問題。

如：<style>

????#box1{ width:?200px;height:?200px;background:brown;}

????#box2{ width:?100px;height:?100px;background:seagreen;margin-top:?100px; }

</style>

????<div?id="box1">

????????<div?id="box2"></div>

????</div>

這里兩個(gè)div都會(huì)向下100px,并不會(huì)只是box2向下。

解決方案：

1.BFC規(guī)范

2.給父容器加邊框

??#box1{ width:?200px;height:?200px;background:brown;border:1px solid black}

這樣雖然能解決問題，但不能適應(yīng)所有場(chǎng)景，如果我這個(gè)div不需要加邊框，就不能用了。

3.margin換成padding

? ? 給父元素加padding

?????#box1{ width:?200px;height:?100px;background:brown;padding:100px}

父元素加了padding高度就變了，所以height也要改。