CSS のインライン要素とブロックレベル要素の違いの概要

この記事では、参考になるインライン要素とブロックレベル要素の違いを中心に紹介します

1 インライン要素とブロックレベル要素の違い。 1. インライン要素 行全体を占有せず、直線に配置されます。すべて同じ行に配置され、水平方向に配置されます。

ブロックレベルの要素は 1 行を占有し、垂直方向に配置されます。

2. ブロックレベル要素にはインライン要素を含めることができますが、インライン要素にはブロックレベル要素を含めることはできません。

3. インライン要素とブロックレベル要素の属性の違いは、主にボックスモデルのインライン要素に設定された幅が無効、高さが無効（line-heightは設定可能）、マージンによるものです。 up と down は無効であり、up と down のパディングも無効です。

2. インライン要素とブロックレベル要素間の変換

インライン要素からブロック要素への変換：display:block;

ブロック要素からインライン要素への変換：display:inline;

3. 問題の拡張。

問題の説明: img や input などのインライン要素の幅と高さを設定できるのはなぜですか?

詳細な回答:

CSS では、要素はドキュメント構造の基礎です。各要素は、要素のコンテンツを含むボックス (ボックス、「ボックス」とも訳されます) を生成します。ただし、要素が異なれば表示方法も異なります。たとえば、5b7d753036b89edc9f9b2eee394c95d0タグのsrc属性の値に基づいて画像情報を読み取って表示しますが、(X)HTMLコードを表示すると実際の内容は見えません。画像; 別の例は d5fd7aea971a85678ba271703566ebfd タグの type 属性によって、入力ボックスやラジオ ボタンなどを表示するかどうかが決まります。

HTMLの(X)a1f02c36ba31691bcfe87b2722de723b、d5fd7aea971a85678ba271703566ebfd、4750256ae76b6b9d804861d8f69e79d3、221f08282418e2996498697df914ce4e、273238ce9338fbb04bee6997e5552b95はすべて置換要素です。これらの要素には多くの場合、実際のコンテンツがありません。つまり、空の要素です。次に例を示します。

<img src=”cat.jpg” />
　　<input type="submit" name="Submit" value="提交" />

ブラウザは、要素のタグ タイプと属性に基づいてこれらの要素を表示します。置換可能な要素も表示内にボックスを生成します。代替可能 B) 置換不可能な要素のほとんどの要素

(X) HTML は置換不可能な要素です。つまり、そのコンテンツはユーザー (ブラウザーなど) に直接表現されます。例:

<p>段落的内容</p>

段落 e388a4556c0f65e1904146cc1a846bee は置換不可能な要素であり、「段落の内容」というテキストが完全に表示されます。

2. 要素の表示

CSS 2.1 の要素には、置換可能要素と置換不可能な要素の分類方法に加えて、ブロックレベル要素 (ブロックレベル) とインライン要素 ( inline- レベル、「インライン」要素とも訳されます）。

a) ブロックレベル要素

視覚的にブロックとしてフォーマットされた要素の最も明白な特徴は、デフォルトで親要素のコンテンツ領域を水平方向に埋めることであり、他に要素が存在しないことです。つまり、ブロックレベルの要素はデフォルトで独自の行を占めます。

典型的なブロックレベルの要素は、e388a4556c0f65e1904146cc1a846bee、e388a4556c0f65e1904146cc1a846bee、4a249f0d628e2318394fd9b75b4636b1 から 4e9ee319e0fa4abc21ff286eeb145ecc などです。

CSS を通じてフローティング (float 属性、左右にフロート可能) され、表示属性が "block" または "list-item" に設定されている要素は、ブロックレベルの要素です。 しかし、浮動要素は特別で、浮動しているため、それらの隣に他の要素が存在する可能性があります。また、「list-item」(リスト項目 25edfb22a4f469ecb59f1190150159c6) は、その前にドット記号または数値シーケンスを生成します。

b) インライン要素

インライン要素は新しいコンテンツ ブロックを形成しません。周囲に、3499910bf9dac5ae3c52d5ede7383485、45a2772a6b6107b401db3c9b82c049c2、8e99a69fbe029cd4e2b854e244eab143 などの他の要素が存在する場合があります。 、これは典型的なインラインレベルの要素です。

表示属性が「inline」に等しい要素はすべてインライン要素です。ほとんどすべての置換可能な要素は、a1f02c36ba31691bcfe87b2722de723b、d5fd7aea971a85678ba271703566ebfd などのインライン要素です。

ただし、要素の種類は固定ではなく、CSSの表示属性を設定することで、インライン要素をブロックレベルの要素にすることもできますし、ブロックレベルの要素をインライン要素にすることもできます。

3. 結論:

置換要素には通常、固有の寸法があるため、設定できる幅と高さがあります。たとえば、画像の幅と高さを指定しない場合、画像は保存時の画像の幅と高さである固有のサイズに従って表示されます。

フォーム要素については、ブラウザーにも幅や高さを含むデフォルトのスタイルがあります。

CSS のインライン要素とブロックレベル要素の違いの詳細については、PHP 中国語 Web サイトに注目してください。