最近初學css時對塊級元素與行級元素有時會產生混淆，寫篇部落格記錄一下自己對其的理解。
先從概念上來看：
塊級元素
特點：1.每個塊級元素都是獨自佔一行，其後的元素也只能另起一行，並不能兩個元素共用一行。
2.元素的高度、寬度、行高和頂底邊距都是可以設定的。
3.元素的寬度如果不設定的話，預設為父元素的寬度。
常見的塊級元素：、、...、、、、、、、
行級元素
特點：1.可以和其他元素處於一行，不用必須另起一行。
2.元素的高度、寬度及頂部和底部邊距不可設定。
3.元素的寬度就是它包含的文字、的寬度，不可改變。
說了半天的概念舉個例子說明一下：
<html
>
<
head
>
<
title
>區別
title
>
<
style
type
="text/css"
>
.div1
.span1
style
>
head
>
<
body
>
<
div
class
="div1"
>我是塊級元素1
div>
我是塊級元素2
<span
class
="span1"
>我是行級元素1
span
>
我是行級元素2
body結果如下：>
html
>
如果可以很清晰的看出塊級元素直接佔了一行並且寬度和父元素的寬度一樣，而行級元素可以兩個一起佔一行，並且行級元素的寬度與其內的文字等寬。
行級元素與塊級元素的轉換
如果想將塊級元素與行級元素相互轉換，該怎麼辦呢？
可以在css樣式中用display:inline將塊級元素設為行級元素
同樣，也可以用display:block將行級元素設為塊級元素
**示例如下：
<得到的結果如圖：html
>
<
head
>
<
title
>
title
>
<
style
type
="text/css"
>
.div1
.span1
style
>
head
>
<
body
>
<
div
class
="div1"
>我是塊級元素1
div>
<
div
class
="div1"
>我是塊級元素2
div>
<
span
class
="span1"
>我是行級元素1
span
>
<
span
class
="span1"
>我是行級元素2
span
>
body
>
html
>
可見，原來的塊級元素展示為了行級元素，原來的行級元素展示為了塊級元素。
行級-塊級元素
如果又想設定高度、寬度、行高以及頂和底邊距，又想元素處於一行，該怎麼辦呢？
此時就可以用display:inline-block將元素設定為行級-塊級元素。
行級元素 塊級元素
一.元素分類 行間元素 inline span，strong，em，a，del 塊級元素 block div，p，h1 h6，ul，ol，li，form，address 行塊級元素 inline block img 1.行間元素 內容決定元素所在位置，不可以通過css改變寬高。1234 設定的寬高無...
HTML 塊級元素與行級元素
一 行內元素與塊級元素 塊級元素列表 定義位址 定義 標題 定義列表中定義條目 定義文件中的分割槽或節 定義列表 定義列表中的專案 定義乙個框架集 建立 html 表單 定義最大的標題 定義副標題 定義標題 定義標題 定義標題 定義最小的標題 建立一條水平線 元素為 fieldset 元素定義標題 ...
塊級元素與行級元素分類
塊級元素 定義位址 定義 標題 定義列表中定義條目 定義文件中的分割槽或節 定義列表 定義列表中的專案 定義乙個框架集 建立 html 表單 定義最大的標題 定義副標題 定義標題 定義標題 定義標題 定義最小的標題 建立一條水平線 元素為 fieldset 元素定義標題 標籤定義列表專案 為那些不支...