盒子模型及特点

盒子模型是css中用来描述元素布局的一种概念，是将每个元素看作是由content padding border margin组成的矩形盒子。

内容区域content是用来显示内容的，大小是通过width和height属性来控制
内边距padding是指内容区域外到边框的区域，大小是通过padding相关属性来控制
边框border是指外绕在内边距之外的框线，大小是通过border相关属性来控制
外边距margin是指边框以外，盒子框线与其他元素之间的空白区域，大小是通过margin相关属性来控制

盒子模型分为两种，标准盒子模型和怪异盒子模型
标准盒子模型中，设置的width和height是实际设置在content部分，盒子的实际占用空间还需要加上padding border margin的大小
在怪异盒子模型中，设置的width和height是设置在content padding border的总和上
在两种盒子模型中，padding都是需要另外计算的

默认值为标准盒子模型，可以通过box-sizing:border-box 来将标准盒子模型切换为怪异盒子模型