替换元素、非替换元素、行内元素框模型

对于以前比较模糊的几个概念：替换元素、非替换元素、行内元素框模型，做了如下总结

替换元素：

以前对替换元素没有概念，今天查了下资料：替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。
img、input、textarea、select、object 等都是替换元素，
这些元素都没有实际的内容。

替换元素可以增加行框高度，但不增加line-height，内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。
要想替换元素居中，可以设置line-height = height， vertral-align = middle。

非替换元素：

大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。
比如 p的内容、label的内容；浏览器将把这段内容直接显示出来。

非替换元素添加padding-top或padding-bottom，不影响行框高度，但内容区高度会变化，margin-top，margin-bottom对行框没有任何影响。
添加左右边距会影响非替换元素水平位置。要使非替换元素在父元素框内居中，可以设定line-height = 父元素框的高度。

行内元素里的一些东西：

行内布局是一个很大的坑，今天总结了一下行内元素框模型，有下面几个方面：
- 匿名文本：未被包含在行内元素的字符串

• em框：em框在字体中定义，也被称为字符框

• 内容区：内容区可以是元素中各个字符的em框串在一起构成的框，也可以由元素中字符字形描述的框。

• 行间距：font-size与line-height之差/2 就是行间距

• 行内框：通过向内容区增加行间距来描述，对于非替换元素行内框刚好等于line-height

• 行框：这是包含该行中出现的行内框的最高点和最低点的最小框，意思是行框上边界要高于最高行内框，最低也要大于最低的行内框