一、 元素溢位處理

二、透明度

三、動畫(transform)

transform-origin:0 0;//指定定位x軸 y軸

四、過渡特效

五、動畫（animation）

animation:自定義名稱 2s;

例：

/*關鍵幀的建立*/
@keyframes 自定義名稱 {
    from{CSS樣式}         /*第一個動畫的關鍵幀   開始樣式*/
    percentage{CSS樣式}   /*執行過程樣式*/
    to{CSS樣式}           /*改變樣式*/
    /*可用百分比1-100*/
}
/*呼叫關鍵幀*/
animation:
            animation-name             /*建立的關鍵幀名稱*/
            animation-duration         /*動畫時間*/
            animation-delay            /*延遲時間*/
            animation-iteration-count  /*動畫播放次數*/
            animation-direction        /*動畫播放方向*/
            animation-play-state       /*動畫播放狀態【控制】*/
            animation-timing-function  /*動畫方式【關鍵幀變化】*/
                預設值為1
                特殊值infinite ：表示無限次播放
                normal         ：動畫每次都是迴圈向前播放
                alternate      ：動畫播放為偶數次則向前播放
                running        ：將暫停的動畫重新播放
                paused         ：將正在播放的元素動畫停下來
            animation-fill-mode:動畫開始之前和結束之後發生的操作
                forwards 動畫在結束後繼續應用最後的關鍵幀的位置
                backwards 向元素應用動畫樣式是迅速應用動畫的初始幀
                both 元素動畫同時具有forwards和backwards的效果

例：

.bird {
    min-width: 91px;   /*寬度*/
    min-height: 71px;  /*高度*/
    background: url(http://img.mukewang.com/55ade1700001b38302730071.png)/*圖片*/
}
.birdFly{
    animation-name: bird-slow;/*名稱*/
    animation-duration: 400ms;/*時間*/
    animation-timing-function: steps(3);/*steps要配合精靈圖使用，簡單來說就是用來切換多個精靈圖的，形成幀動畫*/
    animation-iteration-count: infinite;/*次數【無限次】*/
}
@keyframes bird-slow {
    0% {
        background-position: -0px 0px;
    }
    100%{
        background-position: -273px 0px;
    }
}

this.classNamem="move";//呼叫方法

this.classNamem=""; //清除方法

this.classList.add("move"); //新增方法

this.classList.remove("move");//清除方法

六、內聯與塊級標籤

1、塊元素

2、使用display設定元素的顯示方式

 注：如果display設定為none，float及position屬性定義將不生效；

 重置瀏覽器預設樣式：下載CSSReset

七、佈局

1、多列布局

2、彈性佈局（Flexbox）

/*放在父類*/
display: flex;              
justify-content:space-between; 

1、display屬性值flex： 將物件作為彈性伸縮盒顯示。【display: flex; /設定彈性盒子/】

2、flex：none | flex-grow、 flex-shrink || flex-basis

　　 (1)、功能：設定或檢索彈性盒模型物件的子元素如何分配空間

　　 (2)、適用於：flex子項

　　 (3)值：

(4)、Flex容器可以設定屬性flex-flow，取值為row,row-reverse,column,column-reverse四種值:與彈性盒子設定在一起

1、display: flex;：指定某元素使用 Flexbox 佈局。

注：

（1）、兩個控制元件元素的寬度沒有發生變化，因為彈性佈局預設不改變專案的寬度。

（2）、彈性佈局預設左對齊，所以兩個控制元件會從行首開始排列。

2、flex-grow: 1;//預設為0

說明：容器中剩餘的空間將平均分配給所有子元素。如果其中一個子元素的值為2，那麼剩餘的空間將會佔用兩倍於其他元素的空間；

3、align-self 屬性定義flex子項單獨在側軸（縱軸）方向上的對齊方式。

值：

　　flex-start：頂邊對齊，高度不拉伸

　　flex-end ：底邊對齊，高度不拉伸

　　center ：居中，高度不拉伸

　　stretch ：預設值，高度自動拉伸

4、align-items 屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。

值：

　　flex-start：頂邊對齊，高度不拉伸

　　flex-end ：底邊對齊，高度不拉伸

　　center ：居中，高度不拉伸

　　stretch ：預設值，高度自動拉伸

　　baseline ：元素位於容器的基線上。

5、flex-direction 屬性規定靈活專案的方向

值：

　　row(預設) :從左到右;

　　row-reverse :是從右到左

　　column :從上到下

　　column-reverse:從下到上

6、flex-wrap 屬性規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。

值：

　　 nowrap（預設）：所有flex item將在一條線上

　　wrap ：flex item將會從上到下分為多行

　　 wrap-reverse ：flex item將會從下到上分為多行

7、flex-shrink 屬性指定了 flex 元素的收縮規則。flex 元素僅在預設寬度之和大於容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。

值：數字

3、瀑布流佈局

1、下載：masonry

2、引用：

<script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>

3、初始化外掛：

(1)、方法一：使用jQuery

//頁面載入時
window.onload = function() {
    //獲取容器
    $('#grid').masonry({
        //瀑布流佈局中的單項選擇器
        itemSelector: '.grid-item',
        columnWidth: 200
    });
}

(2)、方法二：JavaScript

//頁面載入時
window.onload = function() {
    var grid = document.querySelector('#grid');
    var msnry = new Masonry(grid, {
        itemSelector: '.grid-item',
        columnWidth: 200
    });
}

4、屬性：

4、Grid佈局

邊距摺疊

　　外邊距摺疊：相鄰的兩個或多個外邊距 (margin) 在垂直方向會合併成一個外邊距（margin）

　　相鄰 ：沒有被非空內容、padding、border 或 clear 分隔開的margin特性. 非空內容就是說這元素之間要麼是兄弟關係或者父子關係，

垂直方向外邊距合併計算

　　a)、參加摺疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。

