CSS盒模型的理解
盒模型的概念
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。
盒模型的作用
规定了网页元素如何显示以及元素间相互关系。
盒模型的组成
盒模型由四个部分组成，分别是conter、padding、conter和margin。
⦁ conter（内容区）：元素的宽和高
⦁ padding（填充区）：内容和边框之前的距离
⦁ border（边框区）：盒子的边缘
⦁ margin（外边界区）：边框以外的区域
padding的特点：
特点一：添加了padding值之后，padding值会把元素原有的大小撑大；如果让元素原本大小不变得话，需要在元素的宽高上减掉所加的padding；
特点二：padding属性对背景图片 是不起作用的，可以说背景图片的位置，是不受padding的影响的。
特点三：背景色会延展到padding区域。
margin：
作用：控制同辈元素之间的位置关系。
特点:margin是现在是在元素边框以外的空白区。
使用方法：
方法一：
margin-top:30px; 上外边距
margin-right:30px; 右外边距
margin-bottom:30px; 下外边距
margin-left:30px; 左外边距
方法二（复合式写法） ：
margin：1 2 3 4 1、上 2、右 3、下 4、左
margin：1 2 3 1、上 2、左和右 3、下
margin：1 2 1、上和下 2、左和右
margin：1 1、上 右 下 左
实现元素水平居中的方法：
①margin：0 auto；
②margin-left:auto; margin-right:auto;
拓展：margin是可以写负值的，padding不可以写负值；margin不会影响元素的实际宽高，但是也会曾加的他的所占区域；