css中的幾個小tip（二）

標籤：ima   round   width   16px   yellow   距離   如何   height   tip   

margin的塌陷現象（一）在標準文檔流中, 垂直方向存在margin的塌陷現象

 先上段代碼：

 1 <style type="text/css"> 2         .box{ 3             width: 200px; 4             margin: 50px auto; 5             border: 1px solid black; 6         }  7         .box1{ 8             width: 100%; 9             height: 100px;10             background-color: orange;11             margin-bottom: 10px;12         }13         .box2{14             width: 100%; 15             height: 100px;16             background-color: tan;17             margin-top: 40px;18             /*float: left;*/19         }20     </style>

HTML結構： <div class="box"><div class="box1"></div><div class="box2"></div></div>

box1和box2為並列的兩個盒子，給box1設定margin-bottom: 10px;給box2設定margin-top: 40px;屬性； 

結果：

　　　　　　　　　　

 

通過結果發現兩個盒子之間的距離是40px，則說明只有box2的margin-top生效；對於如上兩個並列的div垂直方向發現塌陷現象，則最後值取較大的一方。

 

（二） 兩個內含項目關聯性的div

再來代碼：

 1 <style type="text/css"> 2     *{margin: 0;padding: 0;} 3         .father{ 4             width: 200px; 5             height: 200px; 6             background-color: greenyellow; 7         } 8         .son{ 9             width: 100px;10             height: 50px;11             background-color: grey;12             margin-top: 10px;13         }14     </style>

HTML結構：父盒子裡面嵌套一個子盒子

給son盒子設定一個margin-top屬性，看是否能把自己踹下來，離父盒子10px;

結果如下：

　　

從圖上看出，父盒子隨子盒子一起被踹下來了，並沒有想象中離父盒子10px。

這個時候就要思考思考如何解決這些問題？

在百度上網羅了一些方法，經測：

1）為父盒子設定border

　　在父盒子上加上：border: 1px solid #000; ，父盒子就不會受到子盒子的影響。

2）為父盒子添加設定padding值；

3）脫標

 

css中的幾個小tip（二）