　　b)、參與摺疊的 margin 都是負值：取的是其中絕對值較大的，然後，從 0 位置，負向位移。

　　c)、參與摺疊的 margin 中有正值，有負值：先取出負 margin 中絕對值中最大的，然後，和正 margin 值中最大的 margin 相加。

1、網格容器：

display:grid;

2、單位：

（1）、fr：剩餘空間分配數。用於在一系列長度值中分配剩餘空間,如果多個已指定了多個部分,則剩下的空間根據各自的數字按比例分配

3、grid-template：定義行與列的軌道大小

說明：使用以空格分隔的多個值來定義網格的列和行。

（1）、列：grid-template-columns

（2）、行：grid-template-rows

屬性值：

（1）、軌道大小【track-size】:可以使用css長度(pX、em等)、百分比、或用分數(用f單位)

（2）、網格線名字【line-name】:可以選擇任何名字

/*軌道大小*/
.container{
    display: grid;                                    /*定義網格容器*/
    grid-template-columns : 40px 50px auto 50px 40px ;/*5列*/
    grid-template-rows : 25% 100px auto ;             /*3行。。。(或更多)*/
}
/*網格線名稱+軌道大小*/
.container{
    display: grid;                         /*定義網格容器*/
    /*5列【網格線名稱+軌道大小】*/
    grid-template-columns :[one]40px [two]50px [three]auto [fout]50px [five]40px ;
    grid-template-rows : 25% 100px auto ;        /*3行。。。(或更多)*/
}

4、grid-template-areas：通過引用grid-area屬性指定的網格區域的名稱來定義網格模板。

屬性值：

（1）、<grid-area-name>:使用grid-area屬性設定的網格區域的名稱

（2）、".":點號代表一個空網格單元

（3）、none:沒有定義網格區域

.container{
    tgrid-template-areas : "header header header header"  //第一行
                           "main main . sidebar"          //第二行
                           "footer footer footer foot"    //第三行
} 

5、指定網格線的大小，控制行列之間的間距寬度：

（1）、列：grid-column-gap:數值(px等等)

（2）、行：grid-row-gap:數值(px等等)

6、對齊

（1）、沿著行軸對齊網格內容：justify-items

值：

　　1）、start:內容與網格區域的左端對齊

　　2）、end：內容與網格區域的右端對齊

　　3）、center：內容位於網格區域的中間位置

　　4）、stretch ：內容寬度佔據整個網格區域空間（這是預設值）

