在
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.
常見的可變元素：
可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。
按鈕del - 刪除文字
iframe - inline frame
ins - 插入的文字
map - 區塊（map）
object - object物件
script - 客戶端指令碼
4.
常見的空元素：
四、塊級元素和內聯元素之間的轉換：
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.都會使得原先的行內元素變為塊級元素。
行內元素 塊級元素和行內塊級元素
而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效，只有左右有效果 總是和相鄰的行內元素在同一行上，預設排列方式...
行內元素，塊級元素與空元素
行內元素 a b span img input strong select label em button textarea 塊級元素 div ul li dl dt dd p h1 h6 blockquote 空元素 br meta hr link input img 塊級元素的特點 1.總在新行...
行內元素 塊級元素和行內塊元素
a 標籤定義鏈結 b 字型加粗 br 換行 i 斜體文字效果 img 在網頁中嵌入 input 輸入框 span 組合文件中的行內元素 small 呈現小號字型效果 big 呈現大號字型效果 sub 定義下標文字 sup 定義上標文字 div 定義文件中的分割槽或節 dl 定義列表 dt 定義列表中...