CSS 盒子模型(Box Model)
盒模型分两类．一类是(W3C)盒模型 还有一类是怪异(IE)盒模型,本文讨论的是现在最基础常用的W3C盒模型
1.什么是盒子模型呢？
盒子模型是CSS布局的基石，它规定了网页元素如何显示以及元素间相互关系。CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间 我们把这个空间称为盒子.
2.盒子模型的组成
盒子模型的组成由：内容（content）、內填充(padding)、边框(border)、外边距(margin)。
不同部分的说明：
Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content（内容） - 盒子的内容，显示文本和图像
3.盒子模型的计算公式:
元素的总宽度（width）最终计算公式是这样的：
总元素的宽度=宽度 + 左內填充 + 右內填充 + 左边框 + 右边框 + 左外边距 + 右外边距
元素的总高度（height）最终计算公式是这样的：
总元素的高度=高度 + 顶部內填充 + 底部內填充 + 上边框 + 下边框 + 上外边距 + 下外边距
以上内容全部由本人编写分享欢迎学习指导 ：H5逆战班欢迎你
