CSS盒子模型就是在网页设计中经常用到的一种思维模型,是CSS布局的基石,主要规定了元素是如何显示元素间相互关系。 CSS盒子模型就是在网页设计中经常用到的一种思维模型，是CSS布局的基石，主要规定了元素是如何显示元素间相互关系。定义所有元素都可以有像盒子一样的平面空间和外形。包含内容区、填充、边框和外边距，这就是盒模型。

作用：网页元素是如何显示及元素间相互关系的。

盒模型的组成：content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）

网页中经常用到以下四个属性：

1、Content：元素的宽和高，内容，也就是元素的width、height

2、Border ：盒子的边缘，盒子边缘或盒子边缘的厚度

3、Padding ：在盒子里面，盒子和内容之间，显示在盒子和内容之间的空白区，补白、内填充或叫内边距

4、Margin ： 外边距

特点1：加了padding值后，会把元素原本有的大小撑大，如果让元素原本的大小不变，需要在元素的宽高上减掉所加的padding值。

特点2：padding属性对背景图片不起作用的，也可以说背景图片的位置不受padding的影响。

特点3：背景色会延展到padding区域。