前端必须懂的盒模型

标准盒模型

都有哪些盒子模型

标准盒模型

box-sizing:content-box
标准盒模型当中你写的width是内容的大小
计算盒子宽高的时候是:在标准模式下，一个块的总宽度 = 内容的width + padding(左右) + border(左右) +margin（左右）
如果你想让你的盒子站位宽度100px,就是需要让width+padding+border+margin的和为100px
这就会延伸出一个问题,我们如果想让盒子宽度一百的时候就需要计算border和padding,后面还想加boder padding 这样盒子就会变大 你想让盒子一百,你就要去计算,这样就会导致计算繁琐的问题
其实解决这种计算繁杂的方案就是后面我要讲的怪异盒模型
包括我看到的库源码比如bootstrop 各大UI组件的源码这些他们都是采用到怪异盒模型去计算宽高的
因为怪异盒模型你给盒子设了多少的宽高那么盒子的宽高大小就是多少.如果你后边要加border padding 他盒子内部会自动的帮你缩放并不会导致盒子变大

怪异盒模型

box-sizing:border-box
所以我认用怪异盒模型应用到实战项目当中是一种默认的规范的,或者说是一种条件反射的行为,毕竟都跟着大牛的脚步走嘛. boder-box