1、元素分为行元素（span、input。。。）和块元素（div、ul。。。）
行元素：在一行中平行排列，不能改变其宽度和高度，自身高度被其内容撑开。
块元素：垂直排列，可以修改其宽和高（top、right、bottom、left），自身带有自动换行功能。
2、display
display的常用属性：
（1）none：脱离文档流，内容和空间都隐藏（overflow：hidden;内容隐藏，空间依然显示）
（2）inline：行内元素
（3）block：块元素
（4）inline-block：行内块元素（水平显示的块元素）
3、position
position的常用属性：
（1）inhert：规定应该从父元素继承 position 属性的值。
（2）static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
（3）relative：生成相对定位的元素，相对于元素本身正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
（4）absolute：绝对定位。如果父元素设置了相对定位，则相对于父元素的位置进行绝对定位；如果父元素没有设置相对定位，则相对于body进行绝对定位。
（5）fixed：也是绝对定位。相对于浏览器窗口的定位。通过top、left、right、bottom来设置。
eg：position的例子
<!--普通流-->
<div style="width: 300px;border: 2px solid greenyellow;">
<div style="width: 100px; height: 100px; "></div>
<div style="width: 100px; height: 100px; "></div>
<div style="width: 100px; height: 100px; "></div>
</div>
<br />
<!--相对定位-->
<div style="width: 300px;border: 2px solid greenyellow;">
<div style="width: 100px; height: 100px; "></div>
<div style="width: 100px; height: 100px; position: relative; top:20px; left: 20px;"></div>
<div style="width: 100px; height: 100px; "></div>
</div>
相对定位：相对于自己改变位置，通过移动位置后，原来占据的空间依然还在。只是表现形式变了。
<!--相对父元素的绝对定位-->
<div style="width: 300px;border: 2px solid greenyellow;position: relative;">
<div style="width: 100px; height: 100px; "></div>
<div style="width: 100px; height: 100px; position: absolute; top:20px; left: 20px;"></div>
<div style="width: 100px; height: 100px; "></div>
</div>
绝对定位：该元素不占据文档流空间，脱离文档流。不给其设置top和left值（如下图），该元素不会显示出来。因为脱离文档流，所以可以覆盖在其他元素上，可以设置z-index值。
相对于body的绝对定位：
fixed属性：不管浏览器如何滚动，该属性一直在浏览器窗口的左下方
<div style="width: 300px;border: 2px solid greenyellow; ">
<div style="width: 100px; height: 100px; "></div>
<div style="width: 100px; height: 100px; position: fixed; bottom: 20px;"></div>
<div style="width: 100px; height: 100px; "></div>
</div>
4、浮动：float（left | right）---------元素脱离文档流，不会影响不浮动元素
（1）
红框左移，覆盖蓝框
（2）都左移
该例子父元素没有设置高度。浮动元素不会撑开父元素的高度。
（1.可以设置清除浮动 2.给父元素设置BFC 这二者可以撑开父元素高度-----待续）
清除浮动方法：1.在父元素里最后设置一个空div-----一般不建议使用
2.：after伪类---不需要再多加div来清除
父元素的内容会撑开父元素的高度：
（3）父元素空间不够
（4）子元素其中高度太高被挤
（5）非浮动元素有内容（这个div被称为行框---文档流中元素）
这是正常div显示效果
当给第一个div加左浮动后：红色覆盖在蓝色上面，行框会像浮动元素一样不存在，但是内容会受浮动元素影响，为浮动元素腾出空间。
（用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。）
要想阻止行框内容被挤，需要在该div加清除浮动：
引用------http://www.cnblogs.com/baimiaolei/p/5627755.html