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重疊解決方案

一、父級元素bfc
二、父級元素給一個padding
三、父級元素給一個border
四、子元素前面加任意一個空的內聯元素，（例如：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){
    
}