Web前端知識CSS知識體系

css是用來對html進行修飾的一門語言。

1、選擇器

css的選擇器有很多種，常用的有類選擇器、標簽選擇器、ID選擇器、后代選擇器、群組選擇器、偽類選擇器(before/after)、兄弟選擇器(+~)、屬性選擇器等等。

2、定位

定位一般有相對定位(relative)、絕 對定位(absolute)、固定定位(fixed), relative和absolute在移動端用的最多，fixed 在移動端的兼容性有問題，因此不推薦使用，在移動端替代fixed的方案是 absolute+內(nèi)部滾動。

3、浮動

設置float為left或right，就能使該元素脫離文檔流，向左或向右浮動。一般在做宮格模式布局時會用到，如果子元素全部設置為浮動，則父元素是塌陷的，這時就需要清除浮動，清除浮動的方法也很多，常用的方法是在元素末尾加空元素設置clear:both, 更高級一點的就給父容器設置before/after來模擬一個空元素，還可以直接設置overflow:auto/hidden。除過浮動可以實現(xiàn)宮格模式，行內(nèi)盒子(inline-block)和table也可以。

4、盒子模型

盒子模型是css最重要的一個概念，也是css布局的基石。 常見的盒子模型有塊級盒子(block)和行內(nèi)盒子(inline-block)，盒子最關鍵的幾個屬性包括margin、border、padding和content,這幾個元素可以設置盒子和盒子之間的關系以及盒子和內(nèi)容之間的關系。還有一個問題是計算盒子的大小，需要注意的是，box-sizing屬性的設置會影響盒子的width和height。只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內(nèi)框、浮動框或絕 對定位之間的外邊距不會合并。

5、Flex布局

Flex布局的容器是一個伸縮容器，首先容器本身會更具容器中的元素動態(tài)設置自身大小；然后當Flex容器被應用一個大小時（width和height），將會自動調(diào)整容器中的元素適應新大小。Flex容器也可以設置伸縮比例和固定寬度，還可以設置容器中元素的排列方向（橫向和縱向）和是否支持元素的自動換行。有了這個神器，做頁面布局的可以方便很多了。注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。

6、transition(過渡) 和 transform(旋轉(zhuǎn))

應用transform可以對元素進行平移(translate)、旋轉(zhuǎn)(rotate)、放大縮小(scale)、傾斜(skew)等處理，而transition使css屬性值(包括transform)在一段時間內(nèi)平滑的過渡。使用transition和transform就可以實現(xiàn)頁面的滑動切換效果。

7、動畫 Animation

Animation首先需要設置一個動畫函數(shù)，然后以這個動畫的方式來改變元素的css屬性之的變化，動畫可以被設置為永久循環(huán)演示。 和transition相比，animation設置動畫效果更靈活更豐富，二者還有一個區(qū)別是：transition只能通過主動改變元素的css值才能觸發(fā)動畫效果，而animation一旦被應用，就開始執(zhí)行動畫。

8、Sprite圖

對于大型站點，為了減少http請求的次數(shù)，一般會將常用的小圖標排到一個大圖中，頁面加載時只需請求一次網(wǎng)絡， 然后在css中通過設置background-position來控制顯示所需要的小圖標。

9、字體圖標 iconfont

所謂字體圖標就是將常用的圖標轉(zhuǎn)化為字體資源存在文件中，通過在CSS中引用該字體文件，然后可以直接通過控制字體的css屬性來設置圖標的樣式。