盒模型

---

css中盒子模型介绍

---

盒子模型分为content padding border margin。

首先介绍下四种具体是指什么意思：

1. content（内容）

   盒子的内容，显示的是文本和图片，平常设置的一个块状元素中使用的width或height描述的值就是指的content的大小

2. padding（内边距）

   清除内容周围的区域，会受到框中填充的背景颜色的影响

3. border（边框）

   边框周围的填充内容，边框受盒子的背景颜色影响

4. margin（外边距）

   清除边框外的区域，本身不具备颜色，仅仅只是扩长大小

---

计算

盒模型的计算很重要，需要注意的就是了解到content本身占得是块状元素所在css中设置的大小，其余的只需要按照css中各种情况相加就行了，其他三种描述都是按照顺时针描述的，就是把一个文本分成东南西北四个方向设置边框的距离，按照顺时针设置的！