1. line-height的文字垂直居中方式
<style>
.test{
height:50px;
border:1px solid red;
line-height:50px;
}
</style>
2. SASS mixin根据不同设备像素比加载不同背影图片
@mixin background-image($url: 'decrease_1'){
background-image($url + '@2x.png');
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3){
background-image($url + '@3x.png')
}
}
这个单独拿出来做一个文件
3.踩坑：如果父级元素设置min-height:100%;子级元素再设置min-height:100%;不生效
设置百分比的值的话，参照的元素相应的值必须是一个确定的值，不然不生效。
4. 把文字和图片放在一起默认是基线对齐，破的方法就是vertical-align:top;
之前用了很多次了，就不再举例了。
5. float和清除浮动
-
设置了浮动的话，它就会浮到当前行的最左边或者最右边，形成方图环绕的效果。
-
浮动的元素脱离了文档流，会遮住div元素，但是不会遮住div的具体内容，浮动元素不会撑起父级元素的高度，父级元素的高度是由没有脱离文档流的元素撑起来的。
-
float最重要的技巧：清除浮动。浮动的元素脱离文档流，不会撑起父元素的高度，所以如果浮动元素高度大于父元素，就会跑出来，那么在这种情况下如何将父元素包住它，如何让浮动元素来撑起父元素的高度？
使用clear方法。设置一个元素clear:both;它的左边和右边都不能有浮动元素，这样它就会跑到浮动元素的下面，而它又是处于文档流中，这样就使它上方的浮动元素也被父元素包起来。而这个元素我们通常会用父元素的伪元素来写。（踩坑：这里就不能写position了。。。。写了还怎么撑高度呀）
<style>
.parent{
border:1px solid red;
}
.parent:after{
display:block;
content:'';
/* position:absolute; 这里不能写position写了就脱离文档流了，就不能撑起父元素的高度了，蠢货！*/
clear:both;
}
img{
float:left;
opacity:0.5;
}
</style>
这里踩了一个坑，如果用伪元素来撑高度的话，怎么能写position呢？流汗！流汗！
6. 清除浮动的三种方法
写一个div标签，设置clear:both;
在父元素写一个CSS伪类（类似一个span标签），设置clear:both; 这种办法用的最多
-
设置父元素overflow:hidden/auto;
