盒子模型（2）

  接上篇简书，初步讲了盒子模型的内容区，内边距，边框以及外边距，那这些东西都有什么用处呢？

  其实盒子模型最重要的作用就是在网页制作中方便布局，而上篇简书讲的，内容区，内边距，边框，外边距这些元素都是为布局而服务的，那我们今天这篇简书就讲一讲盒子模型的布局。

一，水平布局

  水平布局由以下属性组成:

margin-left

border-left

padding-left

width

padding-right

border-right

margin-right

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

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

在这7个属性中margin-left默认为auto，即可以把他认为是一个变量，这个变量使得等式一直等于其父元素内容区的宽度

例，如果父元素内容区为800px，一个子元素只有width是200px其他属性都为0，则此时为了保证等式成立，则margin-right会默认为600px。

  需要注意的是：其他元素可以手动设为auto，此时margin-right就不会是默认的auto值了。

  如果将两个外边距都设置为auto，宽度为固定值，则会将外边距设置为相同的值

  我们可以利用这个特点来使一个元素在七父元素中水平居中

    用法：width：xxxpx；

              margin：0 auto；