总结
padding、margin、float、position:relative以及position:absolute
注意：圣杯布局、自适应布局、padding在宽度为100%时超出浏览器显示、margin-left为负-100%可以让元素移到上一行
padding
padding是给元素增加内边距
属性说明：
- padding-top: 会在元素上方添加像素
- padding-bottom: 会在元素下方添加像素
- padding-left: 会在元素上方添加像素
- padding-right: 会在元素下方添加像素
特点：
- padding负值无效，会自动转为0
- padding:20%: 当单位是%时，是父元素宽度乘以这个百分数
- 可以同时设置四个方向的padding，都会起作用。
容易遇到的问题：
- 因为padding会使得元素自身变大，当根元素宽度是浏览器宽度，又设置了padding，就超出了范围，容易看不出这个情况
- 想要padding加在内侧，也就是不撑大容器，设置
box-sizing:border-box
应用：
- 通常设置
box-sizing:border-box，和padding。使得父元素在内侧四周留白边距。
margin
当取值以%时，是以父元素为基准的百分比,margin控制两个元素之间的距离
自身移动
- margin-left： 正值（自己右移）；负值（自己左移）
- margin-top：正值（自己下移）；负值（自己上移）
相邻的元素移动
- margin-right： 正值（自己不动，相邻元素右移）；负值（自己不动，相邻元素左移）
- margin-bottom：正值（自己不动，相邻元素下移）；负值（自己不动，相邻元素上移）
应用
- 可以通过设置margin-left：-100%将一个块元素移动到上一行，圣杯布局，一个固定宽度一个自适应
叠加
相邻两个的margin = 左边元素的margin-right+ 右元素的margin-left
但是同一个BFC相邻元素margin重叠：
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时，折叠结果是两者的相加的和。
float
定义元素的排列方向，从左到右还是从右到左。一般left/right、 top/bottom不同时使用，同时使用只有一个有效
position:relative
相对定位，相对自身定位，不脱离文档流
- left ：正值（相对自己的左边框向右移）；负值（相对自己的左边框向左移）
- right ：正值（相对自己的右边框向左移）；负值（相对自己的右边框向右移）
- top ：正值（相对自己的上边框向下移）；负值（相对自己的上边框向上移）
- bottom：正值（相对自己的下边框向上移）；负值（相对自己的下边框向下移）
注意：一般left和right、 top和bottom不同时使用，同时使用只有一个有效
position:absolute
绝对定位，相对最近的不是static的父元素定位，脱离文档流
- left：正值（相对父元素左边框右移）；负值（相对父元素左边框左移）
- right：正值（相对父元素右边框左移）；负值（相对父元素右边框右移）
- top：正值（相对父元素上边框下移）；负值（相对父元素上边框上移）
- bottom：正值（相对父元素下边框上移）；负值（相对父元素下边框下移）
注意：一般left和right、 top和bottom不同时使用，同时使用只有一个有效
