最近初學CSS時對塊級元素與行級元素有時會産生混淆，寫篇部落格記錄一下自己對其的了解。
先從概念上來看：
塊級元素
特點：1.每個塊級元素都是獨自占一行，其後的元素也隻能另起一行，并不能兩個元素共用一行。
2.元素的高度、寬度、行高和頂底邊距都是可以設定的。
3.元素的寬度如果不設定的話，預設為父元素的寬度。
常見的塊級元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
行級元素
特點：1.可以和其他元素處于一行，不用必須另起一行。
2.元素的高度、寬度及頂部和底部邊距不可設定。
3.元素的寬度就是它包含的文字、圖檔的寬度，不可改變。
說了半天的概念舉個例子說明一下：
結果如下：
如果可以很清晰的看出塊級元素直接占了一行并且寬度和父元素的寬度一樣，而行級元素可以兩個一起占一行，并且行級元素的寬度與其内的文字等寬。
行級元素與塊級元素的轉換
如果想将塊級元素與行級元素互相轉換，該怎麼辦呢？
可以在css樣式中用display:inline将塊級元素設為行級元素
同樣，也可以用display:block将行級元素設為塊級元素
代碼示例如下：
得到的結果如圖：
可見，原來的塊級元素展示為了行級元素，原來的行級元素展示為了塊級元素。
行級-塊級元素
如果又想設定高度、寬度、行高以及頂和底邊距，又想元素處于一行，該怎麼辦呢？
此時就可以用display:inline-block将元素設定為行級-塊級元素。