margin问题

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style>

             .box{

                 background-color: green;

                 overflow: hidden;     <margin-top会传递,使得两个框不挨着最上边而是有50px的尺寸>

                 zoom:1;        　　　　<zoom触发haslayout>
　　　　　　　　　　　　　　　　　　<上下margin会叠加分别给出margin-top>

             }

             .item{

                 height: 50px;

                 background-color: red;

                 margin-top: 50px;

             }

             .mt100{

                 margin-top: 100px;

             }

         </style>

         <!--

             1、margin-top传递

                 触发BFC、haslayout

             2、上下margin叠压

                 尽量使用同一方向的margin，比如都设置top或者bottom，

         -->

     </head>

     <body>

         <div class="box">

             <div class="item"></div>

             <div class="item mt100"></div>

         </div>

     </body>

 </html>
相关文章
