水平、垂直布局

1、水平布局

水平方向，有7个值可以改变盒子的大小以及位置

margin-left +border-left +padding-left +width+ padding-right +border-right+ margin-right=父元素内容区的宽度

浏览器规定：水平方向这7个值相加必须要等于其父元素内容区的宽度

0+0+0+100+0+0+0  ！= 600

如果这个7个值相加不等于父元素内容区的宽度，浏览器就会改变某些值，让其成立

我们管这个过程叫过度约束

浏览器如何调整：

  1、如果水平方向7个值中没有auto，默认调整的是margin-right

  0+0+0+100+0+0+500 = 600

  2、7个值当中，有3个值可以被设置为auto，分别是margin-left，width，margin-right

  （1）、1个auto  谁是auto就调整谁

  margin-left为auto，

    auto+0+0+100+0+0+0= 600   auto=500

  width为auto

    0+0+0+auto+0+0+0= 600   auto=600

  margin-right为auto

    0+0+0+100+0+0+auto= 600   auto=500

  （2）、2个auto

  margin-left，width为auto   调整width

     auto+0+0+auto+0+0+0px= 600  

  width，margin-right为auto  调整width

  margin-left，margin-right为auto  同时调整，各一半

    简写为：margin:0 auto;  可以让元素居中

  （3）、3个auto

  margin-left，width，margin-right为auto  调整的width

  总结：

     调整的顺序

     width>margin-right/margin-left

    margin:0 auto;  可以让元素居中,前提是width是固定的

2、垂直布局

默认情况下，父元素的高度是被内容撑开的，如果设置了，设置多少就是多少

      可以利用overflow属性，设置溢出内容

        可选值：

          visible  多余的内容正常显示  默认值

          hidden  裁剪多余

          auto    根据内容需要自动生成滚动条

          scroll  生成双向滚动条