2020-08-19（盒子模型-水平/垂直方向的布局）

一、元素的水平方向的布局：
元素在其父元素中水平方向的位置由以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-rignt

一个元素在其父元素中，水平布局必须要满足以下的等式：
margin-left+border-left+padding-left+width+padding-right+border-right+margin-rignt = 其父元素内容区的宽度

以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，等式会自动调整
调整的情况：

• 如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right的值
• 若这七个值中有这三个值为auto的情况：width、margin-left、margin-right

如果某个值为auto，则会自动调整为auto的那个值使等式成立

如果将一个宽度和一个外边距设置为auto，则宽度会被调整为最大，设置为auto的那个外边距为0

如果将三个值都设置为auto，则外边距都是0，宽度最大

如果将两个外边距设置为auto，宽度为固定值，则会自动将外边距设置为相同的值
所以我们经常利用这个特点来使一个元素在其父元素中水平居中
示例：

width:20px;
margin:0 auto;

注意：margin的值可以为负值，上述等式一定要满足，即使margin为负值。

二、垂直方向的布局
默认情况下，父元素的高度被内容撑开

子元素是在元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出，使用overflow属性来设置父元素如何处理溢出的子元素
可选值：
visible，默认值 子元素会从父元素中溢出，在父元素外部显示
hidden，溢出内容将会被裁剪不显示
scroll，生成垂直水平方向两个滚动条，通过滚动条来查看完整的内容
auto，根据需要生成水平或垂直方向滚动条

overflow-x：处理水平方向的溢出
overflow-y：处理垂直方向的溢出