有关格式化的一些笔记，主要来自于css权威指南，还有一些是自己的理解

##一、基本信息##

1. 非替换元素：元素的内容包含在文档中（比如< p >< /p >内容就在文档的内部）
2. 替换元素：用作其他内容占位符的一个元素（典型的有img < input >）
3. 块级元素：元素在正常流中会在其边框之前和之后生成换行[display:block]
4. 行内元素：元素在之前后之后不会生生换行[display:inline]
5. 包含块：一般由最近的块级祖先框、表单元格或者是行内快祖先框的内容边界构成

##二、行内元素##

###2.1 基本信息###

1. 内容区、行内框、行框　（根据是否为替换元素分别有不同的情况）

###2.2 非替换元素的行内格式化###

####2.2.1 基本信息#####

1. 内容区：可以简单理解为就是由文本框内部的字符所构成的一个框，差不多就是字符框的意思
2. 行间距：由font-size和line-height来决定，有两个数值的差值分别应用到内容框的上下部分
3. 行内框：通过改变line-height来改变行间距来进行变化，他的行内框的大小等于line-height的数值
4. 行框：包含该行中出现的行内框的最高点和最底点的最小框

####2.2.2 构建过程####

step1:首先得到line-height数值（通过继承或者是本身计算，如是百分比之类的则是根据本身的font-size进行计算；如果是继承父元素的em之类的单位，则以父元素font-size进行计算，可以通过继承line-height:1这样的倍数）

step2:构建行内框，计算方式(line-height - font-size)/2分别应用到内容框的上下两侧，注意这个数值可能为负，所以会出现如下两种情况
－－－－－－   －－－－－－
行－－－－－   内－－－－
 内容区     行高
高－－－－－   容－－－－
－－－－－－   －－－－－－
行内框决定了行框的的排步

step3:vertical-align定义行内元素的基线相对于钙元素所在行的基线的垂直方式，会影响行内框的顶部或者底部的偏移像素；基线不是汉字下断沿而是英文字母的下端沿。
－－－顶线－－－
－－－中线－－－
－－－基线－－－
－－－底线－－－
其中的属性vertical-align:bottom是将元素的行内框的底端与行框的底端对齐

####2.2.3　其他####

1. 行内元素的边框边界由font-size而不是line-height决定，边框由内容决定
2. 内边距、外边距、边框不会影响行高(当然是垂直的方向，对于左右两侧的方向则是还是会有影响的)
3. 行内元素的背景应用于内容区以及所有内边距，行内元素的边框要包围内容区及所有内边距和边框；所以行内元素内边距会影响到该元素边框所包围的区域，但是不会影响到行内框的高度

###2.3 替换元素的行内格式化###

####2.3.1 基本信息####

1. 内容区：元素周围固有的高度再加上可能有的外边距、边框、内边距
2. 行间距：不应用到非替换元素
3. 行内框：就是内容区的高度
4. 行框：同前面提到的行框一样padding: 14px;

###2.3.2 细节###

1. 由于内容区是由内外边＋边框决定，所以都会影响到行框的形成
2. 对于替换元素的line-height虽然对行框的形成没有多少影响，但是这个数值在后续如果进行设置vertical-aligin会有影响，因为vertical-align是由line-height进行计算的
3. 默认的行内替换元素位于基线上

##三、块级元素##

###3.1 水平格式化###

1. 规则：margin[left+right] + border[left+right] +padding[left+right] +width应为父元素的内容区
2. 使用auto（只有俩margin和width可以设定）
   (1)三个都为非auto，当格式化属性过分受限的时候，调整margin-right进行适应；(2)margin为非auto，width为auto，调整width来满足前面的规则；
   (3)某一个外边距以及width为auto，则设置auto的那个外边距调整为0；
   (4)全为auto，则宽尽可能宽
   (5)俩margin auto，则居中
3. 负外边距
   总体还是需要满足规则，若水平属性过分受限，重置外边距
4. 替换元素
   不同的一点，若width为auto，则元素的宽度则是内容的固有宽度

###3.2 垂直格式化###

padding要是一个非负数,对于内容需要的高度大于所设定的高度的时候，由用户代理的具体行为将取决于overflow的属性的设定

1. 垂直属性
   (1)对于正常流中的一个块元素的margin-top或者是margin-bottom设置为auto，它会自动计算为0，所以达不到居住的效果，（但对于那些定位的元素来说，上下边距为auto的时候，它所处理的方式不同）
   (2)百分数高度：对于height的百分数是相对于父元素的height进行计算的，而margin-top和margin-bottom则是按照父元素的width进行计算的。这点需要注意！！
2. auto高度
   (1).若正常流元素设置为height：auto那么显示时高度将恰好足以包含其内联内容包括文本的行盒
   (2).若正常流元素设置为height：auto，而且有块级子元素
    a.若子元素有上下外边框或上下内边距，则告诉是从其最高子元素的上外边距边界到最低子元素的下外边距；
    b.否则，高度则是从子元素的最高外边框边界到最低子元素的外边框距离，此时会出现子元素的外边距超出包含这些子元素的元素
3. 合并垂直外边距
   只应用于外边距的合并，如果元素有内边距或者是边框，那么就不会发生合并的现象
4. 负外边距
   (1).若垂直外边距都设置为负数，那么浏览器会取俩外边距绝对值的最大值
   (2).若一个正外边距与一个负外边距合并，会从正外边距减去这个负外边距的绝对值
   (3).如果有多个正或者负的边距叠加（大于两个的），此时应该先取出其中最大的一个正的和负的进行计算，而不是单纯的将几个进行叠加
   (4).对于那些由于负外边距而导致元素重叠的情况下，如果有背景色，那么浏览器会按照这些元素在文档中先后出现的顺序进行显示

参考资料：《css权威指南》