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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/byg184244735/article/details/80204616

盒子模型设置

box-sizing: border-box;
box-sizing的默认值是content-box

什么是盒子模型？

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

<div style='border:1 solid #666;padding:0 10px'>我是文本</div>

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

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

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