放大屏幕，背景图不变
background: url(x.png) no-repeat 0 0;
background-image: -webkit-image-set(url(logo_db.png) 1x, url(2x.png) 2x); //-moz-image-set -o- -ms-其它浏览器兼容
鼠标移入背景加阴影移动（小米）
background: rgba(253, 253, 253, 0.06);
-webkit-box-shadow: 0 2px 27px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 27px rgba(0, 0, 0, 0.2);
-webkit-transform: translate3d(0,-2px,0);
transform: translate3d(0,-2px,0);
渐变透明背景
background: linear-gradient(to bottom, #0C0A46, 50%, #23115F);
H5去除记住密码黄色背景（手机端）
<input type="email" name="email" autocomplete="off" /><br />
height和width单位：vh 和 vw
IE10＋ 和现代浏览器都支持这两个单位。 vw Viewport宽度， 1vw 等于viewport宽度的1%
vh Viewport高度， 1vh 等于viewport高的的1%
vw和vh会随着viewport变化自动变化，再也不用js控制全屏了。 甚至有些人丧心病狂的字体大小都用vw和vh控制，来达到字体和viewport大小同步的效果
table里面内容等宽
table{
table-layout: fixed;
}初始化box-sizing
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}margin重叠解决方案
1、父级元素bfc
2、父级元素给一个padding
3、父级元素给一个border
4、子元素前面加任意一个空的内联元素，（例如：span、nbsp等等）
文本显示优化
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
上面代码可以让字体在我们的设备中最优显示！在nth-child中使用负数
//nth-child中使用负数，可以选择小于等于某个数的值，例如：
li:nth-child(-n+4){background:red}
//小于等于4的li，显示为红色！
给空连接使用属性选择符
a[href^="http"]:empty::before {
content: attr(href);
}
//我们还可以给空a标签添加属性使用Flexbox摆脱各种Margin Hacks
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
//实现侧栏时，我们不再需要各种nth-、first-和last-child等设置margin，可以使用Flexbox轻松实现均匀分布任意元素垂直居中
html, body {
height: 100%;
margin:;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}CSS3选择器 :not()的应用技巧
/* 我们平时在书写导航栏分割线的时候，最后一个标签是没有分割线的 */
/* 先给所有添加右侧边框 */
.nav li {
border-right: 1px solid #666;
}
/* 再去除最后一个边框 */
.nav li:last-child {
border-right: none;
} /* 运用:not()之后如下书写 */
.nav li:not(:last-child) {
border-right: 1px solid #666;
} /* 还可以用~波浪选择器来实现 */
.nav li:first-child ~ li {
border-left: 1px solid #666;
} /* 我们在用逗号分隔的列表，最后一个让他没有逗号 */
ul > li:not(:last-child)::after {
content: ",";
}
媒介查询判断iPhone4 和 iPhone5
/* iPhone4媒介 */
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){ } /* iPhone5媒介 */
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){ }