[Distal] CSS3 Box Model

CSS3 box model

CSS3 box model can be specified by the box-sizing, can be specified as a content-box, border-box, we will calculate the size of the box on the way changed.

It can be divided into two cases:

1, box-sizing: content-box box size width + padding + border content-box: this value is the default value, so that the elements maintain W3C standards Box Mode

2, box-sizing: border-box box width that is the size of padding and border width are incorporated into the inside, that is, the predetermined size of the box, the problem no longer adjust the size of the margin calculated by the inner and outer caused /

Note: width marked above refers to the width CSS properties in the set: length, value content is automatically adjusted.

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里面的 */
}