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

高洛峰
リリース: 2017-02-22 13:34:52
オリジナル
1692 人が閲覧しました

HTMLタグの分類

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

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

ブロックレベルタグ

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

、h シリーズ、

    • インラインラベル

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

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

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

      それでは、スパンやフォントの幅と高さを制御できないかと考える生徒もいるでしょう。はい、今回はフローティングと位置決めを脇に置き、display 属性を介して相互に変換しましょう:

      1. ブロックレベルのラベルをインラインラベルに変換します: 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>
      ログイン後にコピー

      実行結果は次のとおりです。赤い部分をクリックすると 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>
      ログイン後にコピー
      実行結果:

      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)

      効果は次のとおりです:

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

      最初に、ブロックレベルのタグ、インラインタグ、インラインブロックレベルのタグについて書きます。読んだ後、皆さんにさらにアドバイスをいただければ幸いです。

      CSS ブロック レベル タグ、インライン タグ、およびインライン ブロック タグ変換 (2) の詳細については、PHP 中国語 Web サイトの関連記事に注目してください。

  • 関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート