HTML中元素大多數都是塊級元素或行內元素。下面就讓我們來仔細的剖析剖析它們的用法和區別。
一、定義。
每個名字背后都是有自己的深意的。比如行內元素：只占據它對應標簽的邊框所包含的空間。只能容納文本或者其他內聯元素。示例如下：
HTML
<p>This <span>span</span> is an inline element; </p>
CSS
效果：span{background-color:red;}
塊級元素占據其父元素（容器）的整個空間，因此創建了一個“塊”。通常瀏覽器會在塊級元素前后另起一行。能容納其他塊元素或者內聯元素。示例如下：
HTML
<p>This paragraph is a block-level element.</p>
CSS
p{background-color:red;}
實現效果：
二.塊級元素和內聯元素的區別：
1.塊元素，總是在新行上開始；內聯元素，和其他元素在一行；
2.塊元素，能容納其他塊元素或者內聯元素；內聯元素，只能容納文本或其他內聯元素；
3.塊元素中高度，行高以及頂和底邊距都可以控制；內聯元素中高，行高及頂和底邊距不可改變。
三.各自的特點：
1.塊元素的特點：
a.總是在新行上開始；
b.高度、行高以及外邊距和內邊距都可控制；
c.寬度默認是它容器的100%，除非設定一個寬度；
d.他可以容納內聯元素和其他塊元素。
2.內聯元素的特點：
a.和其他元素都在同一行；
b.高，行高及外邊距和內邊距不可改變；
c.寬度就是它的文字和圖片的寬度，不可改變；
d.內聯元素只能容納文本或者其他內聯元素。
四、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 - 定義變量
五、塊級元素和內聯元素之間的轉換：
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;轉換為行內塊級元素。
2.float
當把行內元素設置完float:left/right后，該行內元素的display屬性會被賦予block值，且擁有浮動特性。行內元素去除了之間的莫名空白。
3.position
當為行內元素進行定位時，position:absolute與position:fixed.都會使得原先的行內元素變為塊級元素。
參考文獻：1.塊級元素 - HTML（超文本標記語言）
2.行內元素 - HTML（超文本標記語言）
3.CSS塊級元素、內聯元素 - - 博客頻道 - CSDN.NET
4.說說行內元素與塊級元素以及之間的轉換？ - 簡書
