盒子的水平布局：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>盒子的水平布局</title><style>.outer{width: 800px;height: 200px;border: 10px red solid;}.inner{width: 200px;height: 200px;background-color: #BBFFAA;margin-left: 60px;/*元素的水平方向的布局：元素在其父元素中水平方向的位置由以下几个属性共同决定：margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargin-right一个元素在其父元素中，水平布局必须满足以下的等式：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整-调整的情况：-如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right值以使等式满足-这七个值中有三个值可以设置为autowidthmargin-leftmargin-right如果将一个外边距和宽度，设置为auto，则宽度会调到最大，外边距最大如果将两个外边距设置为auto，宽度为固定值，则会将外边距设置为相同的值’所以我们经常利用这个特点来使一个元素在其父元素中水平居中示例：width:xxxpx;margin:0 auto;*/}</style></head><body><div class="outer"><div class="inner"></div></div></body></html>
