浏览器的盒模型包括： 标准盒模型、IE盒模型（怪异盒模型）
标准盒模型：是W3C推荐的一种盒模型，被现代浏览器广泛使用。
总宽度=margin+padding+border+width
总宽度 = margin + padding + border + width
总宽度=margin+padding+border+width
(即：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right)
总高度=margin+padding+border+height
总高度 = margin + padding + border + height
总高度=margin+padding+border+height
(即：margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom)
IE盒模型：是Internet Explorer早期版本使用的一种盒模型。
总宽度=margin+width
总宽度 = margin + width
总宽度=margin+width
(即：margin-left + width + margin-right)
总高度=margin+height
总高度 = margin + height
总高度=margin+height
(即：margin-top + height + margin-bottom)
区别： 在于宽度和高度的计算方式不同。标准盒模型中，元素的宽度和高度仅包括内容区域（content），不包括内边距（padding）、边框（border）；IE盒模型中，元素的宽度和高度包括内容区域、内边距、边框，但不包括外边距（margin）
转换： 通过设置css的box-sizing属性来改变元素的盒模型行为。
box-sizing:content-box：默认值，使用标准盒模型box-sizing:border-box：使用IE盒模型