幅が100pxのボックスが広く表示されるのはなぜですか？デフォルトのコンテンツボックスモデルが使用されるため、実際の幅にはコンテンツ、パディング、境界が含まれます。 1.デフォルトでは、Box-Sizingはコンテンツボックスであり、幅セットはコンテンツ領域のみを指します。パディングとボーダーは、全體的な幅を追加します。 2。ボーダーボックスを使用して、幅セットにコンテンツ、パディング、ボーダーが含まれるようにすると、レイアウトはより直感的です。 3。レイアウトの不整合を避けるために、ボックスサイズ：ボーダーボックスをグローバルに設定することをお勧めします。これは、レスポンシブデザインに特に適しています。 4。コンテンツボックスは特別なシナリオで使用できますが、2つのモードを避ける必要があります。

私が最初にCSSを?qū)Wび始めたとき、多くの人が質(zhì)問に遭遇します。なぜ私は幅100pxの箱を設定したのですか？これは、あなたがbox-sizingプロパティの役割を理解していないためである可能性が最も高いです。要素の幅と高さを計算する方法を決定し、レイアウト効果に直接影響します。

デフォルトでは、すべての要素はcontent-boxであり、コンテンツ領域のサイズのみを意味します。ただし、 border-boxに変更すると、計算方法全體が変更されます?，F(xiàn)時點での幅と高さには、コンテンツ、パディング、ボーダーが含まれます。

これら2つの値の違いと、どのシナリオを使用する方が良いかについて話しましょう。

content-boxとは何ですか？

これは、ブラウザのデフォルトボックスモデルです。要素の幅をwidth: 200pxに設定すると、そのコンテンツ領域は200px幅です。パディングまたは境界線が追加されると、全體のサイズが大きくなります。

例えば：

 。箱 {
  幅：200px;
  パディング：10px;
  國境：5pxソリッド＃000;
}

content-boxモードでは、このボックスの実際の幅は次のとおりです。200px（コンテンツ）2×10px（左右のパディング）2×5px（左と右の境界）= 230px

このパターンは、テーブルセル、特定のレイアウトコンポーネントなどのコンテンツ領域のサイズを正確に制御するシナリオに適しています。

なぜborder-boxを使用したいのですか？

多くのフロントエンド開発者は、全體的なサイズをborder-boxする方が簡単だからです。このモードでは、パディングと境界線があるかどうかに関係なく、設定した幅と高さは究極のディスプレイ幅と高さです。

上記の例に関しては、 border-boxに変更した後：

 。箱 {
  ボックスサイズ：ボーダーボックス;
  幅：200px;
  パディング：10px;
  國境：5pxソリッド＃000;
}

このボックスの合計幅はまだ200pxです。システムは、コンテンツ領域からパディングや境界までスペースを自動的に「圧縮」します。

利點は明らかです：

• 手動の追加と減算なしで、レイアウトはより直感的です
• レスポンシブデザインの割合を制御しやすい
• 境界線や內(nèi)側(cè)のマージンを追加するため、レイアウトの誤った整合を避ける

これが、多くのCSSフレームワーク（ブートストラップなど）がデフォルトでborder-boxを使用する理由でもあります。

実用的な使用の提案

CSSを始めたばかりの場合は、この設定を最初からグローバルスタイルに追加することをお勧めします。

 * {
  ボックスサイズ：ボーダーボックス;
}

これにより、「ボックスがより広くなった理由」に関する多くの混亂を回避できます。もちろん、一部の特別なシナリオでは、コンテンツ領域のサイズを個別に制御するか、複雑な弾性計算を行うなど、 content-box必要になる場合があります。

いくつかの提案：

• border-boxの統(tǒng)一された使用は、現(xiàn)代の開発のための標準的な慣行です
• 明確な要件がない限り、2つのモードを簡単に混ぜないでください。
• ボックスサイズを動的に調(diào)整する必要がある場合は、 width 、 max-width 、その他のプロパティを使用して使用することに注意してください。

一般に、 box-sizing小さなプロパティのように見えますが、ページ全體のレイアウトロジックに影響します。 content-boxとborder-boxの違いを理解することは、レイアウトを書くときに多くの落とし穴を回避するのに役立ちます?；镜膜摔长欷悉工伽蒲}雑ではありませんが、無視するのは簡単です。

以上がCSSボックスサイズのプロパティの理解：コンテンツボックスvsボーダーボックスの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。