盒子模型布局

水平布局

元素的水平布局有几个属性共同决定

               margin-left  border-left padding-left width padding-right boder-right......

           一个元素在其父元素中，水平方向的等式

              margin-left + border-left+ padding-left width .........  

             =父元素宽度

            0 +0 +0 +100 +0 +0 +0 =400

           以上等式满足，如果不满足，则浏览器会自动调整，这个叫过度约束

.inner{
         width: 100px;
         height: 100px;
         background-color: red;
         margin-right:auto;
         /*margin-left:auto;*/
         /* boder:10px black auto */
     }

-浏览器调整

              1：如果七个值没有auto，那么浏览器会自动调整margin-right使我们等式满足

              2:这七个值 width margin-left 可以设置 auto

                 如果有设置auto，浏览器会自动调整auto值

                 如果设置margin-left为auto

                 例子：30