css3 calc的使用和css3部分新属性的使用

css3 calc()定制自适应宽度

div {
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);
}

calc的使用时注意，运算符前后一定要加空格 calc(100%空格 -空格 50px)
transition 过度动画
4个属性
transition-property
transition-duration
transition-timing-function
transition-delay
简写
transition: width 1s linear 2s;
1.规定应用过渡的 CSS 属性的名称
2.定义过渡效果花费的时间。默认是 0。
3.规定过渡效果的时间曲线。默认是 “ease”
4.规定过渡效果何时开始。默认是 0。
CSS3 动画
animation @keyframes 创建动画

div
{
    animation: myfirst 5s;
}
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

css禁用选中功能

no-select{
	-webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none;
   }

单行省略号

.text-ellipsis{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
}

多行

.text-ellipsis{
    overflow: hidden;      
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    /* autoprefixer: off */     //对，就是加这两个注释就行。
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    display:-webkit-box; 
}