css的特別在於層疊樣式表，樣式可以層疊（可以多次對同一選擇器進行樣式宣告），選擇器層疊（可以用不同選擇器對同乙個元素進行樣式宣告），檔案層疊（可以用多個檔案進行層疊），正因為這些特性讓css提高了靈活性。css共經歷了四個版本，其中2.1是目前為止使用最為廣泛的版本，從3開始分模組公升級功能，也是眼下最新的版本。當需要了解目標瀏覽器是否支援css特性時，可以使用caniuse．com來查詢。
css的語句並不複雜，難點在於除錯**，尋找錯誤。所以我們在寫**時要養成良好的習慣，而border除錯法就是在寫**時使用起來最方便的除錯方法之一，為元素加入border，通過檢視border出現與否，來判定語句的語法或者選擇器的使用是否出錯誤，除錯完成後即可刪除border。
文件流的概念並非其字面意思，其內容是為了規定文件中元素流動方向。共有３種元素型別，有inline、block、inline－block。inline型別的大小取決於內部元素和,其高度也只由line-height來間接確定,另外兩種則完全可以手動設定大小。當內容總量超出所規定範圍，就會溢位顯示，如果需要在規定範圍內禁止縮放並放下所有內容即可使用overflow語句來建立具有滾動條的視窗。（auto靈活設定，scroll永遠顯示，hidden隱藏溢位部分，visible顯示溢位部分）overflow還可設定-x或-y來控制橫向或縱向的溢位情景。
有時因為我們的需求需要某些元素脫離文件流，當我們使用float、position：absolute/fixed語句來規定選擇器後，引用該選擇器的元素將會脫離文件流。
css盒模型本質上是乙個盒子，封裝周圍的html元素。
盒模型大致可分為兩種
1.content-box（又稱為w3c盒模型、標準盒模型）
2.boder-box（又稱為ie盒模型、怪異盒模型）
盒模型的結構為：
取自飢人谷前端體系課程課件
包含了（content）、內邊距（padding）、邊框（border）、外邊距（margin），這兩種模型之間的區別在於計算寬度與高度時存在差異。
content-box總寬度/高度=width/height + padding + border + margin。（即width/height 只是內容高度，不包含 padding 和 border 值 ）
boder-box總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin。（ 即 width/height 包含了 padding 和 border）
盒模型還存在多個相鄰盒之間邊距合併的原則
1.父子margin合併
2.兄弟 margin合併
（只存在上下外邊界的合併，左右邊界不影響）
也可以應用一些辦法來阻止合併的情況
1.在父子合併處加入父padding/border 擋住
2.在父子合併處加入overflow:hidden 擋住
3.父子合併用display:flex
4.兄弟合併可以改變元素型別為inline-block來阻止
取自飢人谷前端體系課程課件
float布局
在子元素上加float:left和width
在父元素上加.clearfix
主要用於對pc端ie瀏覽器的頁面布局
flex布局
我們先要了解兩個詞的含義
再來介紹如何讓元素變成flex容器
.container盡量不要將寬度或高度設定為固定數值，使用百分比、max或min來控制大小。grid布局同樣存在container與items
.container.container.items-a.container.container.containertranslate位移屬性 //translate(-50%,-50%)可做到絕對定位元素的居中
scale縮放屬性
rotate旋轉屬性 //一般用於360°旋轉製作loading
skew傾斜屬性
為了動畫的製作我們要在開始狀態與結束狀態中加入transition過渡，inline元素不支援transform，需要先變成block。transition過渡的目的是補充動畫缺失的中間幀
transition:屬性名稱 時長 過渡方式 延遲；//可以用逗號分隔兩個不同屬性而另一種辦法就是使用animationdisplay:none=>block無法過度，visibility、background、opacity則可以過渡
當不僅存在一段過程而是多段過程時，可以使用多次transform。
animation的原理不止可以設定起始幀，還可以新增多個關鍵幀設計動畫。標準寫法有以下兩種
@keyframe slidein
to@keyframes ifentifier
30%68%,72%
100%
}
在展示動畫的元素上加入animation:時長 過渡方式 延遲 次數 方向 填充方式 是否暫停 動畫名；以上為暫時的css總結，還會繼續補充將來學習的概念。時長可以秒或毫秒為單位，次數可以為數字也可取infinite。
記一次CSS彈出動畫的Bug
在寫 jquery weui 的乙個picker的彈出動畫的時候，我是通過css動畫實現的。css 如下 weui picker modal js 如下 openpicker function tpl 其實原理很簡單，就是建立dom的時候，通過 translate 把彈窗y軸向下平移 100 於是就...
css3動畫 彈出式選單
今天主要來講講transition和transform結合做的動畫，會舉一些現在 2017年 常見的動畫例子。注 本人也接觸css3不久，如果寫的有紕漏請指出，不喜勿噴。效果 要做這個效果主要用到的是translate 思路就是把整個選單放到右下角，並且設定rigth為負值，當hover的時候，tr...
利用CSS3製作淡入淡出動畫效果
css3新增動畫屬性 webkit keyframes 從字面就可以看出其含義 關鍵幀，這與flash中的含義一致。利用css3製作動畫效果其原理與flash一樣，我們需要定義關鍵幀處的狀態效果，由css3來驅動產生動畫效果。下面講解一下如何利用css3製作淡入淡出的動畫效果。具體例項可參考剛進入本...