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兼容性写法;

CSS3动画效果生成器：