[遠位] CSS3ボックスモデル

CSS3ボックスモデル

CSS3ボックスモデルは、ボックスサイズで指定することができ、コンテンツ・ボックス、ボーダー・ボックスとして指定することができ、我々は変更途中でボックスのサイズを計算します。

これは、2つのケースに分けることができます。

1、ボックスのサイズ変更：コンテンツ・ボックスボックスサイズ幅+パディング+ボーダーコンテンツボックス：要素はW3Cの標準ボックスモードを維持するように、この値は、デフォルト値であります

2、ボックスサイズ：内部に組み込まれるパディングとボーダーの幅の大きさである境界ボックスのボックスの幅、即ち、箱の所定のサイズは、問題がもはや内側および外側によって算出マージンのサイズを調整しないで/引き起こさ

注：上記のマーク幅が幅CSSのセットのプロパティを指す：長さ、値のコンテンツは自動的に調整されます。

div:first-child {
            width: 200px;
            height: 200px;
            background-color: pink; 
            box-sizing: content-box;  /*  就是以前的标准盒模型  w3c */
            padding: 10px;
            border: 15px solid red;
            /* 盒子大小为 width + padding + border   content-box:此值为其默认值，其让元素维持W3C的标准Box Mode */
        }
        div:last-child {
            width: 200px;
            height: 200px;
            background-color: purple;
            padding: 10px;
            box-sizing: border-box;   /* padding border  不撑开盒子 */
            border: 15px solid red;
            /* margin: 10px; */
            /* 盒子大小为 width    就是说  padding 和 border 是包含到width里面的 */
}