前段落では、CSSボックスモデルを新たな視点から深く理解してみました (1)_html/css_WEB-ITnose

CSS スタイルのルールの学習は、物理学、数学、その他のプログラミング言語のようないくつかの基本的な概念、基本的な公理、ルールが含まれていないため、非常に退屈で退屈です。 CSS にはいくつかの基本的な概念がありますが、いくつかのルールは説明されておらず、これらのルールに基づいてすべてのパフォーマンスはページ上のスタイル宣言ブロックの位置を推測する必要があります。論理的推論をほとんど必要とせずに、ブロックの特定のパフォーマンスを推測できるのは、この方法で記述されたレピュテーション ブロックのパフォーマンスを知っていて覚えていることがほとんどです。その理由は、スタイルの組み合わせが非常に煩雑であり、同じマージンの概念がブロック レベル要素とインライン要素で異なる動作をするためです。たとえ、マージンのパフォーマンスも異なるためです。さらに、ブロックレベル要素内で同じ方向であっても、親要素の一部の属性が異なると、さらに厄介な状況になります。さまざまなブラウザーの互換性を考慮すると、CSS スタイル ルールをマスターするには、1 つまたはいくつかのスタイルを使用するしかありません。 (多少の論理的根拠はあるかもしれませんが) そのため、フロントエンドの職業は他のプログラミング言語よりも実務経験が重要であると感じています。

言語を習得した結果、明確な知識体系図が頭の中に形成されますが、CSS を段階的に学習するための明確な論理的境界線を持つことは、概念的な相関性があまりにも弱いため、困難です。この概念を理解するのに役立つ明確なロジックはありません。ボックス モデルなどの既存の概念をよく理解することが非常に必要です。

ボックス モデルと関連する知識ポイントは、CSS において非常に重要かつ中核的な位置を占めており、誰もがよく聞くボックス モデルの非常に古典的な理解は、ボックス自体が境界線であり、その中に商品が入っていることのたとえです。内容と塗りつぶしです。ボックスは配置時に一定の距離 (マージン) で離す必要があります。このたとえには利点もありますが、それでも（少なくとも私にとっては）語られていないように感じます。さらに、このアナロジーは、パディングとコンテンツ全体をラベル要素のコンテンツとして暗黙的にみなし、マージンをコンテンツ以外のものとしてみなしているため、CSS レイアウトの関連性の理解に一定の逸脱が生じると感じます。例は初心者向けです。幅と高さで指定された幅と高さがコンテンツの幅と高さであること（css3 では、幅と高さの指定範囲を変更できる新しい属性が追加されました）、およびパディング、ボーダーであることにまったく気づきません。とマージンは一緒にカウントされません。したがって、今はコンテンツ、パディング、ボーダー、マージンをボックス関連の理解に入れたくありません。ボックスモデル以外の観点から理解することも可能です（ただし、それは人によって異なる場合があります）。 )、これはボックス モデルの類似性を避けるのに役立ちます。


初めてフロントエンドに触れると、次のような内容が表示されます。html はページのコンテンツをマークし、css はページのスタイルを表し、JavaScript はページの動作を制御します。これは、ページのコンテンツが HTML タグでマークされており、コンテンツの一部には、それをマークするための関連する HTML タグが必要であることを意味します。CSS が実現するのは、パフォーマンスとコンテンツの分離です。つまり、CSS がコンテンツにさまざまな要素を追加します。このようなスタイルの場合、操作対象はコンテンツとなるため、CSSの概念はボックスを起点とするのではなく、コンテンツを起点として議論されます。

