CSS基本知識3-CSSボックスモデル

box-sizing: content-box|border-box|inherit;

値
説明
content-box
これはCSS 2による.1所定の幅高さ挙動.要素のコンテンツボックスには、幅と高さがそれぞれ適用されます.要素の内側の余白と枠線を幅と高さの外に描画します.
border-box
エレメントの幅と高さによって、エレメントの枠線ボックスが決まります.つまり、エレメントに指定した内側の余白と枠線は、設定した幅と高さで描画されます.設定した幅と高さから枠線と内側の余白をそれぞれ減算することで、コンテンツの幅と高さを得ることができます.
inherit
親要素からbox-sizing属性を継承する値を指定します.
 
 
 
 
 
 
 
 
 
 
 
問題はCSS 2です1はデフォルトがcontent-box、すなわちW 3 C標準モデルであることを規定し、もう一つはIE伝統モデルであり怪異モデルborder-boxとも呼ばれる.
もちろん現実は残酷で、今のBootstrapやFoundationを見て、border-boxモードを使っています.これは何を説明していますか.IEが最初に正しいことを説明して、W 3 Cはこのことを間違えました.W 3 Cのレイアウトに従って、多くの潜在的な問題をもたらしました.これは大きな災難です.誰も指摘していませんが.
この両者の相違は主にW 3 CのWidth(Height)計算であり,PaddingとBorder,Border−boxモードを含まず,Widthにはコンテンツ,Padding,Borderが含まれる.
後者の利点は非常に明らかで、例えば私はWidth:200 pxのDIVを定義して、それから私はまた1 pxの枠を追加して、これでよくなって、W 3 Cの標準の下で、配置が乱れて、あるいは再びWidthなどを調整しなければならなくて、
Width:199px;border:1 px、計算するのはかなり面倒で、これは複数のネストDIVの中で、枠を加えたりPaddingを変えたりするときに特に面倒です.
従来のモードを使用すると、箱の中と箱の外が明らかに分布し、外はMarginで、中はWidthで、計算が簡単になります.
もう1つの問題は、Formフォーム要素がborder-boxモードを多く使用していることです.
では、border-boxモードでレイアウトするには、ブラウザの互換性に注意し、Bootstrapなどのアプリケーションやモバイルアプリケーションを考慮して、全局border-boxモードを選択する必要があります.
残念なことに、現在のほとんどのサイトではデフォルトのcontent-boxモードが使用されており、新型のBootstrapなどではグローバルなborder-boxモードが使用されています.
両者の互換性を修復するにはどうすればいいですか?
もちろん全て修正するのも当然ですが、大きく変更したくない場合は、Bootstrapなどのフレームワークを導入した後、元のレイアウトが間違っていた部分に、box-sizing:content-box属性を加えます.
詳細については、次の文書を参照してください.
http://www.w3cplus.com/content/css3-box-sizing