ボックスmodel_html/css_WEB-ITnoseの問題

CSS 属性で値を宣言すると、margin、padding、box の値がボックスの高さと幅で計算されるとネットで見つけた記憶があるのですが、この属性とこれを忘れていました価値とは何ですか？専門家に教えてもらいましょう。

また、デフォルトの CSS マージン、パディング、ボックスの値が独立しており、ボックスの高さと幅に含まれない必要があるのはなぜですか?これには何かメリットがありますか?

ディスカッションへの返信 (解決策)

box-sizing が content-box に設定されている場合、高さと幅にはパディングとボーダーを除き、コンテンツのみが含まれます
border-box に設定されている場合、高さと幅にはパディングとボーダーが含まれます

W3C 公式ドキュメントを参照してください:

http://www.w3.org/TR/css3-ui/#box-sizing

content-box
これは、指定された幅と高さの動作です。 CSS2.1 により、指定された幅と高さ (およびそれぞれの min/max プロパティ) は、要素のコンテンツ ボックスの幅と高さにそれぞれ適用され、要素のパディングと境界線は、指定された幅と外側に配置されて描画されます。 height .
border-box
この要素の幅と高さの長さとパーセンテージの値 (およびそれぞれの最小/最大プロパティ) によって、要素の境界ボックスが決定されます。つまり、要素に指定されたパディングまたは境界線がレイアウトされます。コンテンツの幅と高さは、指定された幅と高さのプロパティからそれぞれの辺の境界線とパディングの幅を減算することによって計算されます ([CSS21] のセクション)。 10 .2)、この計算は 0 で下限されます。たとえば getComputedStyle() を通じて公開される値は、境界ボックスも参照します

また、なぜ CSS のデフォルトのマージン、パディング、およびボックスの値は独立したものでなければなりません。ボックスの高さと幅には含まれませんか?これには何かメリットがありますか?

コンテンツの高さと幅を明示的に設定したいが、CSS の高さと幅のプロパティには常にパディングとボーダーの寸法が含まれている場合、設定する前に最初にそれらを計算する必要があります。
$(element).css('width',
コンテンツの予想される幅
+ padding-left + padding-right + border-left + border-right); もしそうなら、これはかなり面倒ではありませんか？ padding-left、padding-right、border-left、border-right のいずれかを変更すると、コンテンツの幅に影響します

また、CSS のデフォルトの値が margin である必要がある理由も聞きたいです。パディングとボックスは独立しており、ボックスの高さと幅には含まれませんか?これには何かメリットがありますか?

コンテンツの高さと幅を明示的に設定したいが、CSS の高さと幅のプロパティには常にパディングとボーダーの寸法が含まれている場合、設定する前に最初にそれらを計算する必要があります。

$(element).css('width',
コンテンツの予想される幅
+ padding-left + padding-right + border-left + border-right);

もしそうなら、これはかなり面倒ではありませんか？ padding-left、padding-right、border-left、border-right のいずれかを変更すると、
content

の幅に影響します。 ありがとうございます。