两种盒模型

标准盒模型与怪异盒模型（IE盒模型）

标准盒模型

•  标准盒模型即content-box 内容盒模型。
•  width就是content的width。
• 盒子总宽度=margin+padding+width+border，盒子的大小会以内容优先，自动扩展子元素  可以撑开父元素，就像气球一样，大小随内容的变化而变化 。

IE盒模型

•  IE盒模型即border-box边框盒模型。
• width=content+padding+border，
• 盒子总宽度=width+margin，父元素的盒模型确定，子元素无法撑开父元素的盒模型
  可以理解为现实生活中的铁箱子，大小不能被内容改变

区别

content-box和border-box的主要区别是二者的盒子的宽度是否包含元素的边框和内边距。