# 盒子模型的理解和使用
## 一、概念
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:`外边距(margin)`、`边框(border)`、`内边距(padding)`、`实际内容(content)`四个属性。
CSS盒模型:**标准模型 + IE模型**
### 1.1 W3C盒子模型(标准盒模型)
![img](https://pic1.zhimg.com/80/v2-ad08059be04698f8a70d2729cea8ec18_720w.jpg)
### 1.2 IE盒子模型(怪异盒模型)
![img](https://pic3.zhimg.com/80/v2-d755200d4f64ca2463b75375a2b47d26_720w.jpg)
## 二、知识点
### 2.1 标准模型和IE模型的区别
计算宽度