盒子的水平布局和垂直布局
作者：互联网
一、元素的水平方向布局
元素在其父元素中水平方向的位置由以下几个属性共同决定
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= 其父元素内容区的宽度（必须满足）
以上等式必须成立，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
调整情况：
① 如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right值以使等式 满足
这七个值中有三个值可以设置成auto
width
margin-left
margin-right
② 如果某个值为auto，则会自动调整为auto的那个值以使等式成立
③ 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的 外边距会自动为0
④ 如果将三个值都设置为auto，则外边距都是0，宽度最大
⑤ 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
所以我们经常利用这个特点来使一个元素在其父元素中水平居中
示例：
width：xxxpx；
margin：0 auto；
二、元素的垂直方向布局
子元素是在父元素的内容区中排列的
如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素
可选值：
visible：默认值 子元素会从父元素中溢出，在父元素外部的位置显示
hidden：溢出的内容将会被裁剪不会显示
scroll：生成两个滚动条，通过滚动条来查看完整的内容
auto：根据需要生成滚动条
overflow-x：单独处理水平方向
overflow-y：单独处理垂直方向
标签：布局,盒子,auto,元素,垂直,right,等式,margin,left 来源： https://blog.csdn.net/WQuestion/article/details/120547704