（2）、沿著縱軸對齊網格內容：align-items

值：

　　1）、start:內容與網格區域的頂部對齊

　　2）、end：內容與網格區域的底部對齊

　　3）、center：內容位於網格區域的中間位置【垂直居中】

　　 4）、stretch ：內容寬度佔據整個網格區域空間（這是預設值）

（3）、簡寫：place-items:【值一樣】(第一個【列】 第二個【行】)

7、css函式

（1）、repeat():重複

例：

grid-template-columns :repeat(5,100px) ;

8、合併行列【如：把2列合併為一列】

（1）、列的開頭：grid-column-start

（2）、列的結尾：grid-column-end

（3）、行的開頭：grid-row-start

（4）、行的結尾：grid-row-end

.c .t:nth-child(7){
    background-color: royalblue;
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 5;
} 

5、PC端固定佈局

6、移動端流體佈局

rem

font-size:625%;

max-width:6.4rem;

margin:0 auto;

每個標籤都有設定：font-size

媒體查詢

7、相容響應式佈局

unction resize() {
        var w = document.documentElement.clientWidth;
        document.documentElement.style.fontSize = w * 20 / 290 + "px";
}
window.onresize =resize 

max-width:1263px;

百分比

八、漸變

九、字型

1、使用@font-face：

@font-face {
    font-family: myiconfont2; 
    font-family: <Name>;
    src: url('fontello-e1116127/font/fontello.woff2'); 
    src: <source> [<format>][, []]*;            };
    [font-weight: <weight>];         
    [font-style: <style>];
} 

(1)、Name  :自定義的字型名稱。
(2)、source:自定義的字型的存放路徑。
(3)、format:自定義的字型的格式，其值主要有以下幾種型別：
       ①、truetype,
       ②、opentype,
       ③、truetype-aat
       ④、embedded-opentype,
       ⑤、avg等；
​
(4)、weight和style:weight定義字型是否為粗體，style主要定義字型樣式，如斜體。

2、下載字型：

　　 (1)、http://fontello.com/

　　(2)、http://www.fontawesome.com.cn/

3、使用字型：

(1)、方法一：

<style type="text/css">/*引入字型*/
    @font-face {
        font-family:iconfont;                     /*自定義字型名稱*/
        src: url("fontello-e1116127/font/fontello.woff2");   /*字型路徑【注：一定要“/”】*/
        font-weight: normal;                                 /*加粗*/
        font-style: normal;                                  /*字形，如斜體*/
    }
    h1,h2{
        font-family:iconfont;     /*使用字型*/
    }
</style>
<h1>&#xe800;</h1>        <!--字型編號：&#開頭-->

(2)、方法二：

/*方法二、偽元素*/
h2:after{
    content: "\e804";
}       
<h2></h2>

(3)、方法三：

<!--方法三、引入字型樣式-->
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0(字型圖示)/css/font-awesome.min.css"/>
<!--根據規則使用字型-->
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>

4、字型格式轉換：

(1)、常用的字型轉換線上工具如下：

　　 ①、https://www.fontsquirrel.com/tools/webfont-generator

　　 ②、https://everythingfonts.com/

　　 ③、http://www.freefontconverter.com/

　　④、http://www.font2web.com/

(2)、這裡以webfont-generator為例：

步驟：

　　 ①、先下載字型，英文字型可以去"http://www.dafont.com/"下載

　　 ②、將下載到的字型上傳：

　　　　Ⅰ、開啟https://www.fontsquirrel.com/tools/webfont-generator字型格式轉換網站

　　　　Ⅱ、upload fonts 【上傳字型】

　　　　Ⅲ、BASIC（直接轉換）、OPTIMAL（最佳轉換）、EXPERT...（專家） 【三選一】

　　　　Ⅳ、Agreement:Yes, the fonts I'm uploading are legally eligible for web embedding.【點選允許】

　　　　Ⅶ、download your kit 【下載你的工具包】

③、引入字型、使用字型

 @font-face {
     font-family:sketch3d;
     src: url("webfontkit-20180823-073032/chased_through_the_woods-webfont.woff2");
}
h1{
    font-family: sketch3d;
}
<h1>Holle Web</h1>