爱站程序员基地CSS的水平布局
1、元素水平方向的布局
元素在其父元素水平方向的位置，由以下几个属性共同决定
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 个值中没有auto的情况，则浏览器自动调整 margin-right 使等式成立
– 这 7 个值中有三个值可以设置为auto
width（如果不写，默认为auto）
margin-left
margin-right
如果某个值为auto,则设置为auto的值自动调整，以使等式成立
如果将 width 和 margin-left、margin-right 设置为auto,则宽度调整为最大，外边距为0 ，如果将 margin-left、margin-right 设置为auto,宽度设置为固定值，则外边距自动调整为相同宽度（居中显示）
利用这个特性设置子元素在父元素水平居中：
实例：
width:200px;
margin:0 auto
<html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title></head><style>.box1{width: 1000px;height: 200px;border: red 10px solid;}.inner{width: 200px;height: 200px;background-color: salmon;/* 居中显示 */margin: 0 auto;}</style><body><div class=\"box1\"><div class=\"inner\"></div></div></body></html>
