我們先來分析一下塊級元素、內聯級元素的定義和解析：
塊元素(block element)一般是其他元素的容器元素，塊元素一般都從新行開始，它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤'p"。「form"這個塊元素比較特殊，它只能用來容納其他塊元素。
如果沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css以後，我們可以改變這種html的預設布局模式，把塊元素擺放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table標籤也是塊元素的一種，table based layout和cssbased layout從一般使用者（不包括視力障礙者、盲人等）的角度來看這兩種布局，除了頁面載入速度的差別外，沒有其他的差別。但是如果普通使用者不經意點了檢視頁面源**按鈕後，兩者所表現出來的差異就非常大了。基於良好重構理念設計的css布局頁面原始碼，至少也能讓沒有web開發經驗的普通使用者把內容快速的讀懂。從這個角度來說，css layout code應該有更好的美學體驗。
你能夠把塊容器元素div想象成乙個個box，或者如果你玩過剪貼文載的話，那就更加容易理解了。我們先把需要的文章從各種報紙、雜誌總剪 下來。每塊剪下來的內容就是乙個block。然後我們把這些紙塊按照自己的排版意圖，用膠水重新貼到一張空白的新紙上。這樣就形成了你自己獨特的文摘快報了。作為一種技術的延伸，網頁布局設計也遵循了同樣的模式。
內聯元素(inline element)一般都是基於語義級(semantic)的基本元素。內聯元素只能容納文字或者其他內聯元素，常見內聯元素 「a」。
需要說明的是：inline element的中文叫法，有多種內聯元素、內嵌元素、行內元素、直進式元素。基本上沒有統一的翻譯，愛怎麼叫怎麼叫吧。另外提到內聯元素，我們會想到有個display的屬性是display:inline;這個屬性能夠修復著名的ie雙倍浮動邊界問題。
塊元素(block element)和內聯元素(inline element)都是html規範中的概念。塊元素和內聯元素的基本差異是塊元素一般都從新行開始。而當加入了css控制以後，塊元素和內聯元素的這種屬性差異就不成為差異了。比如，我們完全可以把內聯元素cite加上display: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 - 定義變數
當內聯元素，在css中定義下列屬性中的一種，便具有塊元素的特徵
1）display:block;
2）float:left; （不但具有塊元素的特徵，同時像左側浮動）
但是這時候的內聯元素，雖然具有塊狀元素的特徵，但是這兩種有一點區別，第一種，徹頭徹尾和塊元素一模一樣，都要單獨佔一行，從左至右，前提沒有width和height屬性，嚴格遵循流動布局模型塊狀元素的流動方式，自上至下流動，第二種，大小是恰好能將內容包含，並且右側浮動，可以多個在一行。
當加上position:absolute/relative的時候，塊狀元素和內聯元素，就不受父級區域的限制了，可以移動到任何位置，此時如果加上width和height屬性，那麼就具有層的特徵了。（加上width和height還有一點好處，就是可以相容ie瀏覽器了，所有的瀏覽器現實效果都一樣了）
CSS 塊狀元素和內聯元素
塊狀元素 一般是其他元素的容器，可容納內聯元素和其他塊狀元素，塊狀元素排斥其他元素與其位於同一行，寬度 width 高度 height 起作用。常見塊狀元素為div和p。內聯元素 內聯元素只能容納文字或者其他內聯元素，它允許其他內聯元素與其位於同一行，但寬度 width 高度 height 不起作用...
塊狀元素和行內元素
1.塊級元素 2.行內元素 3.塊級元素與行內元素的區別 1 塊級元素會獨佔一行，其寬度自動填滿其父元素寬度 行內元素不會獨佔一行，相鄰的行內元素會排列在同一行，直至一行排不下才會換行，其寬度隨元素的內容而變化。2 塊級元素可以包含行內元素和塊級元素 行內元素不能包含塊級元素。3 行內元素設定wid...
塊狀元素和行內元素
塊級元素 譯為 block level element 塊級元素通常出現在瀏覽器 的開始與結束，塊狀元素 佔據一行，換行 如div ul ol li dl dt dd h1 h6 p form hr 行級元素譯為 inline element 行級元素在顯示時通常不會以新行開始。行內元素 在一行，不...