CSS ボックスmodel_html/css_WEB-ITnose について話しましょう

CSS ボックス モデルの原則:

Web デザインでよく聞く属性名: content、padding、border、margin、CSS ボックス モードには次の属性があります。

これらの属性を、私たちが日常生活で目にする箱（ボックス）に置き換えることで理解することができます。私たちが日常生活で目にする箱は、物を入れることができ、またこれらの属性を備えているため、ボックスパターンと呼ばれます。

CSSでは、ボックスモデルはボックスモデル（またはボックスモデル）と呼ばれ、要素のコンテンツ、パディング、ボーダー、マージンの方法を指定します。 HTML ドキュメントでは、すべての要素にボックス モデルがあるため、Web の世界 (特にページ レイアウト) では、ボックス モデルがあらゆる場所に存在します。以下はボックス モデルの図です:

CSS ボックス モデルを理解する:

日常生活におけるボックスとして理解できます。コンテンツはボックスに含まれる内容であり、画像、テキスト、または小さなボックスをネストすることができます。コンテンツがボックスよりも大きい場合は、ボックスよりも大きくすることはできません。破裂しますが、CSS では、コンテンツが大きすぎるとボックスは伸縮しますが、ボックスが損傷することはありません。詰め物は、箱の中の物が損傷しないように何かを詰めるのと同じように、詰め物です。詰め物には、大きいか小さいか、柔らかいか硬いか、および箱のサイズがあります。パディングは Web ページに反映されます。境界線にはサイズと色のプロパティがあり、これらのプロパティはボックスの厚さとその色または材質に相当するため、外側のレイヤーは境界線です。マージンとは、私たちのボックスと他のボックスや他のものとの間の距離です。箱がたくさんある場合、マージンは箱間の直線距離であり、通気性があり、美しく、取り出しやすいです。

ボックス モデルを理解すると、要素の最終的なサイズがどのように決定されるかを理解するのに役立ち、また、Web ページ上で要素がどのように配置されるかを理解するのにも役立ちます。ボックス モデルは主にブロック レベルの要素に適しています。

CSSボックスのサイズの計算:

高さと幅に値を割り当てることで、コンテンツの高さと幅を定義します。宣言がなされていない場合、高さと幅のデフォルト値は auto になります。つまり、div{width: 200px; height: 200px} など、CSS のブロックレベル要素の幅と高さの属性に値を割り当てる場合、幅と高さはコンテンツ部分にのみ設定されます。 、上の図のコンテンツ領域の長さと幅の長さ。コンテンツ、パディング、境界線の合計ではなく (ただし、IE6 を含む IE の初期バージョンでは、ボックス モデルの幅と高さは、コンテンツ + パディング + 境界線の合計です。これは人々の論理的思考習慣に準拠していますが、は仕様に準拠していないため、多くの互換性の問題が発生します)

含まれるブロックの注釈

含まれるブロックは、ビジュアル書式設定モデルの重要な概念であり、ボックス モデルに似ており、長方形として理解することもできます。この四角形の機能は、その中に含まれる要素の参照を提供することです。要素のサイズと位置の計算は、多くの場合、要素が配置されている包含​​ブロックによって決まります。

簡単に言うと、包含ブロックは位置決め参照フレーム、または位置決め座標参照系であり、要素が位置決め表示 (相対、絶対、固定) 用に定義されると、包含ブロックの性質があり、要素の位置決めが行われます。 contains は、位置決めと調整のための座標系として包含ブロックを使用します。

🎜 🎜 🎜 🎜 🎜 div と table はどちらも包含ブロックです。div が table を包含するブロック、または table が div を包含するブロックであると言えます。これは絶対的なものではありません。 🎜 🎜 その定義は次のとおりです: 🎜

1. ユーザー エージェント (ブラウザなど) は、ルート要素を包含ブロック (初期包含ブロックと呼ばれる) として選択します。
2. 他の要素の場合、その要素が絶対配置を使用しない限り、包含ブロックは最も近いブロック レベルの祖先要素ボックスのコンテンツ境界で構成されます。
3. 要素に属性「position:fixed」がある場合、それを含むブロックはビューポートによって確立されます。
4. 要素に 'position:absolute' 属性がある場合、位置が静的ではない最も近い祖先から包含ブロックが作成されます。
   1. 祖先がブロック レベルの要素の場合、包含ブロックは祖先のパディングエッジから形成されます。
   2. 祖先がインライン要素の場合、それを含むブロックは祖先の方向属性に依存します。
      1. 方向が ltr (左から右) の場合、祖先によって生成された最初のボックスの上部と左のコンテンツ境界は、それを含むブロックの上部と左にあり、祖先の最後のボックスの下部と右のコンテンツ境界は次のようになります。含むブロックの下と右。
      2. 方向が rtl (右から左) の場合、祖先によって生成された最初のボックスの上部と右側のコンテンツ境界は、それを含むブロックの上部と右側にあり、その先祖によって生成された最後のボックスの下部と左側のコンテンツ境界は、祖先は、それを含むブロックの下にあり、左側にあります。

祖先が存在しない場合、ルート要素ボックスのコンテンツ境界が包含ブロックであると判断されます。今日はブロックを含めたCSSボックスモデルを中心に解説します、別途投稿します。

自動幅 (つまり、位置決めなし) で静的に配置された要素および相対的に配置された要素の場合、幅は、その要素を含むブロック、パディング、ボーダー、スクロール バーの幅から要素のすべての水平方向のマージンを減算することによって計算されます。つまり、要素の水平方向のマージン、パディング、境界線、およびスクロール バー (存在する場合) の幅が、含まれているブロックの幅から削除され、残りの値がコンテンツとなります。

