css3中可以通过box-sizing来指定盒子模型,即可指定为content-box、border-box,这样计算盒子大小的方式就发生了变化
可以分成两种情况:
1.box-sizing:content-box 盒子大小为 width + padding +margin content-box此值为默认值,其让元素 维持W3C的标准box mode
2.box-sizing:border-box 盒子大小为 width 就是说 padding和border是包含到width内的
div: first-child {
width: 200px;
height: 200px;
background-color: skyblue;
box-sizing: content-box; /*就是以前的盒模型 w3c*/
padding: 10px;
border: 1px solid red;
/*盒子大小为 width + padding + border content-
box:此值为其默认值,其让元素维持w3c的标注box Mode*/
}
div: last-child {
width: 220px;
height: 200px;
background-color: purple;
padding: 10px;
box-sizing: border-box; /* paddding border 不撑开盒子 */
border: 15px solid red;
/*margin: 10px;*/
/*盒子大小为 width 就是说 padding 和 border 是包含到 width 里面的*/
}