我們首先要了解，所有的html元素，都要麼是block(塊元素)、要麼是inline(內聯元素)。下面了解一下block、inline各自的特點：
block元素的特點：
example source code
[www.52css.com]
總是在新行上開始；
高度，行高以及頂和底邊距都可控制；
寬度預設是它的容器的100%，除非設定乙個寬度。
inline元素的特點：
example source code
[www.52css.com]
和其他元素都在一行上；
高，行高及頂和底邊距不可改變；
寬度就是它的文字或的寬度，不可改變。
我們來詳細了解它們的情況。
塊元素(block element)一般是其他元素的容器元素，塊元素一般都從新行開始，它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤'p"。「form"這個塊元素比較特殊，它只能用來容納其他塊元素。
如果沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css以後，我們可以改變這種html的預設布局模式，把塊元素擺放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table標籤也是塊元素的一種，table based layout和css based 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這樣的屬性，讓他也有每次都從新行開始的屬性。
可變元素是基於以上兩者隨環境而變化的，它的基本概念就是他需要根據上下文關係確定該元素是塊元素或者內聯元素。可變元素還是屬於上述兩種元素類別，一旦上下文關係確定了他的類別，他就要遵循塊元素或者內聯元素的規則限制。
html標籤的block、inline分類明細：
塊元素(block element)
example source code
[www.52css.com]
◎ 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)
example source code
[www.52css.com]
◎ 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 - 定義變數
可變元素
example source code
[www.52css.com]
可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。
◎ button - 按鈕
◎ del - 刪除文字
◎ iframe - inline frame
◎ ins - 插入的文字
◎ map - 區塊(map)
◎ object - object物件
◎ script - 客戶端指令碼
塊級元素和內聯元素
塊級元素和內聯元素 塊級元素 譯為 block level element，內聯元素 譯為 inline element。塊級元素在瀏覽器顯示時，通常會以新行來開始 和結束 例子 內聯元素在顯示時通常不會以新行開始。例子 html 分組標籤 定義文件中的分割槽或節 division section ...
塊級元素和內聯元素區別
在標準文件流裡面，塊級元素具有以下特點 總是在新行上開始，佔據一整行 高度，行高以及外邊距和內邊距都可控制 寬頻始終是與瀏覽器寬度一樣，與內容無關 它可以容納內聯元素和其他塊元素。行內元素的特點 和其他元素都在一行上 高，行高及外邊距和內邊距部分可改變 寬度只與內容有關 行內元素只能容納文字或者其他...
html塊級元素和內聯元素
塊級元素 就是乙個方塊，像段落一樣，預設佔據一行出現 內聯元素 又叫行內元素，顧名思義，只能放在行內，就像乙個單詞，不會造成前後換行，起輔助作用。一般的塊級元素諸如段落 標題.列表,body 元素的內容會顯示在瀏覽器中。title 元素的內容會顯示在瀏覽器的標題欄中。從上圖的例子可以看出，塊級元素預...