6. 水平/垂直方向布局
6.1 水平方向布局
一般水平布局
-
元素在其父元素中水平方向的位置由以下等式决定：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right == [其父元素内容区的宽度] -
该等式两侧必须相等，若相加结果使等式不成立，则等式会根据下列规则自动调整
- width，margin-left，margin-right可以被设置为auto，作为自动调整的候选值
- 如果等式的7个值中没有值为auto，则自动调整margin-right值使等式满足
- 如果某一个值为auto，则会自动调整该值使等式成立
- 如果宽度和一个外边距设置为auto，则宽度变为最大值，外边距为0
- 如果两个外边距设置为auto，则会将外边距设置为相等的值
- 如果三个值都设置为auto，则宽度变为最大值，外边距为0
开启绝对定位后的水平布局
-
元素在其父元素中水平方向的位置由以下等式决定：
{left} + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + {right} == [其父元素内容区的宽度] -
规则和一般水平布局一样，但是margin-left/right被替换：
- 可以设置为auto的值 margin width left right
- 如果9个值中没有auto则自动调整right值以使等式满足
6.2 垂直方向布局
一般垂直方向布局
-
一般垂直方向布局相对水平方向来说要简单很多，只需要注意溢出(overflow)问题即可
-
如果子元素的大小超过了父元素，则子元素会从父元素中移除，需要使用overflow样式解决
语法：
overflow: visible：默认值，子元素会从父元素中直接溢出，在父元素的外部位置显示overflow: hidden：溢出内容将会被裁剪而不会显示overflow: scroll：生成两个滚动条，通过滚动条查看完整的内容overflow: auto：根据需要生成滚动条
开启绝对定位后的垂直方向布局
-
元素在其父元素中垂直方向的位置由以下等式决定，且必须满足：
top + margin-top + padding-top + border-top + height + border-bottom + padding-bottom + margin-bottom + bottom == [包含块的高度]