一、css3選擇器

1、 [class~=flower]
選擇 title 屬性包含單詞 "flower" 的所有元素。
2、 [class|=box]
選擇 lang 屬性值以 "box" 開頭的所有元素。
3、 :focus
選擇獲得焦點的 input 元素。
4、 p::first-letter
選擇每個 <p> 元素的首字母。
5、 p:first-child
選擇屬于父元素的第一個子元素的每個 <p> 元素。
6、 ::after ---- ::before
在每個 <p> 元素的內(nèi)容之前插入內(nèi)容。-----在每個 <p> 元素的內(nèi)容之后插入內(nèi)容。
7、 a[class^=red]
選擇其 class 屬性值以 "red" 開頭的每個 <a> 元素。
8、.box2 [class$=red]
選擇其 class 屬性以 "red" 結(jié)尾的所有 .box 2元素。
9、 a[src*="abc"]
選擇其 src 屬性中包含 "abc" 子串的每個 <a> 元素。
10、.box3 h1:first-of-type
11、 tr:nth-child(2n+1)
選擇屬于其父元素的基數(shù)子元素的每個 <p> 元素。
12、 :disabled
選擇每個禁用的 <input> 元素

二、css3的瀏覽器私有前綴

chrome/safari : -webkit-
FF: -moz-
ie: -ms-
Opera: -o-
!!!!!!如何處理私有前綴：autoprefixer插件

三、css3的過渡

    transition-property: width;
    /*規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。*/
    transition-duration: 1s;
    /*定義過渡效果花費(fèi)的時間。默認(rèn)是 0。*/
    transition-timing-function: linear;
   /*規(guī)定過渡效果的時間曲線。默認(rèn)是 "ease"。*/
    transition-delay: 2s;
    /*規(guī)定過渡效果何時開始。默認(rèn)是 0。*/
    /*簡寫： transition: width 1s linear 2s;*/
/*三種形式*/
    transition: all 1s;
    transition: width 1s;
    transition: width 1s,height .5s 3s;

四、圖標(biāo)字體

1、 使用圖標(biāo)字體的原理
（1） 引入字體文件 *.ttf或其它
（2）在html文件中：定義字體
@font-face{
font-family: 'mzd';
src:'字體文件的地址'
}
(3)使用字體
.box {
font-family: 'mzd'
}
2、使用時的兩種方案
（1）阿里巴巴圖標(biāo)字體
（2）font-awesome: 圖標(biāo)字體庫

五、transform變形

    /*translate()---平移*/
    transform: translate(x,y);
    transform: translate3d(x,y,0);
    /*用translate3d能起到優(yōu)化作用*/
    /*rotate()---旋轉(zhuǎn)*/
    transform: rotate(30deg);
    /*scale()---縮放*/
    transform: scale(2);
    /*skew()--傾斜*/
    transform: skew(30deg,45deg)
    /*transform-origin()  --- 設(shè)置變換中心*/
    transform-origin:x y 

六、animation動畫

1、animation動畫的使用方法
（1）先定義動畫規(guī)則

  @keyframes ripple{
                0% {}
                25% {}
            }

（2）使用動畫規(guī)則

   .box {
                animation: ripple 3s;
            }

2、animation的屬性

            animation: fly 2s; 
            /*規(guī)定 @keyframes 動畫的名稱。*/
            animation-name: fly;
             /* 規(guī)定動畫完成一個周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。*/
            animation-duration: 2s;
            /*規(guī)定動畫的速度曲線。默認(rèn)是 "ease"。*/
            animation-timing-function: cubic-               bezier(.46,-0.48,.24,1.46); 
            /*規(guī)定動畫何時開始。默認(rèn)是 0。*/
            animation-delay: 2s; 
           /* 規(guī)定動畫被播放的次數(shù)。默認(rèn)是 1。（infinite: 無限次） */
            animation-iteration-count:2 ;
            /* 規(guī)定動畫是否在下一周期逆向地播放。默認(rèn)是 "normal" ，‘a(chǎn)lternate'。*/
            animation-direction:alternate;
            /*  規(guī)定動畫是否正在運(yùn)行或暫停。默認(rèn)是 "running",'paused'。*/
            animation-play-state: paused;
            /*規(guī)定對象動畫時間之外的狀態(tài)。*/
            animation-fill-mode: both;  // backwards forwards

七、3d變換

1、能夠?qū)崿F(xiàn)3d立體效果的屬性
    transform: rotateX()
    transform: rotateY()
    transform: translateZ()
2、3d動畫效果中最重要的屬性
    （1）perspective:   舞臺上
    (2) transform-style: preserve-3d;  (加在3d變換元素的父元素上，在動畫中，一般是控制父元素的動畫) 
    （3）變形的中心點： transform-origin : x軸 y軸 z軸; （z軸要用具體的像素）
    （5）背面隱藏： backface-visibility: hidden;

八、媒體查詢&響應(yīng)式布局

 /*1、設(shè)置視口（了解）*/：  
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">

 /*2、根據(jù)屏幕寬度，加載不同的*.css文件*/
        <link rel="stylesheet" href="css/responsive.css" media="(max-width:1200px) and (min-width: 992px)">

 /*3、（重點）根據(jù)屏幕寬度，設(shè)置不同的css樣式*/
        @media (max-width: 1200px) and (min-width: 992px){
            .wrapper { width:970px; margin:0 auto; }
            .header .nav>ul>li>a { width:100px; }
        }
        @media (max-width: 992px) and (min-width: 768px){
            .wrapper { width:750px; margin:0 auto; }
            .header .nav>ul>li>a { width:70px; font-size:12px;}
            .header .logo img {width: 100px; height: auto;}
        }
        @media (max-width: 768px){
            .wrapper { width:90%; margin:0 auto; }
            .header .nav { display: none;}
            .header .logo img {width: 100px; height: auto;}
        }

九、css邊框

border-radius: 50%;

十、css背景

background-size: 199px  |   100%  |  cover | contain

十一、漸變：

    線性漸變 ：
         background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, #fff), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));
        background: linear-gradient(#f00, #00f, #0f0);
    徑向漸變：
         background: -webkit-radial-gradient(red, green, blue);
        /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(red, green, blue);
        /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(red, green, blue);
        /* Firefox 3.6 - 15 */
        background: radial-gradient(red, green, blue);

十二、盒子陰影：

    box-shadow: 1px 2px 4px #f00

十三、border和padding 添加在content區(qū)域：

box-sizing: border-box;

十四、省略號：

  overflow:hidden;   
  white-space:nowrap    
  text-overflow: ellipsis;

十五、彈性盒子 （?。。。?！面試的重點）

   /* 添加在伸縮容器上*/
        display: flex
        flex-direction: row
        justify-content: flex-start
        align-items: flex-start
        flex-wrap: wrap;
        flex-flow: row wrap;
        align-content: flex-start; (多行的對齊方式)
    /*添加在伸縮項目上      單個項目的對齊方式*/
         align-self: flex-end;
         flex: 1;
         margin-right: auto;
         order: 1;