css區塊級標籤，行內標籤，行內區塊標籤的轉換（2）-css教學-PHP中文網

首頁

web前端

css教學

css區塊級標籤，行內標籤，行內區塊標籤的轉換（2）

高洛峰

Feb 22, 2017 pm 01:34 PM

HTML標籤的分類

在講標籤分類的時候，我們作為初學者在剛使用標籤的時候會發現有些屬性在一些標籤上不起作用，例如寬、高、水平居中等，其實這個屬性的使用只有在區塊級標籤上使用才會起作用。個人認為這也是初學者非常容易忽略的地方，所以我就把它記下來！

首先我們可以依照顯示的不同將HTML#標籤分為：區塊級標籤，行內標籤，行內區塊標籤；現對其分別介紹。

區塊級標籤

#特點：獨佔一行，對高度、寬度、行高以及頂和底邊距都可設定的屬性值生效；如果不給寬度，塊級元素就預設為瀏覽器的寬度，即就是100%寬；

典型的區塊級標籤有：

，h系列，

，

行內標籤

特點：可以多個標籤存在一行，無法直接設定行內標籤的高度、寬度、行高以及頂和底邊距，完全靠內容撐開寬高！

典型的行內標籤有：，，，，，，，，，， ;，

#行內區塊標籤：

特徵：結合的行內與區塊層級的有點，不僅可以對寬高屬性值生效，還可以多個標籤存在一行顯示；

典型的行內標籤有： css區塊級標籤，行內標籤，行內區塊標籤的轉換（2），

那麼有的同學就會想了，難道我就不可以控制span或font的寬高了嗎？可以的，那麼我們這次拋開浮動和定位不說，就說透過display屬性來將它們互相轉換：

1、區塊級標籤轉換為行內標籤：display: inline;

2、行內標籤轉換為區塊級標籤：display:block;

#3、轉換為行內區塊標籤：display：inline-block;

只要給對應的標籤使用這個display這個屬性，取對應的值，就可以將顯示模式互相轉換。

下面請看如下範例：

1：將行內標籤轉換為區塊級標籤

<!DOCTYPE html>
<html>
    <head>
        <title>行内标签转块级标签</title>
        <style type="text/css">
            a{
                width: 200px;
                height: 200px;
                background-color: red;
                display: block; 
            }
        </style>
    </head>
    <body>  <!--正常情况a标签作为一个行内标签你设置长和宽是没有效果的-->
        <a href="https://www.baidu.com">百度</a>
    </body> <!--而当你用display: block;代表行内标签转为块级标签-->
</html>

登入後複製

運行結果如下;點紅色任一區域都能實現跳到百度，所以他可以實現擴大連結範圍。

css區塊級標籤，行內標籤，行內區塊標籤的轉換（2）

2：將行內標籤轉換為行內區塊標籤

上面已經講過行內區塊級標籤和區塊級標籤的區別，我在強調一遍：區塊級標籤和行內區塊級標籤都是可以設定長和寬的，但區塊級標記當你設定好後

它是自動換行的，你不能在這一行再放其它東西，而行內塊級標籤在同一行中可以放置多個行內標籤，具體我有案例來解釋。

<html>
    <head>
        <title>块级和行内块级</title>
        <style type="text/css">
            a{
                width: 100px;
                height: 100px;
                background-color: green;
                display: inline-block;  
            }
            p{
            width:100px;
            height:100px;
           background-color: red;
           margin-top:10px;  /* margin-top是来设置上下两个块的上下间距，关于盒子下一节我单独来讲*/
           }
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com">百度</a>   <!--通过 display: inline-block;就可以将行内标签转为行内块级标签-->
        <a href="https://www.baidu.com">百度一下</a>
        <p>我是p1</p>   <!--这个是一般的块级标签，会上下分行-->
        <p>我是p2</p>
    </body>
</html>

登入後複製

執行結果：

css區塊級標籤，行內標籤，行內區塊標籤的轉換（2）

3.將區塊級標籤轉換為行內標籤

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <title>块级标签转行内标签</title> 5         <style type="text/css"> 6             p{ 7                 width: 100px; 8                 height: 100px; 9                 background-color: red;10                 display: inline;11             }12         </style>13     </head>14     <body>15          <p>谷歌</p>  <!--按道理p是块级可以设置长和宽当通过display: inline;它已经是行内标签了，所以长和宽失效-->16          <p>http://www.php.cn</p>17     </body>18 </html>

登入後複製

效果如下：

css區塊級標籤，行內標籤，行內區塊標籤的轉換（2）