一、CSS中的盒子模型
标准模式和混杂模式（IE）。在标准模式下浏览器按照规范呈现页面；在混杂模式下，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
html元素一般分为块级元素和行内元素
块级元素：块级元素排斥其他元素与其位于同一行，可以设定宽（width）和高（height）,块级元素一般是其他元素的容器，可容纳块级元素和行内元素,
常见的块级元素有div, p ,h1~h6,ul,table,form,hr等。
每一个块元素都可以分为context、padding、boder和margin几个部分，我们常说的宽和高，通常指的是context的宽和高(也有可能是context+padding,具体跟浏览器有关)，
padding代表内容和边框之间的填充，margin代表边框之外的空白，如上图：
行内元素：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效，但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。
行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a, em ,strong,span,i,img,lable,button,select等。
块级元素和行内元素区别
行内元素同一行水平排列。 块级元素各占据一行，垂直方向排列。 块级元素可以包含行内元素和块级元素。但行内元素不能包含块级元素。 行内元素与块级元素属性的不同，主要是盒模型属性上。可以通过修改样式display属性改变元素是以块级还是行内元素呈现，当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现。
如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。
例子：
a{display:inline-block; width:100px; height:100px;} 二、CSS中的文档流模型
所有的块元素在html文档中是按照它们出现在文档中的先后顺序排列的（当然，嵌套不在此列），每一个块都会另起一行。如下图
他们对应的html如下：
div1
查看更多关于css盒子模型、文档流、相对与绝对定位、浮动与清除模型_html/css_WEB-ITnose的详细内容...