CSS元素類型

時間 2019-11-18

標籤 css 元素類型欄目 CSS 简体版

原文原文鏈接

前面有一篇文章講到在css世界中，html元素的表現都是一個個盒子，而css中盒子的顯示方式有三種方式，分別是塊元素、行內元素和行內塊元素。本文總結這三種顯示方式的特徵和區別。css

1 寫在前面

最近在整理cnblogs上頁面的樣式，默認右側【隨筆分類】中的標籤是每行顯示一個，而我想把右側【隨筆分類】中的標籤設置爲一行顯示多個標籤，至於顯示多少個則隨標籤的大小而定，而且每一個標籤在鼠標放上去的時候會有背景顏色的變化。效果以下圖。html

下面咱們就來分析一下如何讓左邊的標籤顯示方式變爲右邊這樣的吧算法

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文件中尚未任何代碼，上面這段代碼的效果以下。3d

咱們能夠發現，每一個列表li元素都是呈單行顯示的，而且他們的高度和內部的內容至關，如今咱們給li元素增長一個外邊框並適當的設置一下padding，在pagestyle.css中寫以下代碼。code

li{
    border:1px solid green;
    margin-top:2px;
    padding:5px 0 5px 0;
}

效果以下。
htm

經過給li元素設置邊框，能夠知道li元素默認是佔一行的，它的寬度和父容器的寬度同樣，而高度則是他們實際內容+padding的高度。li元素屬於c塊元素。下面總結一下css塊元素有哪些特徵。blog

塊元素默認佔據一行，寬度與父容器一致，高度爲內容+padding的高度。
塊元素能夠經過設置margin和padding的值來控制塊元素與其餘元素的邊距以及自身邊框與內容的留白（內邊距）。
塊元素能夠設置寬度和高度。
塊元素設置高度，padding，margin會撐大父容器的文檔流，固然這要在父容器沒有設置固定高度的前提下。

上面說了塊元素老是要佔據一行的，寬度與父容器一致。當咱們把li元素的寬度手動設置成很小的寬度，那麼下面那個li元素會不會跑到上面來呢？答案是確定不會跑上來的，由於塊元素老是那麼的霸道，即便本身寬度很小，也要獨佔一行的，不信看下面的代碼和效果。ip

li{
    border:1px solid green;
    margin-top:2px;
    padding:5px 0 5px 0;
    width:150px;/*手動設置寬度*/
}

咱們把li元素的寬度設置爲150，效果以下。utf-8

咱們能夠看到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去設置的。