[JavaScript知识库]盒子模型--水平布局

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

1）margin-left

2）margin-left

3）padding-left

4）width

5）padding-right

6）border-right

7）margin-right

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

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

PS：若以上等式不满足，则称为过渡约束，则等式会自动调整。

调整的各种情况如下：

1. 如果这七个值没有auto的情况下，则浏览器会自动调整margin-right的值使得等式成立。

（有auto的三个值：width(默认情况下是auto）、margin-left和margin-right）

2. 如果宽度和外边距设置为auto的情况下，width值会调整到最大

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

4. 如果将两个边距设置为auto，width设置一个固定值，则两个边距设置为相同的值。（可达到居中的效果）