Bootstrap 3がボックスサイズ：ボーダーボックスに切り替わったのはなぜですか？

Bootstrapテーマをv2.3.2からv3.0.0に移行していますが、bootstrap.cssの次のスタイルにより、多くのディメンションが異なる方法で計算されることに気付きました。

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

Bootstrapがすべての要素のボックスサイズを境界ボックスに切り替える理由を誰かが説明できますか？新しいグリッドシステムがパーセントベースであることに関係していると思いますが、上のセレクターはグリッド要素にのみ適用されるわけではありません。

少し過激な私見:-)

誰か洞察を与えたいと思う人はいますか？

— アレクサンドルレヒシュタイナー
ソース

CSSスニペットをありがとうございます。これはまさに、これをブートストラップ以外のプロジェクトに適用するために探していたものです。:)

— ベルト2014

*：beforeおよび*：afterが必要な理由を誰かが知っていますか？

— limscoder 14年

@limscoder *:beforeおよび*:afterは、このボックスモデルを:beforeおよび:after疑似要素にも適用するために必要です。

— buschtoens 2014

*セレクターは、開発者がCSSの他の場所でcontent-boxまたはpadding-boxを使用することを困難にします。ゼロから新しいプロジェクトを開始する最善の方法はある html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

— JarekPrzygódzki

102

リリースノートはあなたに伝えます：（http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/）

デフォルトでより良いボックスモデル。Bootstrapのすべてがボックスサイズになります：ボーダーボックス。サイズ変更オプションが簡単になり、グリッドシステムが強化されます。

個人的には、ほとんどのメリットはグリッドシステムに行くと思います。Twitterのブートストラップでは、すべてのグリッドが流動的です。列は、全幅のパーセンテージとして定義されます。ただし、ガターの幅はピクセル単位で固定されています。デフォルトでは、列の両側に15pxのパディングがあります。ピクセル単位の幅とパーセンテージの組み合わせは複雑になる可能性があります。でborder-boxあるため、この計算は簡単であるborder-box値は、（コンテンツ・ボックスのデフォルトではなく）最終的にレンダリングボックス宣言幅になり、そしてボックス内の任意のボーダーとパディングカット。（http://css-tricks.com/box-sizing/）

また読む：http : //www.paulirish.com/2012/box-sizing-border-box-ftw/

— 低音ジョブセン
ソース

簡単な例：で、幅100％のdivに1ピクセルの境界線を配置してみてくださいcontent-box。これで、100％+ 2ピクセルのものが得られました。を使用するborder-boxと、その問題は発生しませんが、それでも100％です。

— emptywalls

この問題での良い追加の議論とそれの正当化。

— yuvilio 2015

また、ボックスサイズ設定の実装のベストプラクティスが更新され、サードパーティのライブラリに干渉しないようになりました。Bootstrapが更新を計画しているかどうかはわかり

— tricks.com

個人的には、IE6からボックスモデルを変更したことはありません。それがIEが知っている唯一のことでした。そして、はい、今日、これらの100％プラス2ピクセルの問題を回避するためのcalc（）がありますが、侍のやり方は、常にボーダーとパディングを含むボーダーボックスでした。それが人間の脳が箱を想像する方法です。私はこの「新しいトレンド」を見るのが大好きです。彼らにウェルカムバックドリンクを用意しています。

— dkellner 2015年