盒子模型分为两种
1、标准盒模型:
content(内容)+margin(外边距)+padding(内边距)+border(边框)
2、IE盒模型(怪异盒模型)
content +margin
标准盒模型下的宽:盒子总宽度/高度=width/height+padding+border+margin,这种模式下,我们写的元素往往会比设置的宽高要多出一部分padding、border、margin
IE盒模型下的宽:盒子的总宽度和高度是包含内边距padding和边框border宽度在内的
盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
也即是说 width = 内容区宽度 + padding + border
开发中往往使用IE盒模型,只需要设置
box-sizing:border-box即可