display:inline、block、inline-block

block元素的特點是：
　　總是在新行上開始；
　　高度，行高以及頂和底邊距都可控制；
　　寬度預設是它的容器的100%，除非設定一個寬度

inline元素的特點是： 
　　和其他元素都在一行上；
　　高，行高及頂和底邊距不可改變；
　　寬度就是它的文字或圖片的寬度，不可改變。

display:inline-block將物件呈遞為內聯物件，但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內，允許空格。

意思就是，這個物件本身是一個行元素，但是它的內容是塊（也就是說它可以設高寬。這可以想象成，一個通道上的一些物件，可以對齊，可以有有自已的大小等。

塊級元素：塊狀元素排斥其他元素與其位於同一行，可以設定元素的寬（width）和高（height），塊級元素一般是其他元素的容器，可容納塊級元素和行內元素。常見的塊級元素有div, p ,h1~h6等。

行內元素：行內元素不可以設定寬（width）和高（height），但可以與其他行內元素位於同一行，行內元素內一般不可以包含塊級元素。行內元素的高度一般由元素內部的字型大小決定，寬度由內容的長度控制。常見的行內元素有a, em ,strong等。

例如：我們可以給div或p應用下面樣式，但是a標籤卻無法應用下面的樣式。

當然我們還可以通過樣式display屬性來改變元素的顯示方式。當display的值設為block時，元素將以塊級方式呈現；當display值設為inline時，元素將以行內形式呈現。所以我們可以給a標籤應用以下樣式：

另外，如果我們即想讓一個元素可以設定寬度高度，又想讓它以行內形式顯示，這時我們可以設定display的值為inline-block。如：

附：

塊元素(block element) 

* address - 地址 

* blockquote - 塊引用 

* center - 舉中對齊塊 

* dir - 目錄列表 

* div - 常用塊級容易，也是css layout的主要標籤 

* dl - 定義列表 

* fieldset - form控制組 

* form - 互動表單 

* h1 - 大標題 

* h2 - 副標題 

* h3 - 3級標題 

* h4 - 4級標題 

* h5 - 5級標題 

* h6 - 6級標題 

* hr - 水平分隔線 

* isindex - input prompt 

* menu - 選單列表 

* noframes - frames可選內容，（對於不支援frame的瀏覽器顯示此區塊內容 

* noscript - ）可選指令碼內容（對於不支援script的瀏覽器顯示此內容） 

* ol - 排序表單 

* p - 段落 

* pre - 格式化文字 

* table - 表格 

* ul - 非排序列表 



內聯元素(inline element) 

* a - 錨點 

* abbr - 縮寫 

* acronym - 首字 

* b - 粗體(不推薦) 

* bdo - bidi override 

* big - 大字型 

* br - 換行 

* cite - 引用 

* code - 計算機程式碼(在引用原始碼的時候需要) 

* dfn - 定義欄位 

* em - 強調 

* font - 字型設定(不推薦) 

* i - 斜體 

* img - 圖片 

* input - 輸入框 

* kbd - 定義鍵盤文字 

* label - 表格標籤 

* q - 短引用 

* s - 中劃線(不推薦) 

* samp - 定義範例計算機程式碼 

* select - 專案選擇 

* small - 小字型文字 

* span - 常用內聯容器，定義文字內區塊 

* strike - 中劃線 

* strong - 粗體強調 

* sub - 下標 

* sup - 上標 

* textarea - 多行文字輸入框 

* tt - 電傳文字 

* u - 下劃線 

* var - 定義變數 



可變元素 

可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。 


* applet - java applet 

* button - 按鈕 

* del - 刪除文字 

* iframe - inline frame 

* ins - 插入的文字 

* map - 圖片區塊(map) 

* object - object物件 

* script - 客戶端指令碼