CSS では、幅と高さはコンテンツ領域の幅と高さを指します。パディング、境界線、余白を増やしてもコンテンツ領域のサイズには影響しませんが、要素のボックス全体のサイズは大きくなります。ボックスの各辺に 10 ピクセルのマージンと 10 ピクセルのパディングがあり、5 ピクセルの境界があると仮定します。この要素ボックスを 100 ピクセルにしたい場合は、コンテンツの幅を 50 ピクセルに設定する必要があります。 CSS コードは次のとおりです。

上記の例は、CSS ボックス モデルの計算を理解できます。

浮動要素および絶対配置要素 (固定配置要素を含む) の場合、自動状態の幅によってボックスがそのコンテンツのサイズに縮小されます。

次のコードとボックス図は理解できます:

ブロックレベルの要素をページに配置し、その位置属性 (相対、絶対、固定)、つまり位置を設定しない場合:static 、またはposition:relativeが設定されている場合、ブロックの幅は親要素の幅領域を自動的に埋めるように拡張されます。

次のコードとボックス図が表示されます:

マージンの重ね合わせ効果に注意してください

要素の必要な領域サイズを計算する上記の例では、マージンは要素に含まれています計算は必要ですが、垂直方向の非配置 (静的) 要素の隣接するマージンは、2 つの外側マージンの合計ではなく、幅の大きい方の外側マージンの 1 つの値に重ね合わされることに注意してください。これは、実際に要素を保持する必要がある領域のサイズを計算するときに、マージンの端から開始するのではなく、最も広いマージンのみが有効になり、より狭いマージンがより大きなマージンと積み重ねられることを意味します。

上の図からわかるように、2 つのボックスの垂直方向の余白は、2 つの余白の合計ではなく、最も広い余白を取り、余白が等しい場合は、どちらか一方を選択すれば問題ありません。 。

要素の幅が 100% に設定されている場合 (つまり、親要素のコンテンツの幅が 100% である場合)、マージン、パディング、または境界線が存在しないことに注意してください。設置する場所に広い面積が必要になります。多くの場合、これは無視され、ページのレイアウトが乱れ、コンテンツがオーバーフローしたり、要素が必要以上に広くなったりします。

上記のコードとレンダリングからわかるように、レイアウトが破壊され、親要素が排他的な行を占有し、レイアウトに影響を与えます。

利用可能な領域が固定幅の場合は、利用可能な固定幅に一致するように各アトリビュート要素 (マージン、パディングなど) の幅を追加するだけです。たとえば、使用可能な領域の幅が 100 ピクセルで、要素に 20 ピクセルのパディングが必要な場合は、要素の幅を 60 ピクセル、パディングを 20 ピクセル (20+60+20=100) に設定します。このメソッドの前提条件は、幅の値と要素のボックス属性が同じ測定単位を使用することです。これは、混合単位 (100px + 10% など) を追加したくないためです。意味のある内容）。

流体レイアウトなど、利用可能なコンテンツ領域の幅が不明な場合、パーセンテージとピクセルを加算できないため、この方法は機能しません。この場合、解決策は、必要な要素に対して 100% の幅の値を宣言し、パディング、ボーダー、およびマージンの値をネストされた要素に設定することです。このネストされた要素には幅の値が宣言されておらず、親要素に干渉することなく必要なパディング、境界線、およびマージンを表示できます。

たとえば、適応効果、具体的なコードと画像は次のとおりです:

これは、画面サイズに応じて適切な幅を調整するためのものです。このネストされた要素には幅の値が宣言されておらず、親要素に干渉することなく必要なパディング、境界線、およびマージンを表示できます。

CSS ボックスの拡張: div+css レイアウトのアイデア
伝統的なフロントエンド Web デザインは次のように実行されます: 要件に従って、最初にメインカラー、使用する画像の種類、それをPhotoshopなどのソフトで自由に描いて、最終的には小さな絵に切り分けることができるようになりましたが、レイアウトをCSSに切り替えた後は、これを変更する必要があります。現時点では、Web ページのセマンティクスと構造が主に考慮されるため、Web ページが完成した後、必要な Web ページのスタイルを簡単に調整できます。 CSS レイアウトのもう 1 つの目的は、コードを読みやすくし、ブロックを削除し、コードを強化することなので、構造が重要です。私の Web ページのデザインが非常に複雑であると言いたい場合、後でその効果を実現することは可能ですか?私が言いたいのは、CSS で実現できない効果をテーブルで実現するのは一般に難しいということです。CSS の制御能力は強力すぎるためです。ところで、CSS を使用することには非常に実用的な利点があります。植字の場合、Web サイトの構築を受注している場合、CSS を使用して Web ページのレイアウトを行っている場合、後で顧客が満足できなかった場合、特に色を変更するのは非常に簡単です。顧客が選択できるように CSS ファイルのいくつかのスタイルをカスタマイズしたり、動的呼び出しを実装するプログラムを作成したりして、Web サイトにスタイルを動的に変更する機能を持たせることもできます。

キーポイント: 構造とパフォーマンスの分離を理解する

実際のレイアウトの練習を始める前に、もう 1 つ慣れてみましょう。これは、CSS レイアウトの特徴を利用したものでもあります。構造と表現、コードの簡潔さと更新のしやすさ、これが CSS を学ぶ目的ではないでしょうか。たとえば、P タグがある場合、これは段落ブロックであることを示します。段落を 2 文字分右インデントしたいと考える人もいるでしょう。スペースを追加して続行 スペースが追加されますが、P タグの CSS スタイル: P {text-indent: 2em;} を指定できるようになり、追加のパフォーマンス制御タグなしで、結果の本文コンテンツは次のようになります:

皆さんと共有できることをとてもうれしく思います。今日の会話はこれで終わりです。修正または追加する必要がある場合は、お気軽にメッセージを残してください。ありがとう！