CSS常用技术总结！~~

放大屏幕，背景图不变

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: 0;
}

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){
    
}