前面有一篇文章講到在css世界中，html元素的表現都是乙個個盒子，而css中盒子的顯示方式有三種方式，分別是塊元素、行內元素和行內塊元素。本文總結這三種顯示方式的特徵和區別。最近在整理cnblogs上頁面的樣式，預設右側【隨筆分類】中的標籤是每行顯示乙個，而我想把右側【隨筆分類】中的標籤設定為一行顯示多個標籤，至於顯示多少個則隨標籤的大小而定，並且每個標籤在滑鼠放上去的時候會有背景顏色的變化。效果如下圖。
下面我們就來分析一下如何讓左邊的標籤顯示方式變為右邊這樣的吧
在分析塊元素之前我們首先建立html網頁，以便後面的分析。html**如下。
pagestyle.css檔案中還沒有任何**，上面這段**的效果如下。
我們可以發現，每個列表li元素都是呈單行顯示的，並且他們的高度和內部的內容相當，現在我們給li元素增加乙個外邊框並適當的設定一下padding，在pagestyle.css中寫如下**。
li通過給li元素設定邊框，可以知道li元素預設是佔一行的，它的寬度和父容器的寬度一樣，而高度則是他們實際內容+padding的高度。li元素屬於c塊元素。下面總結一下css塊元素有哪些特徵。
上面說了塊元素總是要佔據一行的，寬度與父容器一致。當我們把li元素的寬度手動設定成很小的寬度，那麼下面那個li元素會不會跑到上面來呢？答案是肯定不會跑上來的，因為塊元素總是那麼的霸道，即使自己寬度很小，也要獨佔一行的，不信看下面的**和效果。
li我們可以看到li元素的寬度變了，但是它依然是獨佔一行的。
常見的塊元素有div，h1-h6，p，ul，ol，li等等。一般布局中的父元素都是採用塊元素。
上面第2節講到li元素是塊元素並且獨佔一行的，而的標籤都是使用li元素。那我們需要把的標籤變為一行顯示多個，該怎麼辦呢？下面開始輪到行內元素上場了。
行內元素，顧名思義即在一行內顯示的元素。在css中，有乙個display的屬性，他可以更改html元素預設的顯示方式，可以把塊元素變為行內元素，行內元素變為塊元素。display屬性有四個值可選，分別是block：塊元素；inline：行內元素；inline-block：行內塊元素；none：元素不顯示。
下面我們把li元素的css樣式新增乙個display屬性看看效果。**如下。
li通過設定li元素的display屬性，將其改變為行內元素，li元素就可以一行顯示多個，乙個挨著乙個，從效果中發現，我們設定了margin-left:5px這個左邊距是有效果，而設定margin-top:7px是沒有效果。這就是行內元素的特點。
行內元素對其高度有關的屬性設定都無效，導致li元素兩行之間都緊靠在一起，顯然在美觀上不能滿足我們的要求。但是css提供了另外乙個屬性也就是行高line-height，該屬性可以設定行與行之間的高。，下面我給li元素的父容器ul元素設定行高。**如下。
ul
li
通過設定ul元素的行高，實現了行內元素上下之間的間隔。雖然離我理想中的效果差不太遠了，但是還是有些不近人意。上下邊框和元素的內容挨的太近（內邊距無），當滑鼠移動到上面的時候，效果可能會不太好。不過我們還是按照我們理想中的效果試試。**如下。
ul
lili:hover
前面說到設定行內元素與高度相關的屬性都是無效的，但是上面設定的padding-top和padding-bottom好像是有效果的哈。但是實質上設定padding的上下內邊距並沒有增加行高，也沒有撐大父容器的文件流，而且我們可以看到背景顏色顯示的時候，還有覆蓋了上下li元素的內容了。
上面的效果我們再美化一下css效果（修改行高和上下邊距），差不多就能夠達到我們想要的效果了，但是從上面效果圖的右邊來看，有時候乙個行內元素在一行中沒顯示完的時候，會有一小部分在下面一行顯示，如果最後出現效果圖右邊這種情況，那就比較尷尬了。
常見的行內元素有：a、img、input、select等。
行內塊並不是兼具兩者都有的特徵，從字面上來理解，就是可以在行內顯示的塊元素，在第2節講到塊元素即使設定了寬度，也會獨佔一行，並會跟其他元素同行，那麼行內塊元素在這點上就與塊元素不同。
關於第三點特徵我們可以寫**實驗一下。把ul元素下面的第乙個li元素設定class屬性。**如下：
.net(7)
li
li:hover
ul .first
我們可以發現第一行有兩個li元素，第一li元素我們設定了下邊距為50px，而第二個沒有設定預設為0，導致最終這一行與下一行的邊距為第乙個li元素的下邊距50px，和我們預想的效果一致。
經過對行內塊元素的總結，發現行內塊元素能夠很好的滿足我們的需求。下面把li元素設定為行內塊顯示方式，對其進行美化，**如下。
li
li:hover
其實css預設的元素型別只有兩種，塊元素和行內元素，而行內塊元素需要我們使用display去設定的。
經過一天的時間整理自己的部落格風格，將部落格風格整理成非常簡潔的樣式，頁面都是黑白風格，當滑鼠互動時，相應的元素會變成淺藍色，個人挺喜歡這種風格。也通過這次整理，重新溫習了css裡面幾個比較重要的概念，比css盒子模型，選擇器，元素型別等。
CSS元素型別
html元素可以分為兩種 塊級元素 block level element 內聯元素 inline element 也叫行元素 兩者的區別在於以下三點 1 塊級元素會獨佔一行 即無法與其他元素顯示在同一行內，除非你顯式修改元素的display屬性 而內聯元素則會在一行內顯示。2 塊級元素可以設定wi...
css元素型別
css元素型別分為 塊狀元素，內聯元素，內聯塊狀元素 塊狀元素 1 在頁面中以矩形區域顯示 2 自上而下排列，獨佔一行 3 可以直接新增寬高，可做為其他元素或者內容的容器 常用的塊狀元素有 fieldset 表單字段集 colgroup col 表單列分組元素 table tr td 內聯元素 1 ...
css的元素型別
css的標籤分類 1.塊狀元素 特點 在頁面以矩形區域顯示，之上而下排行，獨佔一行。可以直接新增寬高，可以作為其他元素的內容的容器。div ul li p h1 h6 dl form 2.內聯元素 內聯塊元素 特點 在頁面中有內容來撐開，一行內逐個排列，不可以直接新增寬高，個別屬性會出現問題 pad...