盒模型用来表示每个元素所占空间的大小。它由4个区域组成，即内容区域、内边距区域、边框区域和外边距区域。这些区域分别对应5个属性：width和height，width和heightpaddinginnermarginborderborderbordermarginoutermargin代码演示：div{border:1pxsolidred;高度：200px；宽度：200px；padding:40px;}效果图：虽然上面指定了宽高为200px，但实际上它的宽高是282px*282px。这是因为盒子模型是content-box，它的宽高就是实际内容的宽高。增加填充和边框不会影响内容区域的大小，但会增加元素的整体大小。使用content-box写样式的时候，不符合人的理解。一般它会通过设置box-sizing来改变它的盒子模型。使用border-box，它的宽高就是元素的大小，也就是内容区域的宽高+padding+border。更改边框或填充的大小将影响内容区域的大小。代码演示：div{box-sizing:border-box;边框：1px纯红色；高度：200px；宽度：400px；padding:40px;}效果图：从这张效果图可以看出，元素的总宽高为400px*200px，其内容区域为318px。contentarea+padding+border恰好是400px。上面提到了人类理解的border-box的使用。这是因为，在实际开发中，如果要保证元素的实际宽高不变，写width时必须减去padding，写padding时减去width。因为更改元素的实际大小通常是灾难性的。
