最近初學CSS時對塊級元素與行級元素有時會產生混淆，寫篇博客記錄一下自己對其的理解。
先從概念上來看：
塊級元素
特點：1.每個塊級元素都是獨自占一行，其后的元素也只能另起一行，並不能兩個元素共用一行。
2.元素的高度、寬度、行高和頂底邊距都是可以設置的。
3.元素的寬度如果不設置的話，默認為父元素的寬度。
常見的塊級元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
行級元素
特點：1.可以和其他元素處於一行，不用必須另起一行。
2.元素的高度、寬度及頂部和底部邊距不可設置。
3.元素的寬度就是它包含的文字、圖片的寬度，不可改變。
說了半天的概念舉個例子說明一下：
<html> <head> <title>區別</title> <style type="text/css"> .div1{ background-color: red; } .span1{ background-color: yellow; } </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>
結果如下：
如果可以很清晰的看出塊級元素直接占了一行並且寬度和父元素的寬度一樣，而行級元素可以兩個一起占一行，並且行級元素的寬度與其內的文字等寬。
行級元素與塊級元素的轉換
如果想將塊級元素與行級元素相互轉換，該怎么辦呢？
可以在css樣式中用display:inline將塊級元素設為行級元素
同樣，也可以用display:block將行級元素設為塊級元素
代碼示例如下：
<html> <head> <title></title> <style type="text/css"> .div1{ background-color: red; display: inline;; } .span1{ background-color: yellow; display: block; } </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將元素設置為行級-塊級元素。