盒子模型

什么是CSS盒子模型

• 宽度/高度
  指定可以存放内容的区域
• 内边距
  填充物
• 边框
  手机盒子自己
• 外边距
  盒子和盒子之间的间隙
• 内容的宽度和高度
  就是通过width/height属性设置的宽度和高度
• 元素的宽度和高度
  宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
  高度 = 上边框 + 上内边距 + height + 下内边距 + 下边框
• 元素空间的宽度和高度
  宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
  高度 = 上外边距 + 上边框 + 上内边距 + height + 下内边距 + 下边框 + 下外边距