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

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

要素がボックスを作成し、どのタイプのボックスが作成されるかは、マークアップ言語に依存します。 CSSはHTMLドキュメントをスタイルする方法に進(jìn)化したため、多くのCSS視覚レンダリングモデルは、ブロックレベルとインライン要素を區(qū)別するHTMLから発生します。デフォルトでは、<img src="/static/imghw/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は、要素內(nèi)のH1、P、UL、およびテーブル要素を含むtable-cell値は

、

、、または

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

図4.3ボックスモデル

たとえば、

、width: 300px、padding: 20px、border: 10pxの <p></p>要素の計(jì)算された幅は360ピクセルです。これは、その幅、左右の塗りつぶし、左右の境界幅のプロパティの合計(jì)です。 300ピクセルの幅、20ピクセルの充填、10ピクセルの境界線を持つ要素を作成するには、幅を240pxに設(shè)定する必要があります。これが、ほとんどの主流のブラウザが幅を計(jì)算する方法です。ブラウザ間の競(jìng)合モデルの問題のいくつかを解決するために、CSSワーキンググループはbox-sizing屬性を?qū)毪筏蓼筏?。お?dú)荬巳毪辘违堀氓攻猊钎毪螌g裝を選択し、レスポンシブデザインを扱うときに計(jì)算を大幅に簡(jiǎn)素化できます。

box-sizingを使用します

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

<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>

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

および

article, aside {
  background: #FFEB3B;
  border: 10px solid #9C27B0;
  float: left;
  padding: 10px;
}
article {
  width: 60%;
}
aside {
  width: 40%;
}

の値は両方とも

です。 および

に

および

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

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

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

<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>

動(dòng)作に影響を與えることなく、デフォルトで各要素に

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

CSSボックスモデル（FAQ）

article, aside {
  background: #FFEB3B;
  border: 10px solid #9C27B0;
  float: left;
  padding: 10px;
}
article {
  width: 60%;
}
aside {
  width: 40%;
}

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

以上がCSSボックスモデルの管理の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。