HTMLブロックタグとインラインタグを区別する
この記事では、HTMLブロックとHTMLインラインの概念について説明します。これは多くのCSSプロパティを含むため、非常に重要な問題です。
2つのpタグの内容が2つの異なる行にあり、2つのスパンタグで同じ行にあるのはなぜか疑問に思ったことはありませんか。これは、ブラウザがブロックとインラインの表示方法を決定するためです。ブロックスタイルを示しているカードは別のブロックにあり、インラインを示しているカードは一列に並んでいます。
Mục lục
HTMLブロックタグとは何ですか？
HTMLブロックは、ブラウザにHTMLタグを表示するもので、ブロックの形式になります。長さは100％で、高さは内部のコンテンツによって異なります。これは、ブラウザに表示されたときに以下のすべてのHTMLタグが別の行に表示されることを意味します。
div、p、header、footer、table、ul、li、section、article ..などのブロックHTMLタグがいくつかあります。
これらのカードの一般的な機能は次のとおりです。
- デフォルトの長さは100％です
- コンテンツと境界線の間のスペースを設定できます。
- 幅は、widthプロパティを使用して変更できます。
例：2つのdivタグが2つの異なる行に表示されます。
<div>Nội dung thẻ div thứ nhất</div> <div>Nội dung thẻ div thứ hai</div>結果：
Nội dung thẻ thứ nhất Nội dung thẻ thứ haiインラインHTMLタグとは何ですか？
HTMLインラインは、指定された範囲内のHTMLタグ内のコンテンツを表示する方法です。つまり、その長さはデータのサイズによって異なります。したがって、インラインタグは、ブロックのような行ではなく、次々に表示されます。
span、strong、i、b、a、br、big、button、textarea、label 、…などのインライン形式を表示する多くのHTMLタグがあります。
例：2つのスパンタグは連続したデータを表示しますが、例1のように2行ではありません。
<span>Nội dung thẻ span thứ nhất</span> <span>Nội dung thẻ span thứ hai</span>インラインを使用してHTMLタグをブロックするのはいつですか？
そのように2つのフォーマットを分割する理由があります。ブロックを内部でラップするHTMLタグを作成する場合は、ブロックをレンダリングするため、divまたはpタグを使用する必要があります。行にデータを表示する場合は、インラインタグを使用します。
問題は、ブロックタグをインラインタグに変えることができるかどうかです。非常にシンプルで、CSSのdisplayプロパティを使用するだけです。
例：2つのdivタグにCSS display:inlineを設定します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background: white; display: inline } </style> </head> <body> <div>Nội dung thẻ div inline thứ nhất</div> <div>Nội dung thẻ div inline thứ hai</div> </body> </html>結果：
Nội dung thẻ div inline thứ nhất Nội dung thẻ div inline thứ nhất逆に、インラインからブロックに変換する場合は、CSSプロパティを使用します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> span{ background: white; display: block } </style> </head> <body> <span>Nội dung thẻ span block thứ nhất</span> <span>Nội dung thẻ span block thứ hai</span> </body> </html>結果：スパンタグですが、ブロックが表示されます。
Nội dung thẻ span block thứ nhất Nội dung thẻ span block thứ haiこれで、HTMLでインラインとブロックを使用する方法に関するチュートリアルを終了しました。後でCSSを使用するときに、CSSに頻繁に遭遇します。
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
