盒子尺寸-盒子的解析方式

盒子有两种解析方式：

我们在样式表中输入box-sizing时，会显示border-box和content-box，第一种是边框盒子尺寸，第二种是内容尺寸。

盒子模式由元素内容content，边框border，内边距padding，外边距margin构成，当我们给一个元素设置尺寸时，默认设置的是元素内容的尺寸，也就是content-box，这种在后期布局时会有很多不便。

而当我们用border-box时，我们设置的尺寸实际等于：内容尺寸+两边的内边距+两边的边框宽度，我推荐新手在进行网页布局时，先给所有网页元素设置一些必须的样式：

例如：

*（*代表所有元素）{

padding:0;

margin:0;

box-sizing:border-box;

}

这样我们我们在进行网页布局时会非常的方便。