HTML中的水平布局

元素的水平方向的布局：

                元素在其父元素中水平方向的位置由以下几个属性共同决定

                    maigin-left

                    border-left

                    padding-left

                    width

                    padding-right

                    border-right

                    maigin-right

                一个元素在其父元素中，他的水平布局必须满足以下的等式

                    maigin-left

                    border-left

                    padding-left

                    width

                    padding-right

                    border-right

                    maigin-right

                    上述所有值和，必须等于 其父元素内容区的宽度

 

                    0+0+0+200+0+0+0 = 800

                    等式如果不成立，则称为过度约束，则等式会自动调整

                     调整情况：

                     如果这七个值中没有为 auto 的情况，则浏览器会台哦正margin-right值以使等式成立

                     这七个值由三个值可以设置为auto

                     width

                     margin-left

                     margin-right

                     如果某个值为auto，则会自动调整auto那个值以是等式成立

                     width的值默认为auto

                     如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大设置为auto的外边距会自动为0

                     如果将三个值都设置会auto，则外边距都为0，宽度最大

                     所以我们能经常利用这个特点来使一个元素在其父元素中水平居中

                     实例：

                     width：xxx px；

                     margin： 0 auto

  .outer{
         width: 800px;
         height: 200px;
         border: 10px red solid;
        }
  .inner{
          width: auto;
          height: 200px;
          background-color: blue;
          margin-right: 200px;
          margin-left: 200px;
         }

；