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

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

首頁

web前端

css教學

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

高洛峰

Feb 20, 2017 pm 01:38 PM

css

在基礎1中，我詳細講了css的常見屬性，幾種不同的選擇器，在此基礎之上我們來進一步地認識它們的特性以便更好地學習和掌握相關開發技能。

HTML標籤的分類

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

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

區塊級標籤

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

典型的區塊級標籤有：

，h系列，

，

，< ;p> ，

，

行內標籤

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

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

行內區塊標籤：

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

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

那麼有的同學就會想了，難道我就不可以控制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：將行內標籤轉換為行內區塊標籤

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

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

<html>
    <head>
        <title>块级和行内块级</title>
        <style type="text/css">
            a{
                width: 100px;
                height: 100px;
                background-color: green;
                display: inline-block;  
            }
            div{
            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>
        <div>我是div1</div>   <!--这个是一般的块级标签，会上下分行-->
        <div>我是div2</div>
    </body>
</html>

登入後複製

運作結果：

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

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

<!DOCTYPE html>
<html>
    <head>
        <title>块级标签转行内标签</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                display: inline;
            }
        </style>
    </head>
    <body>
         <div>谷歌</div>  <!--按道理div是块级可以设置长和宽当通过display: inline;它已经是行内标签了，所以长和宽失效-->
         <div>https://www.google.com</div>
    </body>
</html>

登入後複製

效果如下：

css區塊級標籤，行內標籤，行內區塊標籤的轉換有關塊級標籤，行內標籤，行內塊級標籤我就先寫到這裡，也歡迎大家看了之後能夠多指點，感謝。

更多css塊級標籤，行內標籤，行內塊標籤的轉換相關文章請關注PHP中文網！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1317

PHP教程

1268

C# 教程

1245

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。