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里面的 */ }
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { box-sizing: border-box; } div { width: 300px; height: 300px; background-color: pink; padding: 30px; border-right: 20px solid red; box-sizing: border-box; /*内减模式*/ } </style> </head> <body> <div></div> </body> </html>
