在css盒子模型中，html元素中有塊元素（block element）和內聯元素（inline element）。那麼它們究竟是什麼呢？

其實，這兩種元素都是html規範中的概念。塊元素(block element)一般是其他元素的容器元素，能容納其他塊元素或內聯元素。最常見的就是P和div這兩個，說的簡單點，塊元素就好比一個四方塊，可以放其他的四方塊，並可以呈現在頁面上任何地方。預設情況下塊元素，是獨佔一行的。常見的塊元素：div、h1-h6標題、form（只能用來容納其他塊元素）、hr、p、table、ul、ol等。內聯元素(inlineelement)也叫內嵌元素或行內元素，一般都是基於語義級(semantic)的基本元素。內聯元素只能容納文字或者其他內聯元素，常見內聯元素有a和span。 

一.塊級元素和內聯元素的區別：

1.塊元素，總是在新行上開始；內聯元素，和其他元素在一行；
2.塊元素，能容納其他塊元素或者內聯元素；內聯元素，只能容納文字或其他內聯元素；
3.塊元素中高度，行高以及頂和底邊距都可以控制；內聯元素中高，行高及頂和底邊距不可改變。

(這上面的區別，指的是預設情況下的，不包括CSS的刻意控制。也就是說當使用css控制時，塊元素和內聯元素的屬性差異會越來越小。) 

二.各自的特點：

1.block（塊）元素的特點：①總是在新行上開始；②高度，行高以及外邊距和內邊距都可控制；③寬度預設是它的容器的100%，除非設定一個寬度。④它可以容納內聯元素和其他塊元素

2.inline元素的特點：

①和其他元素都在一行上；②高，行高及外邊距和內邊距不可改變；③寬度就是它的文字或圖片的寬度，不可改變；（寬度只與內容有關）④內聯元素只能容納文字或者其他內聯元素

（不可以設定寬高，其寬度隨著內容增加，高度隨字型大小而改變，內聯元素可以設定外邊界，但是外邊界不對上下起作用，只能對左右起作用，也可以設定內邊界，但是內邊界在ie6中不對上下起作用，只能對左右起作用）

三、1.常見的塊元素：

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 - 非排序列表
2.常見的內聯元素：

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 - 定義變數

3.常見的可變元素：

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

applet - java applet
button - 按鈕
del - 刪除文字
iframe - inline frame
ins - 插入的文字
map - 圖片區塊（map）
object - object物件
script - 客戶端指令碼

4.常見的空元素：

<input /> <img /> <isindex/> <area /> <base /> <basefont />
<bgsound /> <col /> <embed /> <frame /> <keygen/> <link />
<meta /> <nextid /> <param /> <plaintext /> <spacer/> <wbr />
<!DOCTYPE> <!-- -->

四、塊級元素和內聯元素之間的轉換：

1.display
塊元素預設display:block;行內非替換元素(a,span)預設為display：inline;行內替換元素(input)預設為display:inline-block;
a.display:none;      /*不顯示該元素，也不會保留該元素原先佔有的文件流位置。*/
b.display:block;     /*轉換為塊級元素。*/
c.display:inline;     /*轉換為行內元素。*/
d.display:inline-block;轉換為行內塊級元素。/*其實仍為行內元素，但是可以設定width及height屬性等*/

2.float
當把行內元素設定完float:left/right後，該行內元素的display屬性會被賦予block值，且擁有浮動特性。行內元素去除了之間的莫名空白。
3.position
當為行內元素進行定位時，position:absolute與position:fixed.都會使得原先的行內元素變為塊級元素。