CSSボックスモデルの管理

CSSボックスモデル：Webレイアウトを理解するための鍵

CSSを理解する上で最も重要なことは、次のことです。より具体的には、ドキュメント内の各要素がボックスを生成します。このボックスは、ブロックレベルのボックスまたはインラインレベルのボックスにすることができます。ボックスのタイプは、要素がページレイアウトにどのように影響するかを決定します。 CSSボックスモデルは、HTML要素のレイアウトとサイズを説明するために使用される概念です。各要素には、コンテンツ、塗りつぶし、境界線、マージン用のボックスが含まれています。これらのボックスは、要素のコンテンツのレイアウトと、隣接する要素がどのように並んで表示されるかを決定するために組み合わされています。

要素がボックスを作成し、どのタイプのボックスが作成されるかは、マークアップ言語に依存します。 CSSはHTMLドキュメントをスタイルする方法に進化したため、多くのCSS視覚レンダリングモデルは、ブロックレベルとインライン要素を区別するHTMLから発生します。デフォルトでは、<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173976055370983.jpg" class="lazy" alt="Managing the CSS Box Model ">や

などの要素がブロックレベルのボックスを作成しますが、

、<p></p>、および<section></section>インラインボックスを作成します。一方、SVGはボックスモデルを使用していないため、ほとんどのレイアウト関連のCSSプロパティはSVGでは使用できません。 <a></a> 図4.1に示すように、ブロックレベルのボックスは新しいコンテンツブロックを作成します。ブロックレベルのボックスのレンダリングは垂直であり、そのソースの順に配置されており、（テーブルを除く）拡張して、含まれる要素の使用可能な幅を埋めます。これは通常のストリームと呼ばれます。ブロックレベルのボックスの<span></span>値は、<em></em>、

、

、または任意の値（たとえば、display）です。 block list-itemtable table-*図4.1は、要素内のH1、P、UL、およびテーブル要素を含むtable-cell値は

、

、、または

です。

display図4.2マージンを備えたインラインボックスの例：1EMとパディング：5px inlineしかし、ボックスのサイズはどのように計算されますか？これは、物事がより複雑になるところです。図4.3に示すように、ボックスサイズはボックスコンテンツ領域、充填幅、境界幅の合計です。マージン幅は、要素のマージンボックスを作成し、ドキュメント内の他の要素に影響します。 inline-block inline-tableruby

図4.3ボックスモデル

たとえば、

、width: 300px、padding: 20px、border: 10pxの <p></p>要素の計算された幅は360ピクセルです。これは、その幅、左右の塗りつぶし、左右の境界幅のプロパティの合計です。 300ピクセルの幅、20ピクセルの充填、10ピクセルの境界線を持つ要素を作成するには、幅を240pxに設定する必要があります。これが、ほとんどの主流のブラウザが幅を計算する方法です。ブラウザ間の競合モデルの問題のいくつかを解決するために、CSSワーキンググループはbox-sizing属性を導入しました。お気に入りのボックスモデルの実装を選択し、レスポンシブデザインを扱うときに計算を大幅に簡素化できます。

box-sizingを使用します

プロパティは、CSS Basicユーザーインターフェイスモジュールレベル3仕様で定義されています。 2つの可能な値があります。最初は、box-sizingの値はcontent-boxです。この値を使用する場合、要素のborder-boxおよびbox-sizingプロパティを設定すると、コンテンツ領域のサイズに影響します。これは、CSS 2.1仕様で定義されている動作と一致し、最新のブラウザーではデフォルトの動作です（図4.4を参照）。 content-boxからwidthの値を設定すると、いくつかの魔法の効果が生じます。 heightおよびbox-sizingの値は、コンテンツ領域の代わりに外側の境界端に適用されます。境界線と塗りつぶしは、要素ボックス内に描かれ、古いInternet Explorer 5.5の動作に一致します。パーセンテージ幅とPX単位を使用して、塗りつぶしと境界の混合の例を見てみましょう。 border-box 私たちのwidthおよびheight要素はどちらも次のCSSを適用します。これにより、図4.5に示すレイアウトが得られます。最初の要素の幅は60％で、2番目の要素の幅は60％40％です。 >

<code class="language-html"><div class="wrapper">
  <article>
    <h2>This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2>This is a secondary headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </aside>
</div></code>

<article></article>図4.5を使用します <aside></aside>デフォルトでは、

および

<code class="language-css">article, aside {
  background: #FFEB3B;
  border: 10px solid #9C27B0;
  float: left;
  padding: 10px;
}
article {
  width: 60%;
}
aside {
  width: 40%;
}</code>

の値は両方とも

です。 および

値は、各要素の幅を40ピクセル増加させ、60％/40％のセグメンテーションに大きく影響します。それでは、

に

および

要素を追加しましょう：<aside></aside> <article></article> box-sizing図4.6に変化を見ることができます。要素の幅は同じですが、content-boxは幅に境界とパディングが含まれることを意味します。 border-width属性はコンテンツ領域ではなく境界エッジに適用されるため、私たちの要素は並んで配置されます。 padding box-sizing: border-box<article></article> <aside></aside>図4.6を使用します

プロジェクトでbox-sizing: border-boxを使用することをお勧めします。塗りつぶしと境界の値を考慮するために幅の値を計算する必要がなく、ボックスの動作がより予測可能になるため、生活が容易になります。適用する最良の方法は、リセットルールを使用することです。次の例は、Chris CoyierのCSS-Tricksの記事「ボックスサイジングの継承はわずかに優れている可能性があります - ベストプラクティス」：box-sizing: border-box

これは、プロジェクトの既存の部分の

<code class="language-html"><div class="wrapper">
  <article>
    <h2>This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2>This is a secondary headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </aside>
</div></code>

動作に影響を与えることなく、デフォルトで各要素に

サイズを適用します。 border-box動作に依存するサードパーティやレガシーコンポーネントがないことがわかっている場合は、これらのルールを簡素化できます。 box-sizing content-box管理ボックスモデルは、複雑なレイアウトを作成する方法を理解するための1つの要素にすぎません。

CSSボックスモデル（FAQ）

<code class="language-css">article, aside {
  background: #FFEB3B;
  border: 10px solid #9C27B0;
  float: left;
  padding: 10px;
}
article {
  width: 60%;
}
aside {
  width: 40%;
}</code>

に関するFAQ <p></p>（記事が長すぎて擬似オリジナルの目標と一致しないため、FAQパーツはここで省略されています。必要に応じてFAQパーツを追加または変更できます。

以上がCSSボックスモデルの管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。