ホームページ > 記事 > ウェブフロントエンド > HTML のブロック タグとインライン タグの概要
HTML のブロック タグとインライン タグの概要
- 零下一度オリジナル
- 2017-06-24 11:44:379928ブラウズ
HTMLタグは大きく分けてブロックタグとインラインタグの2種類に分けられ、ブロック要素、インライン要素とも呼ばれます。
ブロック要素
各ブロック要素は通常、単独で行全体または複数行全体を占有し、幅、高さ、配置などのプロパティを設定できます。Web ページのレイアウトの構築でよく使用されます。そしてウェブページの構造。また、ブロック レベルの要素コンテナーは、複数のネストされたブロック レベル タグまたはインライン タグを収容できます。一般的なブロック要素には、
～ 、
、
- 、
- 、
- などが含まれます。は Web ページ制作で使用されます。 で最も一般的に使用されるブロック要素です。
インライン要素
インライン要素は独立した領域を占有せず、構造のスタイルをサポートするために独自のフォント サイズと画像サイズのみに依存します。インライン要素はブロック レベルのタグをネストできません。他のインライン タグのみをネストできます。一般的なインライン要素には、、、、、
、、、、、<などがあります。 ;span> など。 タグは最も一般的に使用されるインライン要素です。1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>display</title> 6 </head> 7 <body> 8 <div>我是一个div</div> 9 <span>我是一个span</span>10 <strong>我是一个strong</strong>11 </body>12 </html></p> </li> </ol> </div> <p><img src="https://img.php.cn/upload/article/000/000/001/39a4e117fdff595b84ac4f7464705cdd-0.png" alt=""></p> <p> 強力なタグを div タグのように独自の行に配置したい場合、答えはもちろん可能ですか?これには、display 属性を使用する必要があります。より一般的に使用される値は、none、inline、block、および inline-block です。これらについては、次のように説明する価値があります。none: この要素は表示されず、ドキュメントから削除されます。 。 </p>block: この要素はブロックレベルの要素として表示されます。前後に改行があり、独自の行を占めます。インライン要素 → ブロック要素 <p>inline : この要素はインライン要素として表示されます: 1 の隣に 1。ブロック要素 → インライン要素<br>inline-block: インラインタグに従って組版しますが、幅と高さを設定でき、高さは行の高さに影響します<br><br>ブロック属性</p> <h3> さて、上記のstrong要素を次のように変えてみましょうブロックレベルの要素</h3> <p></p> <pre class="brush:php;toolbar:false"> 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>display</title> 6 7 <style type="text/css"> 8 strong { 9 display: block;10 }11 </style>12 </head>13 <body>14 <div>我是一个div</div>15 <span>我是一个span</span>16 <strong>我是一个strong</strong>17 </body>18 </html>
inline属性display属性をblockに設定すると、逆にdiv要素がinline要素になると、strongタグが排他的な行を占有することがわかります。表示属性の inline 値を使用する必要があります
1 <style type="text/css">2 strong {3 display: block;4 }5 6 div {7 display: inline;8 }9 </style>div タグと span が同じ行に表示されていることがわかります
inline-block 属性を見てみましょう。 -block 値。文字通り、最初からインラインのブロックレベル要素を意味します。 インライン要素の幅と高さは、独自のコンテンツによってのみサポートされることがわかっているので、ここではまず、span タグの幅と高さを設定します
ブラウザの実行結果から判断すると、span に設定された幅と高さは効果がありません。効果を確認するには、表示属性 inline-block を spam に設定し、span {width: 200px;height: 100px;background-color: red; }
span {width: 200px;height: 100px;background-color: red;display: inline-block; }none 属性を確認してください。
設定された幅と高さが有効になり、ブロックレベルの要素のように見えることがわかりますが、ここのspanタグはまだインライン要素です。場合によっては、ページ上の要素を一時的に非表示にする必要があります。この場合、たとえば、ページ上の div 要素を非表示にする必要があります。 CSS では、visibility 属性によってページ要素を表示するかどうかも制御できることに注意してください
ブラウザの表示結果から次の結論を簡単に導き出すことができますdiv {display: none; }
設定は次のとおりです。現在のラベルをページから直接削除します。これはページから直接削除され、ページのレイアウトには影響しません。可視性: 非表示の設定は、要素がページ上に表示されないことを意味しますが、依然としてスペースを占有します。ページ。
以上がHTML のブロック タグとインライン タグの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。