盒模型:

就是浏览器为页面中的每个HTML元素生成的矩形盒子; 每个盒子 包含 content(内容), padding(内边距), border(边框), margin(外边距)

1 标准盒模型

width/height的值是content的宽度/高度;
box-sizing:content-box; 可以将盒模型设置为w3c标准盒子模型;

image.png

2 IE盒模型(怪异盒模型)

width/height的值是content+padding+border的和;
box-sizing: border-box; 可以将盒模型设置为IE(怪异)模型;

image.png