html 中盒模型的标准
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间.
盒模型的组成：内容区、补白/填充、边框、边界/外边距。
盒模型具体的css属性:
内填充:pdding属性、外边距:margin属性
以下介绍二个属性的用法
padding的用法
- padding的是长在内容和盒子之间的距离
- padding是长在盒子里面的
- padding的作用:主要控制子元素在盒子中内部的位置关系
- padding添加在父元素上面
- padding可以把盒子撑大
如果让盒子保持原有的大小，需要再宽高的基础上减掉padding
注:如果一个盒子没有固定大小(被内容撑开)，添加padding，不要减。
6.单一方向设置padding值
padding-方向值
例：padding-left
padding-right
padding-top
padding-bottom
7.padding的设置方法
padding：10px(一个值) 四周都padding
padding：二个值 上下 左右
padding：三个值 上 左右 下
padding：四个值 上 右下左
8.padding不会对背景图的位置造成影响
9.padding不能为负值
例：上10px 左100px
padding：10px 0 0 100px
margin的用法
1.margin是长在盒子外围的
2.margin控制当前元素与其他同级元素的位置关系
3.margin不会改变盒子的内部的大小
4.给元素的单一一个方向设置margin值
5.单一方向设置margin值
margin-方向值
例： margin-left
margin-right
margin-top
margin-bottom
6.margin的设置方法
margin：10px(一个值) 四周都margin值
margin：二个值 上下 左右
margin：三个值 上 左右 下
margin：四个值 上右下左
7.margin常出现的BUG
A：同级元素 上下之间的margin的margin值 不会叠加，会重合，按照最大值设置
B：当父元素和第一个子元素都没有浮动，给一个子元素添加margin-top
margin-top：添加在父元素上面
margin：0 auto；让当前元素在父元素里面左右居中