最近在整理cnblogs上頁面的樣式，預設右側【隨筆分類】中的標籤是每行顯示一個，而我想把右側【隨筆分類】中的標籤設定為一行顯示多個標籤，至於顯示多少個則隨標籤的大小而定，並且每個標籤在滑鼠放上去的時候會有背景顏色的變化。效果如。
下面我們就來分析一下如何讓左邊的標籤顯示方式變為右邊這樣的吧
在分析塊元素之前我們首先建立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; } p{ width:320px; border:1px solid red; } p ul { padding-left:10px; } </style> <link rel="stylesheet" type="text/css" href="pagestyle.css"> </head> <body> <p> <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> </p> </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元素的寬度變了，但是它依然是獨佔一行的。
常見的塊元素有p，h1-h6，p，ul，ol，li等等。一般布局中的父元素都是採用塊元素。
上面第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等。
行內塊並不是兼具兩者都有的特徵，從字面上來理解，就是可以在行內顯示的塊元素，在第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去設定的。
經過一天的時間整理自己的部落格風格，將部落格風格整理成非常簡潔的樣式，頁面都是黑白風格，當滑鼠互動時，相應的元素會變成淺藍色，個人挺喜歡這種風格。也通過這次整理，重新溫習了css裡面幾個比較重要的概念，比css盒子模型，選取器，元素類型等。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
