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

效果如下：

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

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

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

陳述

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

@KeyFrames vs CSS過渡：有什麼區別？May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

使用頁面CMS進行靜態站點內容管理May 13, 2025 am 09:24 AM

我知道，我知道：有大量的內容管理系統選項可用，而我進行了幾個測試，但實際上沒有一個是一個，y＆＃039;知道嗎？怪異的定價模型，艱難的自定義，有些甚至最終成為整個＆

鏈接HTML中CSS文件的最終指南May 13, 2025 am 12:02 AM

鏈接CSS文件到HTML可以通過在HTML的部分使用元素實現。 1)使用標籤鏈接本地CSS文件。 2)多個CSS文件可通過添加多個標籤實現。 3)外部CSS文件使用絕對URL鏈接，如。 4)確保正確使用文件路徑和CSS文件加載順序，優化性能可使用CSS預處理器合併文件。

CSS Flexbox與網格：全面評論May 12, 2025 am 12:01 AM

選擇Flexbox還是Grid取決於佈局需求：1)Flexbox適用於一維佈局，如導航欄；2)Grid適合二維佈局，如雜誌式佈局。兩者在項目中可結合使用，提升佈局效果。

如何包括CSS文件：方法和最佳實踐May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用標籤在HTML的部分引入外部CSS文件。 1.使用標籤引入外部CSS文件，如。 2.對於小型調整，可以使用內聯CSS，但應謹慎使用。 3.大型項目可使用CSS預處理器如Sass或Less，通過@import導入其他CSS文件。 4.為了性能，應合併CSS文件並使用CDN，同時使用工具如CSSNano進行壓縮。

Flexbox vs Grid：我應該學習兩者嗎？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

軌道力學（或我如何優化CSS KeyFrames動畫）May 09, 2025 am 09:57 AM

重構自己的代碼看起來是什麼樣的？約翰·瑞亞（John Rhea）挑選了他寫的一個舊的CSS動畫，並介紹了優化它的思維過程。

CSS動畫：很難創建它們嗎？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

See all articles