CSS ブロックレベルのタグ、インラインタグ、およびインラインブロックタグの変換 (2)-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS ブロックレベルのタグ、インラインタグ、およびインラインブロックタグの変換 (2)

高洛峰

Feb 22, 2017 pm 01:34 PM

HTMLタグの分類

タグの分類について話すとき、初心者として、初めてタグを使用するとき、幅、高さ、水平方向の中央揃えなど、一部の属性が一部のタグで機能しないことに気づくでしょう。実際、この属性の使用は、ブロックレベルのタグで使用された場合にのみ機能します。個人的に初心者が見落としやすい点だと思うので書いてみました！

まず、HTMLタグは、表示に応じてブロックレベルタグ、インラインタグ、インラインブロックタグに分けて紹介します。

ブロックレベルタグ

特徴：は専用の行を占有し、高さ、幅、行の高さ、上下の余白を設定できる属性値幅が指定されていない場合は、ブロックレベルの要素がデフォルトでブラウザの幅 (100%) に設定されます。一般的なブロックレベルのタグは次のとおりです:

、h シリーズ、

、

インラインラベル

特徴: 複数のラベルが存在可能インラインラベルの高さ、幅、行を直接設定することはできません。高さと上下の余白は、幅と高さをサポートするコンテンツに完全に依存します。典型的なインラインタグは次のとおりです: 、、、、、、、、

インラインブロックタグ:

特徴: インラインレベルとブロックレベルの利点を組み合わせることで、幅と高さの属性値に影響を与えるだけでなく、複数のラベルを 1 行に表示することもできます。 典型的なインラインタグには以下が含まれます: 、

1. ブロックレベルのラベルをインラインラベルに変換します: 2.ブロックレベルのタグ：display:block;

以下の例を参照してください:

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>

ログイン後にコピー

実行結果は次のとおりです。赤い部分をクリックすると Baidu にジャンプします。リンク範囲の拡大を実現できます。

2:
インラインタグをインラインブロックタグに変換します

CSS ブロックレベルのタグ、インラインタグ、およびインラインブロックタグの変換 (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>

ログイン後にコピー

実行結果:

 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)