Web ページを開くと、ページのコンテンツ範囲がテキスト、フォーム関連 (入力ボックス、ボタン、ラジオ ボックス、チェック ボックス、ドロップダウン ボックス)、写真、オーディオ、ビデオであることがわかります。コンテンツはページ上の長方形の領域に配置されます。この領域の幅と高さの属性は、レイアウト用のラベル要素によって形成される余分なスペースです。
これらのコンテンツをマークする HTML タグは、置換要素と非置換要素の 2 つのタイプに分類されます。
置換要素: 上記はテキストを除くすべての置換要素です。置換要素は、ラベル要素が特定のコンテンツの場所を占めることを意味します。実際の特定のパフォーマンスは、元の HTML コードでは確認できません。画像、音声、ビデオなどのタグは、特定の画像ファイル、音声ファイル、またはビデオ ファイルを指します。プレースホルダーとして機能するタグは、置換要素です。
非置換要素: タグ要素でマークされたコンテンツは、span タグでマークされたテキストと同様に、元の HTML コードで見ることができます。テキストをマークするspanタグは置換不可能な要素です。

コンテンツには常にそれをマークするためのタグがあり、ブラウザでのタグのレンダリング結果はコンテンツの周囲の長方形の領域になるため（CSS3では非長方形の領域に設定できます）、この長方形の領域はコンテンツの周囲に余分なスペースが生成されます。生成される余分なスペースには、padding (内側の余白)、border (境界線)、および margin (外側の余白) の 3 種類があります。通常のドキュメント フローでは、コンテンツの CSS スタイル レイアウトのほとんどは、パディング、境界線、およびマージンを設定することによって実現されます。

パディングスペースは、境界線とコンテンツ領域の間にある無色透明の領域であり、この領域では要素の背景色が表示され、この領域は境界線とマージンなしではマージできません。
枠線スペースは、内側の余白と外側の余白の間の領域で、スタイルと色が組み込まれています。この領域も背景色で描画されるため、枠線がくり抜かれている場合は背景色が見えます。
マージンスペースは枠線の外側にある無色透明の領域で、この領域には親要素の背景色が表示され、通常のフローではこの領域を垂直方向に結合できます。水平方向の結合ルールはありません。 。

上記の3つのスペース領域はデフォルトでは存在しません。

各要素はコンテンツの周囲の長方形の領域にレンダリングされますが、デフォルトで要素ごとにレンダリングされる長方形の領域のタイプは異なる場合があります。表示設定により、長方形領域の種類を切り替えることができます。長方形領域を分類する基準の 1 つは、長方形領域の前後に改行があるかどうかを確認することです。前後に改行がある長方形領域はブロックレベルの長方形領域であり、前後に改行がない長方形領域はインラインです。長方形のエリア。異なるカテゴリの対応する長方形領域に対応する要素は、ブロックレベル要素またはインライン要素とも呼ばれます。改行文字はブロック レベルとインラインを区別するためのマークに過ぎず、すべての違いではありません。また、両者のデフォルト状態と変更動作にもわずかな違いがあります。
ドキュメントフローではデフォルトで複数のブロックレベル要素が縦に配置されており、その幅は親要素のコンテンツ領域の幅、高さは自身のコンテンツ領域の高さを自由に変更できます。独自のコンテンツ領域の幅と高さ。複数のインライン要素が横方向に配置され、その幅と高さがコンテンツ領域の幅と高さになります。コンテンツ領域の幅と高さは設定できません。


このように、ページの内側から外側に向かってタグでマークされたコンテンツのパフォーマンスは、コンテンツ領域、内側マージン、ボーダー、外側マージンの4つの部分が密接に関連して全体として配置されています。レイアウト コンテキスト内に配置され、このレイアウト コンテキストに基づいて配置されます。レイアウト コンテキストは親要素のコンテンツ領域であり、ブロックレベル要素またはインライン要素内にある場合があります。一般に、各ラベルの内容が左から右の順序で配置できる場合は、左から右の順序で配置できない場合（オーバーフローや改行など）、左から右の順序で配置する必要があります。要素タグがそのような配置順序で配置されている場合、そのタグはドキュメント フロー内にあると言われます。この制約を取り除くのはフローティングと配置だけであり、その場合、要素はドキュメント フローから外れると言われます。