前面有一篇文章講到在css世界中，html元素的表現都是一個個盒子，而css中盒子的顯示方式有三種方式，分別是塊元素、行內元素和行內塊元素。本文總結這三種顯示方式的特征和區別。
1 寫在前面
最近在整理cnblogs上頁面的樣式，默認右側【隨筆分類】中的標簽是每行顯示一個，而我想把右側【隨筆分類】中的標簽設置為一行顯示多個標簽，至於顯示多少個則隨標簽的大小而定，並且每個標簽在鼠標放上去的時候會有背景顏色的變化。效果如下圖。
下面我們就來分析一下如何讓左邊的標簽顯示方式變為右邊這樣的吧
2 塊元素
在分析塊元素之前我們首先建立html網頁，以便后面的分析。html代碼如下。
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
width:500px;
margin:20px auto;
color:black;
}
a{
color:inherit;
text-decoration:none;
}
div{
width:320px;
border:1px solid red;
}
div ul {
padding-left:10px;
}
</style>
<link rel="stylesheet" type="text/css" href="pagestyle.css">
</head>
<body>
<div>
<ul>
<li><a href="#">.NET(7)</a> </li>
<li><a href="#">Android(2)</a> </li>
<li><a href="#">ArcgisEngine(3)</a> </li>
<li><a href="#">ASP.NET(1)</a> </li>
<li><a href="#">CSS(1)</a> </li>
<li><a href="#">C語言(1)</a> </li>
<li><a href="#">Demo(5)</a> </li>
<li><a href="#">JavaScript(2)</a> </li>
<li><a href="#">Linq(1)</a> </li>
<li><a href="#">MSSQL(1)</a> </li>
<li><a href="#">其他(1)</a> </li>
<li><a href="#">算法(3)</a> </li>
</ul>
</div>
</body>
</html>
當然這段html我們給他設置一些簡單的樣式，去掉列表符號，和a標簽的下划線。目前pagestyle.css文件中還沒有任何代碼，上面這段代碼的效果如下。
我們可以發現，每個列表li元素都是呈單行顯示的，並且他們的高度和內部的內容相當，現在我們給li元素增加一個外邊框並適當的設置一下padding，在pagestyle.css中寫如下代碼。
li{
border:1px solid green;
margin-top:2px;
padding:5px 0 5px 0;
}
效果如下。
通過給li元素設置邊框，可以知道li元素默認是占一行的，它的寬度和父容器的寬度一樣，而高度則是他們實際內容+padding的高度。li元素屬於c塊元素。下面總結一下css塊元素有哪些特征。
- 塊元素默認占據一行，寬度與父容器一致，高度為內容+padding的高度。
- 塊元素可以通過設置margin和padding的值來控制塊元素與其他元素的邊距以及自身邊框與內容的留白（內邊距）。
- 塊元素可以設置寬度和高度。
- 塊元素設置高度，padding，margin會撐大父容器的文檔流，當然這要在父容器沒有設置固定高度的前提下。
上面說了塊元素總是要占據一行的，寬度與父容器一致。當我們把li元素的寬度手動設置成很小的寬度，那么下面那個li元素會不會跑到上面來呢？答案是肯定不會跑上來的，因為塊元素總是那么的霸道，即使自己寬度很小，也要獨占一行的，不信看下面的代碼和效果。
li{
border:1px solid green;
margin-top:2px;
padding:5px 0 5px 0;
width:150px;/*手動設置寬度*/
}
我們把li元素的寬度設置為150，效果如下。
我們可以看到li元素的寬度變了，但是它依然是獨占一行的。
常見的塊元素有div，h1-h6，p，ul，ol，li等等。一般布局中的父元素都是采用塊元素。
3 行內元素
上面第2節講到li元素是塊元素並且獨占一行的，而博客園的標簽都是使用li元素。那我們需要把博客園的標簽變為一行顯示多個，該怎么辦呢？下面開始輪到行內元素上場了。
行內元素，顧名思義即在一行內顯示的元素。在css中，有一個display的屬性，他可以更改html元素默認的顯示方式，可以把塊元素變為行內元素，行內元素變為塊元素。display屬性有四個值可選，分別是block：塊元素；inline：行內元素；inline-block：行內塊元素；none：元素不顯示。
下面我們把li元素的css樣式添加一個display屬性看看效果。代碼如下。
li{
border:1px solid green;
margin-left:5px;/*左邊距*/
margin-top:7px;/*設置高度*/
display:inline;
}
效果如下。
通過設置li元素的display屬性，將其改變為行內元素，li元素就可以一行顯示多個，一個挨着一個，從效果中發現，我們設置了margin-left:5px這個左邊距是有效果，而設置margin-top:7px是沒有效果。這就是行內元素的特點。
- 對行內元素設置高度相關的都是沒有效果的，如設置margin-top，margin-bottom，padding-top，padding-bottom，height這些屬性都是無效的。
- 對行內元素設置寬度也是無效的，行內元素的寬度只有左右內邊距和內容寬度來決定。
行內元素對其高度有關的屬性設置都無效，導致li元素兩行之間都緊靠在一起，顯然在美觀上不能滿足我們的要求。但是css提供了另外一個屬性也就是行高line-height，該屬性可以設置行與行之間的高。，下面我給li元素的父容器ul元素設置行高。代碼如下。
ul{
line-height:1.5em;
}
li{
border:1px solid green;
margin-left:5px;
margin-top:7px;
display:inline;
}
效果如下。
通過設置ul元素的行高，實現了行內元素上下之間的間隔。雖然離我理想中的效果差不太遠了，但是還是有些不近人意。上下邊框和元素的內容挨的太近（內邊距無），當鼠標移動到上面的時候，效果可能會不太好。不過我們還是按照我們理想中的效果試試。代碼如下。
ul{
line-height:1.5em;
}
li{
/*border:1px solid green;*//*不要邊框的顯示*/
margin-left:13px;
display:inline;/*行內元素*/
padding:11px 20px;
}
li:hover{
background-color:blue;
color:white;
}
效果如下。
前面說到設置行內元素與高度相關的屬性都是無效的，但是上面設置的padding-top和padding-bottom好像是有效果的哈。但是實質上設置padding的上下內邊距並沒有增加行高，也沒有撐大父容器的文檔流，而且我們可以看到背景顏色顯示的時候，還有覆蓋了上下li元素的內容了。
行內元素設置padding的上下邊距，並不會撐大父容器的文檔流，但是會有效果，在上一篇文章CSS盒子模型中說到html中所有元素都是一個盒子，而背景顏色顯示的范圍是padding+content的范圍。
上面的效果我們再美化一下css效果（修改行高和上下邊距），差不多就能夠達到我們想要的效果了，但是從上面效果圖的右邊來看，有時候一個行內元素在一行中沒顯示完的時候，會有一小部分在下面一行顯示，如果最后出現效果圖右邊這種情況，那就比較尷尬了。
常見的行內元素有：a、img、input、select等。
4 行內塊元素
行內塊並不是兼具兩者都有的特征，從字面上來理解，就是可以在行內顯示的塊元素，在第2節講到塊元素即使設置了寬度，也會獨占一行，並會跟其他元素同行，那么行內塊元素在這點上就與塊元素不同。
- 行內塊元素對其設置高度，寬度，padding和margin都是有效果的。
- 行內塊元素不會獨占一行，如果該行內塊元素在設置完寬度、padding、margin之后，父容器后面的寬度還能夠容的下第二元素，那么第二個元素就會與第一個元素同行顯示，否則，另起一行。
- 兩個同行顯示的行內塊元素，對其上下的元素的間隔距離，以其中最大的間距為主。
關於第三點特征我們可以寫代碼實驗一下。把ul元素下面的第一個li元素設置class屬性。代碼如下：
<li class="first"> <a href="#">.NET(7)</a> </li>
css的代碼如下。
li{
/*border:1px solid green;*//*不要邊框的顯示*/
margin-left:13px;
display:inline-block;/*行內塊元素*/
}
li:hover{
background-color:blue;
color:white;
}
ul .first{
margin-bottom:50px;/*設置第一個li元素的下邊距50px*/
}
效果如下。
我們可以發現第一行有兩個li元素，第一li元素我們設置了下邊距為50px，而第二個沒有設置默認為0，導致最終這一行與下一行的邊距為第一個li元素的下邊距50px，和我們預想的效果一致。
經過對行內塊元素的總結，發現行內塊元素能夠很好的滿足我們的需求。下面把li元素設置為行內塊顯示方式，對其進行美化，代碼如下。
li{
display:inline-block;/*行內塊元素*/
margin-bottom:5px;/*下邊距5px*/
padding:5px 7px;/*上下內邊距5p，左右內邊距7px*/
border-radius:5px;/*圓角*/
}
li:hover{
background-color:blue;
color:white;
}
效果如下。
其實css默認的元素類型只有兩種，塊元素和行內元素，而行內塊元素需要我們使用display去設置的。
5 總結
經過一天的時間整理自己的博客風格，將博客風格整理成非常簡潔的樣式，頁面都是黑白風格，當鼠標交互時，相應的元素會變成淺藍色，個人挺喜歡這種風格。也通過這次整理，重新溫習了css里面幾個比較重要的概念，比css盒子模型，選擇器，元素類型等。