常规上盒模型图片，这是基础。
css中少数几个需要绝对满足的等式：
margin-left + border + padding-left + width + padding-right + border + margin-right =width（父元素内容区content宽度）
注意在该等式中margin外边距的值可以是负值。
这个原理解释了为什么在水平布局的时候设置margin-right无论设置多少都无法生效的问题
根据上述等式我们依照顺序写出如下范例
margin-left + border + padding-left + width + padding-right + border + margin-right =width（父元素内容区content宽度）
0 + 0 + 0 + 200 + 0 + 0 = 800
该等式反映了，实际css设置值时，父元素宽度为800px， 子元素宽度为200px，边框，内边距，外边距都设置为默认值，即为0的情况，此时该等式不成立，等式不成立的情况称为过度约束。
等式中没有设置任何值为auto得情况下，会默认调整margin-right值，即等式左边最后一个值来强制等式成立。
上述示例中由于等式不成立，于是调整margin-right值从0 到 600
0 + 0 + 0 + 200 + 0 + 600 = 800
如果等式中有值设置为auto（可以成为auto的值有：margin-left 、margin-right、width），那么遇到过度约束的情况时，优先调整auto的值来使等式成立。
等式中有存在auto值有三种比较特殊的情况：
- 如果将一个宽度和外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会设置为0.
- 如果三个值，都设置为auto，则外边距都是0，宽度最大。
- 如果将两个外边距都设置为auto，宽度值设置为固定值，则会将外边距设置为相同的值
eg：如何使一个元素在其父元素中水平居中
利用上述第三种特殊情况
.box{
magrin:0 auto;
width:100px;
}
