1.簡要說明：
1. 行內元素會再一條直線上，是在同一行的。比如span和strong;
2. 塊級元素各占一行。是垂直方向的！比如div和p
假如你要將行內元素變成塊級元素，那么就只需要在該標簽上加上樣式 display:block; 塊級元素可以用樣式控制其高、寬的值，而行內元素不可以
。
行內元素和width
W3C CSS2 標准規定行內元素、非置換元素不會應用width屬性。
以下例子中，對行內元素<a>應用了width: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布局來創建頁面的框架，比如：
