a标签去除原颜色（改为白色）和下划线
text-decoration: none;
color: #ffffff;
列表标签去除默认小点:
list-style-type:none;
设置元素透明度：
opacity:0.5;
页面中文字无法被选中：
user-select: none;
鼠标悬停，样式变化的方法：
a:hover {
opacity: 1;
}
设置字体行高（如果只有一行文字可以达到居中的效果）：
line-height: 45px;
设置字体样式：
font-family: DFKai-SB;
改变鼠标的样式：
cursor : pointer; （变成小手）
cursor : default; （变成默认鼠标样式）
设置元素边框：
border: 1px solid #ffffff;
设置元素圆角：
border-radius: 5px;
设置元素为圆形（元素本身为正方形，即宽高一样）：
border-radius: 50%;
更改精灵图定位：
background-position: -20px -20px;
内容未显示完，有滚动条显示剩下区域：
overflow: auto;
改变盒模型元素宽度计算模型为 IE模型（宽度包括了边框和内边距的长度）：
box-sizing: border-box;
inline-block元素、inline元素、文本、img图片，垂直居中显示，需要设置他们父元素的vertical-align属性（只要元素已设置高度即可让文字内容居中）：
vertical-align:middle;
inline-block元素、inline元素、文本、img图片，水平居中显示，需要设置他们父元素的text-align属性（只要元素能设置宽度即可让文字内容居中）：
text-align: center;
元素根据父元素宽度进行居中显示 block 元素（前提条件，该block元素需要设置有宽度的值）：
margin: 0 auto;
文字加粗：
font-weight: bold;
消除input输入框，点击后轮廓的光圈：
input:focus{
outline: 0px;
}
盒模型整体向XYZ某个方向移动（相比使用外边距移动，性能更优）：
transform: translate3d(200px, 0px, 0px)
布局：
设置子元素左右距离父元素边框百分之5的边距，有如下两种方法，其中第二种方案不脱离文档流：
1、子绝父相，父元素：position: relative; 子元素：position: absolute; left:5%; right:5%;
2、 外边距，子元素（不设置宽度）: height: 100%; margin: 0 5%;
设置绝对定位（设置后可以根据相对定位的父元素，进行位置的定位）：
position: absolute;
设置图层前后顺序（只有脱离文档流的属性可以使用，值越大在的位置越前面）：
z-index: -1;
设置背景图片（平铺）等比拉升，覆盖整个元素：
background-size: cover ;
背景图片上下左右（水平垂直）居中：
background-position: center center;
设置分隔线，可以使用加号选择器（表示当前class为a的元素前一个class也是a，选中当前class为a的元素）保证css代码的一致性：
li .a + .a{
border-right: 1px solid #ffffff;
}
去除a标签的点击跳转的效果：
阴影设置：
box-shadow: 0px 4px 13px 0px rgba(0,0,0,0.2) ;
清楚浮动最优套路，给浮动元素的父元素添加如下CSS样式（::after是伪元素，作用是在该元素的最前面增加一个元素，但在html中并不存在该元素，主要作用是布局页面）:
.a::after {
content:"";
display:block;
clear:both
}
使用自定义动画：
先定义动画效果
@keyframes submenuSlide {
0%{
opacity: 0;
margin-right: 100%;
}
100%{
opacity: 1;
margin-right: 0%;
}
}
再使用动画（执行动画submenuSlide，整个过程1.5s执行完毕，匀速执行，重复执行）
.loading::after{
content: '';
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
animation:submenuSlide 1.5s linear infinite ;
animation-delay: 0.75s; #延迟0.75s执行
}
过度动画（所有变更过度，在0.2s内完成动画效果）：
transition: all 0.2s;
行内元素，常见套路（设置完行内后，需要vat才能让行内元素正常显示）
nav{
display: inline-block;
vertical-align: top;
}
居中套路：
1、行内元素居中
2、块级元素居中
直角三角形套路：
.userCard .welcome .triangle{
/* 将span变成块级元素 */
display: block;
/* 将边框粗细设置为10px 颜色设置为透明*/
border: 10px solid transparent;
/* 如果不设置宽度，有可能会随父元素自适应，最好设置为0 */
width:0px;
/* 将左边边框，单独设置颜色（会覆盖原来设置的透明色） */
border-left-color: #E6686A;
/* 将顶部边框的宽度设置为0（就是让顶部边框隐藏，这样左右两边就是直角三角形了） */
border-top-width: 0px;
/* 子绝父相 */
position: absolute;
top: 100%;
left: 4px;
}
CSS兼容性写法;
http://www.css88.com/book/css/properties/user-interface/user-select.htm
CSS3动画效果生成器：
http://www.cssanimate.com/