html-盒子模型的水平布局

 水平方向有七个值。

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

   浏览器的规则：

   水平方向的七个值相加必须等于其父元素内容区的宽度，如果不等于，

   那么浏览器就会自动调整七个值中的某值，让其成立，这就叫过度约束

10+10+20+100+20+10+10  ==600   ？？

   如何调整：

     1、七个值中如果没有auto，那么浏览器默认调整的是margin-right

     10+10+20+100+20+10+ 430 ==600

     2、七个值中如果有auto，则浏览器就会调整auto

       可以设置auto大小的属性，是margin-left  width  margin-right  

        (1) 1个auto，谁是auto，浏览器就调整谁

      （2）2个auto

          margin-left  width auto   margin-right固定值  调整width

          width  margin-right  auto   margin-left固定值  调整width

          margin-left  margin-right  auto   width 固定值  左右外边距平分，盒子会居中显示

      （3）3个auto