定位概述：对可视化格式模型的一些理解

可视化格式模型：

        盒子模型是CSS中所有元素产生的box自身构成，而可视化格式模型则是把这些box，按照规则摆放到页面上，也就是通常所说的布局。换句话说，可视化格式模型是整个页面的模型，这个模型规定了怎么在页面里摆放box、box相互作用，属于CSS最为核心的概念之一。官方的说法是，它规定了用户端在媒介中如何处理文档树(document tree)。

        CSS中有3种基本的定位机制：普通流、浮动、绝对定位。

        行内框在一行中水平排列。可以使用水平内边距、边框和外边距调整它们的水平间距。但是，垂直内边距、边框和外边距不影响行内框的高度。同样，在行内框上设置显示的高度或宽度也没有影响。由一行形成的水平框称为行框，行框的高度总是足以容纳它包含的所有的所有行内框。但是，设置行高可以增加这个框的高度。因此，修改行内框尺寸的唯一方法是修改行高或者水平边框、内边距或外边距。

 上图代表了框模型中的行框。line-height属性设置行间的距离(行高)。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height和font-size的计算值之差(在CSS中成为“行间距”)分为两半，分别加到一个文本内容的顶部和底部。可以包含这些内容的最小框就是行框。

区别css中的行框和行内框：文本行中的每个元素都会生成一个内容区。这个内容区则会生成一个行内框（inline box），当一行中的所有内容均已生成了行内框，那么接下来在行框的构造中就会考虑这些行内框，行框的高度要足以包含最高行内框的顶端和最低行内框的底端。 

内容区：顶线和底线包含的区域；

行内框：每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域。设定行高时行内框高度不变，半行距分别增加／减少到行框的上下两边。简单说来，行内框就是行内元素的边框。

行框：是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值。当有多行内容时，每行都会有自己的行框。

记住：所有元素都是框，所以都具有框模型中规定的所有属性，但通过CSS自定义的某些属性对于某些元素来说是没有效果的，也就是说浏览器会忽略你设定的某些属性（针对行内非替换元素）。

CSS中元素的分类：

    １．替换和不可替换元素，从元素本身的特点来讲分为替换和不可替换元素

            替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。例：<img src="img.jpg"/>　那么它由标签元素img和属性src来决定显示的内容，还有<input type="text"/>如果text换成其他属性值，input就会显示不同的样子，这也是input和type属性值决定显示内容的。像<img> <input> <textarea> <select> <object>都是替换元素，这些元素没有实质的内容

            非替换元素：html中大多数都是非替换元素，浏览器直接显示标签元素的内容。比如<p>paper</p>

　        行内非替换元素：width和height在行内非替换元素中无效。<a> <span>是行内非替换元素

　２．块级元素和行内元素，除以上外，CSS２．１中元素还被分为　块级元素(block-level)和行内元素(inline-level)

            块级元素：在视觉上被格式化为块的元素，最明显的特征就是它默认在横向充满其父元素的内容区域，而且在其左右两边没有其他元素，即块级元素默认是独占一行的。通过CSS设置浮动（此时不一定独占一行）以及设定显示属性为"block" 或者"list-item"的元素都是块级元素。

　　　　行内元素：行内元素不形成新内容块，即在其左右可以有其他元素，并且几乎所有的可替换元素都是行内元素　例如<img> <input>等等。元素的类型也不是固定的，通过设置   display属性可以转化。