️ブロックレベルラベル、インラインラベル、関連する開発スキルをよりよく学び習得するために、それらの特徴について詳しく学びましょう。 HTMLタグの分類 タグの分類について話すとき、初心者として、初めてタグを使用するとき、幅、高さ、水平方向の中央揃えなど、一部の属性が一部のタグで機能しないことがわかります。この属性 Use は、ブロックレベルのタグで使用された場合にのみ機能します。個人的に初心者が見落としやすい点だと思うので書いてみました！ まず第一に、HTML タグは、さまざまな表示に応じてブロックレベルのタグ、インライン タグ、およびインライン ブロック タグに分けることができます。これらを個別に紹介します。 ブロックレベルのタグ 特徴: 排他的な行を占有し、高さ、幅、行の高さ、および幅が指定されていない場合は上下のマージンの設定可能な属性値に影響します。 level 要素のデフォルトはブラウザの幅、つまり 100% 幅です 典型的なブロックレベルのタグは次のとおりです: 、h シリーズ、 、、 、 、 、インラインタグ 特徴: 1 行に複数のタグが存在可能 インラインタグの高さ、幅、行の高さ、上下の余白を直接設定することはできません。 . 幅と高さはコンテンツによって完全に異なります。 典型的なインライン タグは次のとおりです: 、、、、、、、、インライン ブロック タグ: 特徴: インライン レベルとブロック レベルの利点を組み合わせることで、幅と高さの属性値に影響を与えるだけでなく、複数のタグを 1 行に表示することもできます 典型的なインライン タグは次のとおりです。 ;img> ;, それでは、スパンやフォントの幅と高さを制御できないのではないかと考える生徒もいるでしょう。はい、今回はフローティングと位置決めを脇に置き、display 属性を介して相互に変換しましょう: 1. ブロックレベルのラベルをインラインラベルに変換します: 2.ブロックレベルのタグ：display:block;3. インラインブロックタグに変換：display:inline-block; 対応するタグのdisplay属性を使用し、対応する値を取得する限り、次のように表示できます。モードを相互に変換します。 以下の例を参照してください: 1: インラインタグをブロックレベルのタグに変換します 行内标签转块级标签 a{ width: 200px; height: 200px; background-color: red; display: block; } 百度 ログイン後にコピー 実行結果は次のとおりです。赤い部分をクリックするとBaiduにジャンプし、リンク範囲を広げることができます。 2: インラインタグをインラインブロックタグに変換します インラインブロックレベルタグとブロックレベルタグの違いについてはすでに説明しましたが、ブロックレベルタグとインラインブロックの両方についてもう一度強調します。レベルタグは長くて幅広に設定できますが、ブロックレベルタグは設定後に自動的に折り返されます。一方、インラインブロックレベルタグは複数のインラインタグを配置できます。具体的には、ケースについて説明します。 块级和行内块级 a{ width: 100px; height: 100px; background-color: green; display: inline-block; } div{ width:100px; height:100px; background-color: red; margin-top:10px; /* margin-top是来设置上下两个块的上下间距，关于盒子下一节我单独来讲*/ } 百度 百度一下 我是div1 我是div2 ログイン後にコピー実行結果: 3. ブロックレベルのタグをインラインタグに変換する 块级标签转行内标签 div{ width: 100px; height: 100px; background-color: red; display: inline; } 谷歌 https://www.google.com ログイン後にコピー効果は次のとおりです: ブロックレベルのタグ、インラインタグ、およびinline block-level tags first 現時点では、皆さんも読んだ後にさらにアドバイスをいただければ幸いです。ありがとうございます。 CSS ブロック レベル タグ、インライン タグ、およびインライン ブロック タグの変換に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
