新年快乐！
一、元素的水平方向的布局
元素在其父元素水平方向的位置由以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，水平布局必须满足以下等式：
以上7个值总和 = 其父元素内容区的宽度（必须满足）
以上等式必须成立，如果相加结果使等式不成立，则称为过度约束，等式会自动调整
调整情况： 如果七个值中没有为auto的情况，则浏览器会自动调整margin-right值以使等式成立
七个值中有三个值可以设置为auto
width
margin-left
margin-right
1、如果某个值为auto，则会自动调整为auto的那个值使得等式成立
2、如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为 auto的外边距会自动为0
3、如果将三个值都设置为auto，则外边距都是0，宽度最大
4、如果将两个外边距设置auto，宽度固定值，则会将外边距设置为相同的值
经常利用该特点使得一个元素在其父元素中水平居中
width:xxxpx;
margin:0 auto;
二、 元素的水平方向的布局
子元素在父元素的内容区中排列，如果子元素大小超过父元素，子元素会从父元素溢出
使用overflow属性来设置父元素如何处理溢出的子元素，在父元素中设置
可选值：
visible 默认值，子元素会从父元素中溢出，在父元素外部位置显示
hidden 隐藏，溢出的内容会被裁减，不会显示
scroll 生成两个滚动条，通过滚动条来查看完整内容
auto 根据需要生成滚动条
overflow-x 处理水平方向
overflow-y 处理垂直方向
三、垂直外边距的重叠（折叠）
相邻的垂直方向外边军会发生重叠现象
兄弟元素：
兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
特殊情况：
如果相邻的外边距一正一负，则取两者的和
如果相邻外边距都取负值，则取绝对值较大的
兄弟元素之间外边距的重叠，对于开发是有利的，所以不需要进行处理
父子元素：
父子元素间的相邻外边距，子元素的会传递给父元素（上外边距）
父子外边距的折叠会影响到页面布局，必须处理