水平布局：

margin-left+ border-left + padding-left+ width +padding-right+ border-right +margin-right

水平方向这7个值相加必须等于其父元素内容的宽度

30+5+20+100+20+5+？ = 600   如果出现不等于的情况，浏览器就会自己调整这7个值，从而让等式成立，这个过程叫过度约束

如何调整的

1、七个值当中，如果没有auto，那么就调整margin-right

2、有三个值可以设置auto    margin-left width  margin-right

       1个auto

      margin-left  margin-right  width

 如果有一个auto，其他的为固定值，那么浏览器就会调整这个auto

   2个auto

      margin-left width      调整width

      width  margin-right     调整width

      margin-left  margin-right    浏览器各调整一半，从而会让盒子水平居中

   3个auto

     margin-left width  margin-right   调整width

总结：

<style>
      .outer {
        width: 600px;
        height: 200px;
        border: 10px red solid;
      }
      .inner {
        width:100px;
        height: 100px;
        background-color: #bfa;
        border: 5px dashed green;
        padding: 0px;
        /* margin-left: auto;
        margin-right:auto; */
        margin: 0px auto;
      }
    </style>
        body>
    <div class="outer">
      <div class="inner"></div>
    </div>
  </body>

    只要width为auto，浏览器肯定会调整widthwidth>right>left