盒模型模式

两种模式可以利用box-sizing属性进行自行选择：

标准模式：box-sizing:content-box;

怪异模式：box-sizing:border-box;

两种模式的区别：

标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被padding所撑开。

标准模式：盒子总宽度/高度 = 内容区宽度 /高度+padding+border + margin。

效果：

怪异模式：盒子总宽度/高度=width/height+margin。

效果：

 

在标准盒模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。