css盒模型

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。

• Margin（外边距） - 清除边框区域。Margin 没有背景颜色，它是完全透明

• 属性：margin-top(上外边界)、margin-right(右外边界)、margin-bottom(下外边界)、margin-left(左外边界)

  值：支持length、百分比、auto

• Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
• 用来控制盒边框的宽度，样式，颜色。
• Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
• 内边距是元素的内容和边框之间的区域
• Content（内容） - 盒子的内容，显示文本和图像总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

• 元素的总高度最终计算公式是这样的：

  总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距