CSS/ブロックレベル要素とインライン要素についての深い理解_html/css_WEB-ITnose

今日、私はついに HTML のブロックレベル要素とインライン要素をより合理的に理解しました。まず、w3c の block と inline の説明は、

1. ブロックの研究

w3c の説明では、つまり、ブロック (ブロックレベル) の要素が排他的な行に表示されます。その兄弟要素は、それと同じ行上にあってはなりません (ドキュメント フローから外れない限り)。ブロック要素のデフォルトの幅について話しましょう。

1. 幅は設定されていません: デフォルトはブラウザの表示可能領域と同じ幅です (ブラウザのデフォルト スタイルがリセットされた後)。

表示されている黄色の線は、実際には幅と高さが設定されていない DIV であり、境界線は 1 ピクセルの黄色の実線であり、画面全体を覆っていることがわかります。

2. 幅は設定されていませんが、親要素の幅は設定されています:

この例では、黄色の線は幅が設定されていない P で、その親要素は幅が の DIV です。 200px。P はコンソールに出力されます。 offsetWidth (offsetWidth=border+width+padding) 属性は 200 です。つまり、P は DIV の幅をある程度継承します。しかし、それは完全に真実ではありません。印刷される P の幅には 2px の境界線の幅が追加されるため、子要素の幅が設定されていない場合、親要素の幅の 100% を埋めることになります が、高さが埋まりません！

次の質問例を見てください:

すでに HTML コードがあります:

If次の CSS を適用します:

.a{ width:200px; height:100px;}

.b{padding:20%; background-color:red; 赤い領域のサイズはどれくらいですか?幅？高さ?

分析、.b は .a の子要素であり、.b には幅が設定されていないため、以前の研究から .b の幅が .a を完全に埋め、この幅には境界線 (ボーダーを含む）とパディング。つまり、私たちが見ることができる .b の幅は 200px のままで、 パディングの追加によって拡大されることはありません !高さはそうではなく、200*20%*2=80pxです。

この質問に対する答えは次のとおりです: 幅: 200px; 高さ: 80px。 (ただし、ie6 と混合モードでの状況はテストされていません)

2. インラインに関する研究

インライン要素は同じ行に複数表示でき、ブラウザのウィンドウ幅が収まるまで行は折り返されません。それに対応するには十分ではありません。インライン要素の幅と高さを見てみましょう。

1. 幅と高さが設定されていないスパン要素と、1 ピクセルの青い実線が表示効果に追加され、紫色になります:

2. 父親に 50 ピクセルの高さを追加すると、表示効果は次のようになります。紫:

1. 2 の間では何も変わりません。

3. 高さ 50px を追加すると、紫色になります:

1、2、3 はまったく同じように表示されます。 。

通常のドキュメント フロー インラインでは幅と高さの設定がサポートされていないため、例のスパンは親の幅と高さを継承せず、自分で設定した幅と高さは機能しません。高さ自体は、実際にはデフォルトの行の高さの高さの値です。パディングを追加したときの状況を見てみましょう:

これは、パディング: 10 を追加したときの状況です。彼の父 I は、高さ 10px の DIV を設定しました。スパンが DIV を超えていることがわかります。したがって、インライン要素の幅と高さは親要素とは関係がありません。

3. インラインとブロックの違いを要約します

1. インライン要素とブロックレベル要素の直感的な違い

インライン要素は、すべて同じ線上に水平に配置され、直線に配置されます。

ブロックレベルの要素はそれぞれ 1 行を占め、垂直方向に配置されます。ブロックレベルの要素は新しい行で始まり、改行で終わります。

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

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

4. 共通のインライン要素とブロック要素

ブロックレベルの要素

インライン要素

可変要素