margin问题

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             .box{
 8                 background-color: green;
 9                 overflow: hidden;     <margin-top会传递,使得两个框不挨着最上边而是有50px的尺寸>
10                 zoom:1;        　　　　<zoom触发haslayout>
　　　　　　　　　　　　　　　　　　<上下margin会叠加分别给出margin-top>

11             }
12             .item{
13                 height: 50px;
14                 background-color: red;
15                 margin-top: 50px;
16             }
17             .mt100{
18                 margin-top: 100px;
19             }
20         </style>
21         <!--
22             1、margin-top传递
23                 触发BFC、haslayout
24             2、上下margin叠压
25                 尽量使用同一方向的margin，比如都设置top或者bottom，
26         -->
27     </head>
28     <body>
29         <div class="box">
30             <div class="item"></div>
31             <div class="item mt100"></div>
32         </div>
33     </body>
34 </html>
posted on 2016-03-02 16:05 hduhdc 阅读(161) 评论(0) 收藏举报