前端不得不了解的盒子模型---border-box

盒子模型设置

box-sizing: border-box;

box-sizing

的默认值是

content-box

什么是盒子模型？

默认情况下，假如我们定义了一个div，设置它的宽度和内间距如下：

则这个div所占宽度为100+10+10+1+1=122，即计算规则是

宽度+内间距+边框

而在盒子模型下则不一样，总的宽度计算还是100，只是内间距和边框被移到盒子里面了。

bootstrap 3 以后默认用的是 border-box，而微信小程序默认还是

content-box