web前端盒子模型练习

Question

小白，上课没怎么听懂，求教

Answer 1

盒模型分为标准盒模型和怪异盒模型，一般主流浏览器，例如谷歌啥的默认都是标准盒模型，ie旧版本是怪异盒模型
两者区别在于：
标准盒模型： 实际宽高 = 内容宽高（也就是你设置的width,height） + padding(内边距) + border(边框)
怪异盒模型： 实际宽高 = 你设置的width，hieght （而你设置的padding和border都是往你设置的宽高里塞）

两者转换:
box-sizing：border-box; //转换成怪异盒模型
box-sizing: content-box; //转换成标准盒模型

一般我们实际开发，都会转换成怪异盒模型，这样更容易控制样式