盒子水平和垂直方向的布局
作者：互联网
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 = 其父元素内容区的宽度
- 如果相加结果使等式不成立，则称为过度约束，则等式会自动调整(可添加auto的只有width，margin-left，margin-right)
| 等式不成立情况调整 |
|---|
| 如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足 |
| 如果某个值为auto，则会自动调整为auto的那个值以使等式成立 |
| 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值 |
| 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0 |
| 如果将三个值都设置为auto，则外边距都是0，宽度最大 |
2、元素垂直方向的布局
- 默认情况下父元素的高度被内容撑开
- 子元素是在父元素的内容区中排列的， 如果子元素的大小超过了父元素，则子元素会从父元素中溢出。
- 解决溢出的方法：使用 overflow 属性来设置父元素处理溢出的子元素
| overflow可选值： |
|---|
| visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示 |
| hidden 溢出内容将会被裁剪不会显示 |
| scroll 生成两个滚动条，通过滚动条来查看完整的内容 |
| auto 根据需要生成滚动条 |
标签：布局,盒子,auto,元素,垂直,right,等式,margin,left 来源： https://www.cnblogs.com/jj-forest/p/15020515.html