盒模型的基础

1：什么是盒模型，

1. 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。

2：盒模型的组成，

即：由content +padding +border+margin组成基本的框架

3：padding

1.padding是在盒子里面，在盒子与内容之间
2. padding存在于content（内容）与border（边框）之间的
3. 控制子元素在父元素里面的位置关系。
4. 会把盒子撑大
5. 如果想让盒子保持原有的大小：在宽高基础上减掉。（ 如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉 ）
6. padding的设置特点：
padding:30px; 四周
padding:10px 30px; 上下 左右
padding:10px 30px 50px 上 左右 下
padding:10px 30px 50px 100px 上右下左
7. padding不会对背景图的位置造成影响。

4：margin

1. margin在元素外围，不会撑大元素的大小
2. 控制元素与元素之间的间距。
3. margin设置方法：
   margin:30px; 四周
   margin:10px 30px; 上下 左右
   margin:10px 30px 50px 上 左右 下
   margin:10px 30px 50px 100px 上右下左

注: margin的两种BUG

1：如果父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margin-top,会错误放在父元素上面。

2：两个相邻元素上下的margin值 不会叠加 按照较大值设置。