css3盒子模型微课_【前端】CSS3盒模型

CSS3盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode

2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的，就是规定了盒子的大小，无需再调大小计算由内外边距而造成的问题/

注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。

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

}