1.简要说明：
1. 行内元素会再一条直线上，是在同一行的。比如span和strong;
2. 块级元素各占一行。是垂直方向的！比如div和p
假如你要将行内元素变成块级元素，那么就只需要在该标签上加上样式 display:block; 块级元素可以用样式控制其高、宽的值，而行内元素不可以。
行内元素和width
W3C CSS2 标准规定行内元素、非置换元素不会应用width属性。
以下例子中，对行内元素<a>应用了200px,你可以看到，根本就没有什么效果。
行内元素和height
W3C CSS2 标准规定行内元素、非置换元素不会应用height属性，但是盒子高度可以通过line-height来指定。
以下例子，对行内元素<a>应用了height:50px,你可以看到什么效果都没。
行内元素和padding
你可以给行内元素设置padding，但只有padding-left和padding-right生效。
以下例子，行内元素<a>应用了padding:50px。你可以看到对左右的内容有影响，但是对上下没影响。
行内元素和margin
margin属性也是和padding属性一样，对行内元素左右有效，上下无效。
- 设置宽度width 无效。
- 设置高度height 无效，可以通过line-height来设置。
- 设置margin 只有左右margin有效，上下无效。
- 设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的，看图上效果就知道了
text-align属性是两者表现的又以不同之处
在W3C CSS2.1规范第16.2节对text-align 有详细地描述：
------------------------------------------
值： left | right | center | justify | inherit
初始值：匿名值，由'direction'的值而定，如果'direction'为'ltr'则为'left'，如果'direction'为'rtl'则为'right'。
应用于: 块级元素，表格单元格，行内块元素
继承性: 是
计算后的值：初始值或指定值
------------------------------------------
这个特性描述了如何使一个块元素的行内内容对齐。
注意一点，标准里说这个属性是用来对齐行内内容的，所以，不应该对块级内容起作用。
解释一下，行内内容是说由行内元素组成的内容，行内元素大家都知道吧，比如 SPAN 元素，IFRAME元素和元素样式的 ‘display : inline’ 的都是行内元素；块级内容跟则是由块级元素构成，DIV 是最常用的块级元素。块级元素和行内元素的区别是，块级元素会占一行显示，而行内元素可以在一行并排显示。
这样，我们对这个特性的认识应该就清楚了。但是，虽然标准里这么规定，那么是不是所有浏览器都遵守呢？答案是否定的。猜猜是哪个浏览器这么特立独行啊？ IE！！
IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。
解决上面的问题比较好的方式，就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:auto; margin-right:auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的 "text-align:center;"。若居中对齐的子元素内的行内内容不需要居中对齐，则还需要为其设置“text-align:left”。
元素的总结暂时先到这里，然后由此我们需要再次引入一个网页布局中常用的一种手段，定位。
常用的定位就两种，绝对定位与相对定位，除此之外position这个属性还接受的参数有：fixed，固定定位，定位基于浏览器窗口；static，默认值，说明元素没有定位；切元素处于正常的流中；
那么，元素的相对定位于绝对定位有什么区别呢？我通过各位大神的博客整理了以下特点
相对定位（Relative positioning）
一旦一个盒子被定位或者浮动，它可以相对于这个位置进行一定的偏移。这就叫做相对定位。偏移的盒子（B1）对紧跟着它的盒子（B2）没有任何影响：B2的位置就像B1没有发生偏移一样。因此，相对定位可能导致盒子重叠（overlap）。但是，如果相对定位导致了"overflow:auto"或者"overflow:scroll"的盒子溢出了，那么UA必须允许用户（通过滚动条等）能够访问到盒子的内容。
一个相对定位的盒子保持原有的正常大小，包括换行和一开始就保有的空间。
对于相对定位的元素来说，left和right将盒子不改变大小的水平移动。left将盒子右移，right将盒子左移。因为left或right的结果都不会导致盒子被分隔或拉伸，所以实际上最终使用的值总是： left=-right。
如果left和right的取值都是auto，那最终生效的值都为0（也就是说盒子呆在原来的位置）。
如果left取值为auto，那么最终使用的值是-right（也就是说盒子最终左移了right的数值）。
如果right取值为auto，那么最终使用的值是-left。
如果left和right都不是auto，那么二者之中必须要忽略一个。如果包含块的direction属性值为ltr，那么使用left，right的值为-left；如果包含块的direction为rtl，那么使用right，left的值为-right。
top和bottom属性将盒子不改变大小的上下移动。top将盒子下移，bottom将盒子上移。因为盒子不会被分隔或者拉伸，所有最终使用的值总是：top=-bottom。如果两个都是auto，那么最终使用的值都为0。如果其中之一为auto，那么设为auto的那个属性最终使用的值是另一个的负值。如果都不是auto，那么bottom被忽略（也即是说bottom最终使用的值是-top）。
绝对定位（Absolute positioning）
在绝对定位模型中，盒子被从正常文档流中完全移除，并只相对于它的包含块进行偏移定位。绝对定位的盒子会为它的正常文档流后代盒子以及非fixed的绝对定位后代盒子建立一个包含块。绝对定位的盒子可能会遮盖其他元素，具体取决于堆叠层次。
固定布局（Fixed positioning）
固定布局是绝对布局的一个子类，唯一的不同在于固定布局的盒子的包含块由视口（viewport）产生。
我们通常通过fixed布局来创建页面的框架，比如：
