CSS盒子模型
盒子模型是CSS中较为重要的核心概念之一，它是使用CSS控制页面元素外观和位置的基础。所有HTML元素可以看作是一个盒子（特别是块级元素），在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：内容(content)、内边距，也可以叫填充(padding)、边框(border)、外边距(margin)。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
- Margin(外边距) - 盒子与其他盒子之间的距离。
- Border(边框) - 围绕在padding和content外的边框。
- Padding(内边距、填充) - content和border之间的距离。
- Content(内容) - 盒子的内容，显示文本和图像等元素。
盒子模型(Box Model)图解如下
- 关于这两种盒子区别就在于它们的width和height的组成，IE盒子模型的width和height部分还包含了border和padding。为了解决兼容性的问题，可以在HTML页面声明 <!DOCTYPE html>即可。
- 由图可知，关于盒子的实际高度和实际宽度计算方式如下
- 总元素的宽度=宽度（width）+左填充（padding-left）+右填充（padding-right）+左边框（border-left）+右边框（border-right）+左边距（margin-left）+右边距（margin-right）
- 总元素的高度=高度（height）+顶部填充（padding-top）+底部填充（padding-bottom）+上边框（border-top）+下边框（border-bottom）+上边距（margin-top）+下边距（margin-bottom）
