什么是盒子模型？有几个模式？

lizi_108

什么是盒子模型？
把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型。
盒子模型分为几个模式？
盒子模型分为两种
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即可