css框模型——正常文档流

虽然使用css布局有好长一段时间了，但是有时候在遇到一些各浏览器显示不一致的问题或设置了一些属性但显示的效果出乎自己的意料之外时，还是会缺乏自信和无力感。说到底还是对浏览器渲染引擎的工作机理理解的不透彻的缘故，因此这次花了几天的功夫，重新读了《css权威指南》这本书，虽然以前读过一遍，但这次再读还是有很多新的收获。

css的框模型分正常文档流和非正常文档流即浮动或定位框模型，在这里主要谈的是正常文档流的框模型。正常文档流的框模型又分块级元素框和行内元素，其中行内元素分非替换元素和替换元素。

一、几个重要的概念：

• 框模型：css假定每个元素都会生成一个或多个矩形框，称为元素框。各元素框的中心是内容区，内容区周围是可选的内边距、边框和外边距。
• 正常文档流：元素在布局摆放上根据其在文档中的顺序，从左到右，从上到下显示，要让一个元素脱离文档流，唯一方法是浮动或定位。
• 元素布局：每个元素都相对于包含块摆放，包含快是最近的块级祖先元素、表单元格或行内块祖先元素框的内容边界构成。
• 内容的背景会应用到内边距，如果边框是虚线框，线条中间的间隙会透出背景色，内边距不能为负值，外边距可以为负。

二、块级元素框模型

　　块级元素框模型分水平和垂直两部分，具体的布局上又会因非替换元素和替换元素有细微差别。

　　1.水平框模型计算规则

• 块级元素框的总宽度等于父元素的width，即margin-left, border-left, padding-left, width, padding-right, border-right, margin-right这七个属性的和等于元素包含块的width。这七个属性中，只有三个属性可以设置为auto，元素内容的width及左右外边距，其他属性如border，padding如不设置，默认为0。
• width, margin-left, margin-right 设为auto时计算规则如下：
  • 如果三个属性中有两个有确定的值，而另外一个为auto，那么这个为auto的属性会由浏览器计算确定一个长度，从而使元素框的总宽度等于父元素的width。
  • 当三个属性都设为确定的值时，浏览器还是会自动将margin-right设为auto，最终由浏览器给margin-right计算一个值，使元素框的总宽度等于父元素的width
  • 这三个属性中如果有两个为auto，另外一个为确定值时，分两种情况：如果width为确定值，margin为auto则，margin会平分剩余值，使元素居中显示；如果有一个margin为auto，width为auto，则浏览器会将这个为auto的margin设为0，width会根据计算设定需要的值使总宽度等于父元素的width。
  • 对于替换元素如img元素，有一点不同，width为auto时会设置为内容的固有宽度，如果设定了高度，宽度会等比缩放为一个特定的值。

　　2.垂直框模型计算规则：

• 元素的高度默认由内容决定，可显示设定高度，当内容高度大于元素高度时，会根据overflow属性处理溢出情况。
• 和水平框模型一样，也有七个属性，这七个属性的总和等于包含块的height值，与水平框模型不同的是，当将margin设为auto时，浏览器会将它们重置为0.
• 百分数高度：块级元素的height设为一个百分数，这个元素的height将计算为包含块高度的一个百分数，如果包含块height为auto，则百分数高度会重置为auto。
• 如果包含块没有padding或border，在个子元素块设定margin时，这个margin会超出包含块的内容区，会出现子元素的外边距与父元素外边发生合并的问题。
• 相邻的块状元素垂直margin会发生合并。

三、行内元素框模型

　　1.非替换元素和替换元素在行内元素的框模型处理上会不同。

　　2.行内元素几个重要概念和规则：　　　

　　　　a)  匿名文本：指所有未包含在行内元素中的字符串，如<p> I’m <em> so</em>happy!</p>中，文本I’m  和 happy都是匿名文本。

　　　　b)  em框：em框在字体中定义，也称为字符框。实际字形可能比其em框更高或更矮，font-size值确定了em框的高度。

　　　　c)  内容区：对于非替换元素是元素中各字符的em框串在一起构成的框，对于替换元素是元素的固有高度再加上可能有得外边距，边框或内边距。

　　　　d) 行间距：是font-size和line-height值之差，这个差分成两半分别应用于内容区的顶部和底部，行间距只应用于非替换元素。

　　　　e) 行内框：对于非替换元素，元素行内框的高度刚好等于line-height，对于替换元素，行内框高度恰好等于内容区的高度。

　　　　f) 行框：包含该行中出现的行内框的最高点和最低点的最小框，行框的上边界是最高行内框的上边界，行框的下边界是最低行内狂的下边界。

　　　  g) 非替换元素的内边距、边框和外边距对行内元素或其生成的框没有垂直效果，不会影响行内框或行框的高度。

　　　  h) 替换元素的外边距和边框会影响该元素行内框的高度。

　　　　i) 行内框在行中根据vertical-align属性值垂直对齐

　　3.构造一个行框的计算过程如下：

　　　　a) 先按以下步骤确定行中各元素行内框的高度：

 　　　　　　i. 得到行中非替换元素及匿名文本元素所有文本的font-size值和line-height值，再将line-height减去font-size就得到了框的行间距，将行间距除以2，分别应用到em框的顶部和底部。

　　　　　　 ii. 得到各替换元素的height , margin-top , margin-bottom , padding-top , padding-bottom , border-top-width , border-bottom-width值，把它们加在一起。

　　　　b) 对于各内容区，确定它在整行基线的上方和下方分别超出多少。这个任务并不容易，你必须知道各元素及匿名文本各部分的基线位置，还要知道该行本身基线的位置，然后把它们对齐，对于替换元素，要将其底边放在整行的基线上。

　　　　c) 对于指定了vertical-align值得元素，确定其垂直偏移量。由此可知该元素的行内框要向上或向下移动多远，并改变元素在基线上方或下方超出的距离。

　　　　d) 既然已经知道了所有行内框会放在哪里，再来计算最后行框高度。只需将基线与最高行内框顶端之间的距离加上基线与最低行内框底端之间的距离

　　4.vertical-align各关键字的作用如下：

　　　　a) top  将元素行内框的顶端与包含该元素的行框顶端对齐

　　　　b) bottom  将元素行内框的底端与包含该元素的行框的底端对齐

　　　　c) text-top  将元素行内框的顶端与父元素内容区的顶端对齐（什么是父元素内容区？？）

　　　　d) text-bottom   将元素行内框的底端与父元素内容区的底端对齐

　　　　e) middle   将元素行内框的垂直中点与父元素基线上0.5ex处的一点对齐

　　　　f) super   将元素的内容区和行内框上移。上移的距离未指定，可能因用户代理的不同而不同

　　　　g) sub   与super相同，只不过元素会下移

　　　　h) 百分数值   将元素上移或下移一定距离，这个距离由相对于元素line-height值指定的一个百分数确定。

　　　　i) 确定的像素值，正值上移，负值下移动。

1. 行内非替换元素的padding ，border，margin’不影响行框的高度，但会影响元素的显示。行内替换元素的内边距和边框和外边距会影响行框的高度
2. 行内替换元素img行内框的底端会相对父元素的基线对齐，因此在其与父元素的底边之间会有几个像素的空隙，解决这个问题，可以将font-size和line-height均设为1px 或将img设为块元素display:block
3. display 为inline-block的元素，会作为行内替换元素放在行中，行内块元素的底端默认地位于文本行的基线上