CSS垂直布局 

1 <!DOCTYPE html>                                                    
  2 <html lang="en">
  3 <head>         
  4     <meta charset="UTF-8">
  5     <title></title>      
  6     <style>    
  7     .box1,.box2{         
  8         width:200px;     
  9         height:200px;    
 10     }          
 11     .box1{     
 12         background-color:orange;
 13         /*设置一个下外边距*/   
 14         margin-bottom:100px;   
 15                
 16     }          
 17     .box2{     
 18         background-color:yellow;
 19         /*设置一个上外边距*/   
 20         margin-top:100px;
 21                
 22     }          
 23     .box3{     
 24         width:200px;     
 25         height:100px;    
 26         background-color:orange;
 27         padding-top:100px;     
 28                
 29     }          
 30     .box4{     
 31         width:100px;     
 32         height:100px;    
 33         background-color:red;  
 34     }          
 35     /*         
 36     垂直外边距的重叠(折叠)     
 37         -相邻的垂直方向的外边距会发生重叠现象
 38         -兄弟元素        
 39             -兄弟元素之间的相邻垂直外边距会取两者中的较大值(两者都>    是正数)
 40             -特殊情况    
 41                 -如果相邻的外边距是一正一负则取两者的和
 42                 -如果响铃的外边距都是负值，则取两者中绝对值较大的
 43         兄弟元素建相邻外边距的重叠，对于开发是有利的，所以我们不需>    要进行处理
 44         -父子元素        
 45             -父子元素间相邻外边距，子元素会传递给父元素(上外边距)
 46             -父子元素外边距的折叠会影响页面的布局，必须要进行处理
 47             处理方法：   
 48                 -给父元素添加一个上边框    
 49                 -给父元素添加一个内边距，并且从父元素的高度上减去对
    应的值也可以实现相同的效果
 50                
 51      */        
 52     </style>   
 53 </head>        
 54 <body>         
 55     <div class="box1"></div>   
 56     <div class="box2"></div>   
 57     <div class="box3">   
58         <div class="box4"></div>
 59     </div>
 60 </body>
 61 </html>

 

posted @ 2020-11-11 16:43  zou-ting-rong  阅读(274)  评论(0)  编辑  收藏  举报