元素基本框的生成过程

1. 先判断一个元素是块级元素（Block-level element）还是行内元素（Inline-level element）

1.1 假如元素是一个块级元素，先判断它是一个非替换元素（non-replaced element）还是替换元素（replaced element）

1.1.1 假如元素是一个非替换元素，则依次对其进行水平和垂直格式化

水平格式化：

1. 元素的左右外边距和宽度可以取值为auto，设置为auto的属性会取得一个尽可能大的值，另外的元素左右外边距和元素左右边框宽度要么设置为一个具体的值，要么设置为默认的宽度：0（不显示）
2. “7大水平属性（margin–left, border-left, padding-left, width, padding-right, border-right, margin-right）”相加一定等于父元素的内容区宽度
3. 当7水平属性之和大于父元素内容区宽度时，会造成属性的过分受限（Overconstrained），强制元素的右外边距为auto（在从左向右的正常流中）
4. 元素的左右外边距为auto，并且具有一个具体的宽度值时，会使元素相对于父元素居中
5. 元素的左右外边距和宽度都为auto时，两个外边距会被设置为0，width为auto
6. 元素的外边距可以为负，依然按照规则2进行计算，这可能会造成元素的位置偏离其父元素

垂直格式化：

1. 元素的上下外边距和高度可以取值为auto，设置为auto的属性会取得一个尽可能大的值，另外的元素上下外边距和元素上下边框宽度要么设置为一个具体的值，要么设置为默认的宽度：0（不显示）
2. “7大垂直属性”相加一定等于父元素的内容区高度
3. 元素的高度值设为auto时，显示时期高度将恰好足以包含它的内联内容的行盒。对于只存在上下外边距的子元素，元素的高度会恰好包含子元素的内容区（这会造成子元素的外边距超出父元素内容区的效果，显式设置子元素的边框或内边距可以解决这个问题）
4. 可以为元素显式的设置高度。当高度值大于显示内容所需的高度时，多余的高度会产生一个类似下内边距的效果；相反，当高度值太小不足以包含所有显示内容时，可以通过overflow设置用户代理对多余部分的呈现方式（隐藏或显示一个滚动条等）
5. 无法通过设置元素的上下外边距为auto来达到元素垂直居中的效果，因为这时候元素的上下外边距会被计算为0。在这里，设置元素垂直居中的方法是，将元素的上下外边距对设置为（父元素的宽度 – 元素宽度）/2的值。（在元素不存在边框和内边距的情况下）
6. 垂直外边距会进行合并，值较大的外边距会覆盖较小的。对于负外边距，会去绝对值较大的那一个，而如果是一正一负，则取正外边距减去负外边距的绝对值

1.1.2 假如元素是一个替换元素，则依次对其进行水平和垂直格式化

水平格式化：

1. 替换元素的所有水平格式化规则与非替换元素相同
2. 当替换元素的width设置为auto时，元素的宽度会被设置为它的固有宽度（比如一个100*20的图片，固有宽度就是100）

垂直格式化：

1. 原理同替换元素的水平格式化

1.2 假如元素是一个行内元素，先判断它是一个非替换元素还是替换元素

1.2.1 假如元素是一个非替换元素，则按照以下规则进行格式化

1. 根据font-size的值确定字符em框的高度，字符的em框串在一起构成内容区
2. 确定咯内容区在整行基线上分别超出了多少
3. line-height的值与font-size的值想减得到行间距（leading），将行间距除以2分别应用到内容区的顶部和底部，这就构成了行内框
4. 如果设置了元素的vertical-align值，则把行内框向上或向下移动相应的偏移量
5. 基线到最高行内框的距离加上最低行内框的距离等于行框的高度

• 可以将line-height设置为一个缩放因子，这是个不带单位的数值，它会逐层传递，与各层的元素的font-size值相乘
• 外边距只会作用于行内元素的两端
• 内边距和边框不会影响内容区的形状，但是会改变元素行内框的高度（存在背景色或边框时可能造成多行内容的重叠）

1.2.2 假如元素是一个替换元素，则按照以下规则进行格式化

1. 行间距不会作用于替换元素
2. 把替换元素的height, margin-top, margin-bottom, border-top, border-bottom, padding-top, padding-bottom相加得到元素的行内框高度
3. 将替换元素的底边放在整行基线上
4. 如果设置了元素的vertical-align值，则把行内框向上或向下移动相应的偏移量
5. 基线到最高行内框的距离加上最低行内框的距离等于行框的高度

• 替换元素会增加行框的高度，但不会影响line-height的值
• vertical-align的百分数值要相对于元素的line-height来计算