css处理网页时，认为每个元素都包含在一个不可见的盒子里。我们在浏览器里打开开发者工具(快捷键F12),可以观察到这个所谓的盒子：
区分几个概念：
内容的宽度和高度：指的是内容本身占据的宽度和高度，如上图中的蓝色部分。
元素的宽度和高度：这这里的元素的宽度来说吧，宽度=左border+左padding+内容的宽度+右padding+右border，上图中就是340（内容宽度）+15*2(padding)+1*2(border）,这里相加的和就等于你在css里面定义的width:372px.
元素空间的宽度和高度：依然拿这里“元素空间的宽度”来说吧，元素空间的宽度=上边的372px+左margin(497px)+右margin(497px)。
好了，明白了这样几个概念，我们看到这几个概念都和width、padding、border、margin这几个属性有关，其实，说白了，css里面的盒子模型就是由这四个属性构成的，盒子模型只是一个抽象的东西，我们随便写一个元素都在一个盒子里，我们只是把这些共性抽象出来，才形成了盒子模型。