盒模型水平和垂直布局

水平布局

元素在其父元素水平方向的位置由如下几个属性共同决定：
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 = 父元素的内容区宽度
如果出现等式不满足的状况，称为过度约束，浏览器会自动调整等式。调整的方式如下：
1.如果7个值中没有定义为auto的值，则自动调整margin-right的值，使得等式成立。
2.如果7个值中有值定义为auto，则调整auto的那个值，使得等式成立。可以被定义为auto的值分别是width、margin-left、margin-right。具体调整方式如下：

1. 将宽度和一个外边距设定为auto，则宽度会调整到最大，设置为auto的外边距为自动为0
2. 如果将3个值都设定为auto，则外边距都是0，宽度会调整到最大
3. 如果将两个外边距都设定为auto，则会将外边距设定为相同的值，会让其相对于父元素居中

/* 设定子元素内容区宽度为100px，相对于父元素居中 */
width: 100px;
margin: auto;

垂直布局

子元素是在父元素的内容区中排列的，如果出现子元素的大小超过了父元素，则子元素会从父元素中溢出。可以使用overflow来设置溢出时候如果处理。设定情况如下：

1. visible：默认值，子元素会从父元素中溢出，在父元素的外部显示
2. hidden：溢出的内容将会被裁减，只显示父元素大小部分
3. scroll：生成两个滚动条，通过滚动条来查看完整的内容
4. auto：根据需要生成滚动条

垂直外边距的折叠

相邻的垂直方向外边距会发生折叠现象，折叠的规则如下：

兄弟元素

1. 如果两者的相邻垂直外边距都是正值，取两者之间的最大值
2. 如果两者的相邻垂直外边距一正一负，取两者相加之和
3. 如果两者的相邻垂直外边距都是负值，取两者之间绝对值较大的

父子元素
父子元素间相邻的上外边距，子元素的会传递给父元素。父子元素的外边距折叠会影响到页面的布局，必须进行处理。