Bootstrap 3 が「box-sizing: border-box」に切り替わったのはなぜですか?-CSSチュートリアル-php.cn

Bootstrap 3 が「box-sizing: border-box」に切り替わったのはなぜですか?

Mary-Kate Olsen

リリース： 2024-12-05 01:30:10

オリジナル

176 人が閲覧しました

Why Did Bootstrap 3 Switch to `box-sizing: border-box`?

Bootstrap 3 の Border-Box への切り替えを解明する

Bootstrap 3 では、すべての要素に box-sizing: border-box が組み込まれるという顕著な変更が導入されました。デフォルトのコンテンツボックス値からの逸脱は、その理論的根拠についての疑問を引き起こしました。

Bootstrap 2.3.2 から 3.0.0 への移行プロセスにおいて、開発者は、この変更による大きな寸法の違いを観察しました。 bootstrap.css の次の CSS ルールは、この変更の中心を示しています:

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

ログイン後にコピー

従来のコンテンツボックスモデルでは、要素の幅と高さはパディングとボーダーを除いて、そのコンテンツのみを考慮します。これにより、合計の幅または高さを計算しようとすると、宣言された値を超えてしまうため、問題が発生します。

対照的に、border-box では、幅と高さの計算にパディングとボーダーの両方が含まれます。この単純化されたモデルにより、パディングや境界線のサイズに関係なく、最終的にレンダリングされるボックスのサイズが指定された幅と高さに正確に揃うことが保証されます。

ボーダーボックスへの移動はすべての要素に影響しますが、特に Bootstrap 3 の流体グリッドシステムに影響を与えます。流体グリッドでは、列がコンテナーの合計幅のパーセンテージとして定義され、応答的に拡大縮小できるようになります。

コンテンツボックスモデルでは、列のサイズを計算するには、両側の固定幅の余白を考慮する必要があります。。この複雑さはボーダーボックスを使用することで解消されます。宣言された列の幅には境界線とパディングの両方が含まれるようになり、サイズ変更の一貫した直感的な手段が提供されます。

Bootstrap のグリッドシステムに対する利点を超えて、 box-sizing: border-box は Web 開発で広く受け入れられています。これにより、ブラウザ間で一貫した動作が促進され、レイアウトとサイズ設定に対する直感的なアプローチが提供されます。

Bootstrap 3 のリリースノートには、この変更の背後にある意図が明示的に記載されています。「デフォルトでより良いボックスモデル。Bootstrap のすべてがボックスサイズ設定されます。 : ボーダーボックス。サイズ設定オプションが簡単になり、グリッドシステムが強化されます。"

以上がBootstrap 3 が「box-sizing: border-box」に切り替わったのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。