千锋逆战班之简述H5中的盒模型

盒模型定义

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间.
盒模型的组成：内容区（content）、补白/填充（padding）、边框（border）、边界/外边距（margin）。

标准盒模型

这里我们可以看出：
盒模型的宽width：margin-left+border-left+padding-left+content-width+padding-right+border-right+margin-right；
盒模型的高为：margin-top+border-top+padding-top+content-height+padding-bottom+border-bottom+margin-bottom;

padding（内填充）的用法

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

margin（外边距/边界）的用法

1:margin在元素外围，不会撑大元素的大小
2:作用:控制元素与元素之间的间距。
3：给单一方向添加margin：margin-left/right/top/bottom
4 :margin设置方法：
margin:30px; 四周
margin:10px 30px; 上下 左右
margin:10px 30px 50px 上 左右 下
margin:10px 30px 50px 100px 上右下左
5:margin:0 auto;让当前元素在父元素里面左右居中。
6:margin常出现的bug
a:两个相邻元素上下的margin值 不会叠加 按照较大值设置。
b:如果父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margintop,会错误放在父元素上面。

代码区域

效果图