CSS 盒模型本质上是一个盒子，盒子包裹着HTML 元素，盒子由四个属性组成，从内到外分别是：content 内容、padding 内填充、border 边框、外边距 margin
首先看一个示例：
<button style="margin: 10px;padding: 10px;border: solid red 4px;width: 70px;">一个按钮</button>
浏览器中检查元素可以看到：
从图中可以看出: 蓝色部分是button的content，绿色的是padding，黄色的是border, 深黄色是margin。
常见的盒模型有两种：
理论上讲两种盒模型区别在于：二者的盒子宽高是否包括元素的边框和内边距。当用CSS给给某个元素定义高或宽时，IE盒模型中内容的宽或高将会包含内边距和边框，而W3C盒模型并不会。