一.盒子类型
1.margin：
用于控制元素与元素之间的距离；margin的基本用途就是控制元素周围空间的空间间隔，从视觉角度上达到相互隔开的目的
2.padding：用来控制内容与边框的距离
3.Border：围绕在内边距与内容外的边框
4.content：盒子的内容，显示文本和图像
margin
.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
简写：.margin-test {margin: 5px 10px 15px 20px;}
顺序:上右下左
.mycenter{margin:0 auto} #常见居中
padding
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
简写：.padding-test{padding:5px 10px 15px 20px;}
顺序：上右下左
简写方式
1.提供一个：作用于四边
2.提供两个，第一个作用于上下，第二个作用于左右
3.提供三个，第一个作用于上，第二个左右，第三个作用于下
4.提供四个参数，上右下左的顺序
float
在CSS中，任何元素都可以浮动
浮动元素会生成一个块级框，而不论它本身是什么元素
特点：
浮动的框可以向左或向右移动，知道它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现就像浮动框一样不存在
left：向左浮动
right：向右浮动
none：默认值，不浮动
clear
clear属性规定元素对的哪一侧不允许其他浮动元素
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 两侧都不允许浮动元素
none 默认值，允许浮动
inherit 规定从父类中继承clear属性的值
注意：clear属性只会对自身起作用，而不会影响其他元素
清除浮动的副作用(父标签塌陷问题)
主要有三种方式：
固定高度
伪元素清除法
overflow：hidden
伪元素清除法(使用较多)
.clearfix：after{
content：'';
display:block;
clear:both;
}
overflow溢出属性
visible 默认值。内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其他内容
inherit 继承父类的overflow属性
overflow(水平和垂直均设置)
overflow-x(设置水平方向)
overflow-y(设置垂直方向)
定位(position)
1.static
static默认值，无定位，不能当做决定定位的参照物，并且设置标签对象的left、top等值是不起作用的
2.relative(相对定位)
相对定位是相对该元素在文档中的原始位置，即以自己原始位置为参照物。有趣的是，即时设定了元素的相对定位以及偏移值，元素还占着原来的位置，即占据文档流空间，对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其内层叠通过z-index属性定义。
3.absolute（绝对定位）
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
4.fixed(固定)
ixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
脱离文档流：
绝对定位
固定定位
不脱离文档流：
相对定位
z-index
1.z-index 值表示谁压着谁，数值大的压盖住数值小的
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4.从父现象：父亲怂了，儿子再牛逼也没用
