总结一些常用/复杂的CSS

1.单行文字溢出隐藏

white-space:nowrap;
text-overflow:ellipsis; //溢出的用"..."表示
overflow:hidden;

2.外边距塌陷（外边距合并），父元素样式设置为下面7种任意一种即可：

overflow:auto;
overflow:hidden;
border:1px solid transparent;
padding:1px
display:inline-block;
float:left;
position:absolute;

3.清除浮动

.clearfix:before,
.clearfix:after{
  content: " ";
  display: inline-block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix{
  *zoom: 1;
}

4.常用的reset.css,当然你也可以直接抄用某些大厂的reset.css

@charset "utf-8";
/*网传用通配符会影响性能，其实并没有实质的根据，放心的用吧 */

* {margin: 0;padding: 0;}

/*是让所有的元素都使用 border-box ，并且包括 伪类 before, after 。并不是特殊的定义它们俩。before,after 默认的display 是 inline，但难免有人会把它变成 block 来用，这时候统一box-sizing 会好操作一些。*/
 
*,
*:before, 
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}

ol,ul,li {list-style:none;}

blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {
	content:'';
	content:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
th,td {
	vertical-align:middle;
}

/* custom */
a {
	color:inherit;
	text-decoration:none;
}
a:focus {
	outline:none;
}
input:focus,select:focus,textarea:focus {
	outline:-webkit-focus-ring-color auto 0;
}

/*隐藏，自定义一些比较常用的css*/
.dn{
  display: none;
}

/*清除浮动*/
.clearfix:before,
.clearfix:after{
  content: " ";
  display: inline-block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix{
  *zoom: 1;
}

5.vue.js后常用于解决页面闪烁问题

[v-cloak]{
    display: none;
}

6.em 和 rem 的区别？

em的值并不是固定的， em会继承父级元素的字体大小。看一下例子：

<style>
    .font-father {      font-size: 1.5em; /* 实际为24px */
    }    
    .font-son {      font-size: 1.5em; /* 实际为36px */
    }
</style>
<div class='font-father' >
	<a>hello </a>
	<span class='font-son' >boy</span>
</div>

而rem只会继承根元素root的字体大小。

7.制作 10px 的字体
我们可以用缩放的方式来制作10px字体。需要一些计算：10px = 12px * 0.83或者10px = 20px * 0.5；当然我们会优先采用第一个计算方式，因为避免不支持 CSS3 浏览器的情况，我们也可以通过降级处理，将字体变回12px；最后兼容 IE：*font-size:10px;：

.font10px {
    font-size: 12px;
    transform : scale(0.83,0.83);
    *font-size: 10px;
}