标签：
1-常用块级元素
div p hn ul ol li hr table body form
2-常用的行内元素
span br input textarea label select
区别：
1.块级元素单独占满一行,自动填满父级元素。
2.行内元素不会单独占满一行，一行可以放多个，直到放不下才下一行。
3.块级元素可以设置width height,行内元素设置了也无效。【注意：块级元素即使设置了宽度，仍然是独占一行的】
4.块级元素可以设置margin padding。而行内元素只有在水平方向上的才有效，eg:left-margin right-margin left-padding right-padding
而 top-margin bottom-margin top-padding bottom-padding 只对块级元素有效
5.行内元素转块级元素： display:block
参考：http://www.cnblogs.com/greenal/archive/2013/01/05/2845513.html
3-float浮动
目地： 通过设置浮动是块级元素并排。
float: left right
注意： (以div为例)上一个div的float会对下一个产生影响
eg:
--------------------------》》》》》》
去除浮动： clear:left right both()
eg:
去除后就正常了
简单说明：想排在一行就使用浮动（float:left） ，想提行就清除浮动（直接用 clear：both 即可，不用管左右）
3-盒子模型：(div)
3-1---div的边框----border:
border-left:左边框 border-right:右边框
border-top:上边框 border-bottom:下边框
3-2---div里的东西与边框的距离----内间距padding
first: padding:10px; 一个是上下左右
second: padding: 10px 10px; 两个是上下和左右
third: padding:20px 10px 20px; 三个是 上和左右和下
fourth: padding:10px 20px 10px 20px 四个是上右下左(记为顺时针)
3-3---div之间的外间距---margin
first: margin:10px; 一个是上下左右
second: margin: 10px 10px; 两个是上下和左右
third: margin:20px 10px 20px; 三个是 上和左右和下
fourth: margin:10px 20px 10px 20px 四个是上右下左(记为顺时针)
注：*{ padding: 0px; margin: 0px; } 默认所有网页里的标签的内外间距都为0
效果对比：
<<<<<---------------->>>>>>
4----绝对定位和相对定位
4-1-------相对定位：position:relative
未脱离文档流，float仍对它有影响。
此时对它设置top、left、right、bottom，是针对上一级容器的距离
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
4-2---绝对定位---position:absolute
脱离了文档流，float对它没有影响
-------------------------------------------------------------------------------------------------------------------------------------------------------
此时对它设置top、left、right、bottom，就是针对窗体的距离
标签：
原文地址：http://www.cnblogs.com/anwser-jungle/p/4823502.html
