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區域。