CSS水平布局 

 1 <!DOCTYPE html>   
  2 <html lang="en">  
  3 <head>            
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>       
  7     .outer{       
  8         width:800px;
  9         height:200px;    
 10         border:10px red solid;
 11                   
 12     }             
 13     .inner{       
 14         width:200px;
 15         height:180px;                                              
 16         background:orange;
 17         margin-left:auto;
 18         margin-right:auto;
 19         border:10px yellow solid;
 20     }             
 21     /*            
 22     元素的水平方向的布局：
 23         -元素在其父元素中的水平方向的位置由以下几个属性共同决定：
 24             -margin-left 
 25             -border-left 
 26             -padding-left
 27             -width
 28             -padding-right
 29             -border-right
 30             -margin-right
 31         一个元素在其父元素中，水平布局必须满足以下等式
 32             margin-left+border-left+padding-left+width+padding-righ    t+border-right+margin-right = 其父元素的内容区的宽度
 33         0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
 34         以上等式必须满足，如果相加结果使等式不成立，则称为过度约束>    ，则等式会自动调整
 35         -调整的情况：    
 36             -如果这七个值中没有auto的情况，则浏览器会自动调节margin    -right值以使等式成立
 37         这七个值中有三个值可设置为auto:
 38             -width
 39             -margin-left 
 40             -maring-right
 41             -如果某个值为auto，则会自动调整auto那个值以使等式成立
 42             -如果将一个宽度和一个外边距设置为auto，则宽度会调整到最
    大
 43             -如果将三个值都设置为auto，则外边距都是0，宽度最大(撑满
    整个父元素)
 44             -如果将两个外边距设置为auto宽度固定值，则子元素在父元素
    中水平居中                
 45                   
 46                   
 47                   
 48      */           
 49                   
 50                   
 51     </style>      
 52 </head>           
 53 <body>            
 54     <div class="outer">  
55         <div class="inner"></div>
 56     </div>
 57 </body>
 58 </html>

 

posted @ 2020-11-10 21:53  zou-ting-rong  阅读(400)  评论(0)  编辑  收藏  举报