好程序員Web前端分享前端CSS篇

　　今天好程序員跟你們分享的文章是CSS篇。Web前端技術由html、css和javascript三大部分構成，而咱們在學習它的時候每每是先從某一個點切入，而後不斷地接觸和學習新的知識點，所以對於初學者很難理清楚整個體系的脈絡結構。今天小編將爲你們帶來關於Web前端中CSS的介紹，下面咱們一塊兒來看一看吧~

　　一、CSS選擇器

　　CSS選擇器即經過某種規則來匹配相應的標籤，併爲其設置CSS樣式，經常使用的有類選擇器、標籤選擇器、ID選擇器、後代選擇器、羣組選擇器、僞類選擇器(before/after)、兄弟選擇器(+~)、屬性選擇器等等。

　　二、CSSReset

　　HTML

　　標籤在不設置任何樣式的狀況下，也會有一個默認的CSS樣式，而不一樣內核瀏覽器對於這個默認值的設置則不盡相同，這樣可能會致使同一套代碼在不一樣瀏覽器上的顯示效果不一致，而出現兼容性問題。所以，在初始化時，須要對經常使用標籤的樣式進行初始化，使其默認樣式統一，這就是CSS

　　Reset，即CSS樣式重置，好比：*{margin:0,padding:0}就是最簡單CSSReset，關於CSS重置請參考：

　　Neat.css

　　三、盒子佈局

　　盒子模型是CSS比較重要的一個概念，也是CSS佈局的基石。

　　常見的盒子模型有塊級盒子(block)和行內盒子(inline-block)，與盒子相關的幾個屬性有：margin、border、padding和content

　　等，這些屬性的做用是設置盒子與盒子之間的關係以及盒子與內容之間的關係。其中，只有普通文檔流中塊級盒子的垂直外邊距纔會發生合併，而行內盒子、浮動盒子或絕對定位之間的外邊距不會合並。另外，box-sizing

　　屬性的設置會影響盒子width和height的計算。

　　四、浮動佈局

　　設置元素的float屬性值爲left或

　　right，就能使該元素脫離普通文檔流，向左或向右浮動。通常在作宮格佈局時會用到，若是子元素所有設置爲浮動，則父元素是塌陷的，這時就須要清除浮動，清除浮動的方法也不少，經常使用的方法是在元素末尾加空元素設置clear:both，

　　更高級一點的就給父容器設置before/after來模擬一個空元素，還能夠直接設置overflow屬性爲auto/hidden來清除浮動。除浮動能夠實現宮格佈局，行內盒子(inline-block)和table也能夠實現一樣的效果。

　　五、定位佈局

　　設置元素的position屬性值爲relative/absolute/fixed，就可使該元素脫離文檔流，並以某種參照座標進行偏移。其中，releave

　　是相對定位，它以本身原來的位置進行偏移，偏移後，原來的空間不會被其餘元素佔用;absolute

　　是絕對定位，它以離本身最近的定位父容器做爲參照進行偏移;爲了對某個元素進行定位，經常使用的方式就是設置父容器的poistion:relative，由於相對定位元素在不設置

　　top和left值時，不會對元素位置產生影響;fixed

　　即固定定位，它則以瀏覽器窗口爲參照物，PC網頁底部懸停的banner通常均可以經過fixed定位來實現，但fixed屬性在移動端有兼容性問題，所以不推薦使用，可替代的方案是：絕對定位+內部滾動。

　　六、彈性佈局

　　彈性佈局即Flex佈局，定義了flex的容器一個可伸縮容器，首先容器自己會根據容器中的元素動態設置自身大小;而後當Flex容器被應用一個大小時(width和height)，將會自動調整容器中的元素適應新大小。Flex容器也能夠設置伸縮比例和固定寬度，還能夠設置容器中元素的排列方向(橫向和縱向)和是否支持元素的自動換行。有了這個神器，作頁面佈局的能夠方便不少了。注意，設爲Flex佈局之後，子元素的float、clear和vertical-align

　　屬性將失效。

　　七、CSS3動畫

　　CSS3中規範引入了兩種動畫，分別是transition和animation，transition

　　可讓元素的CSS屬性值的變化在一段時間內平滑的過渡，造成動畫效果，爲了使元素的變換更加豐富多彩，CSS3還引入了transfrom

　　屬性，它能夠經過對元素進行平移(translate)、旋轉(rotate)、放大縮小(scale)、傾斜(skew)

　　等操做，來實現2D和3D變換效果。transiton還有一個結束事件

　　transitionEnd，該事件是在CSS完成過渡後觸發，若是過渡在完成以前被移除，則不會觸發transitionEnd。

　　animation須要設置一個@keyframes，來定義元素以哪一種形式進行變換，

　　而後再經過動畫函數讓這種變換平滑的進行，從而達到動畫效果，動畫能夠被設置爲永久循環演示。設置animation-play-state:paused

　　能夠暫停動畫，設置animation-fill-mode:forwards

　　可讓動畫完成後定格在最後一幀。另外，還能夠經過JS監聽animation的開始、結束和重複播放時的狀態，分別對應三個事件，即

　　animationStart、animationEnd、animationIteration。注意，當播放次數設置爲1時，不會觸發animationIteration。

　　和transition相比，animation設置動畫效果更靈活更豐富，還有一個區別是：transition

　　只能經過主動改變元素的css值才能觸發動畫效果，而animation一旦被應用，就開始執行動畫。另外，HTML5還新增了一個動畫API，即

　　requestAnimationFrame，它經過JS來調用，並按照屏幕的繪製頻率來改變元素的CSS屬性，從而達到動畫效果。

　　八、BFC

　　BFC是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素。好比：內部滾動就是一個BFC，當一個父容器的overflow-y設置爲auto時，而且子容器的長度大於父容器時，就會出現內部滾動，不管內部的元素怎麼滾動，都不會影響父容器之外的佈局，這個父容器的渲染區域就叫BFC。知足下列條件之一就可觸發BFC：

　　根元素，即HTML元素

　　float的值不爲none

　　overflow的值不爲visible

　　display的值爲inline-block、table-cell、table-caption

　　position的值爲absolute或fixed

　　九、Sprite，Iconfont，@font-face

　　對於大型站點，爲了減小http請求的次數，通常會將經常使用的小圖標排到一個大圖中，頁面加載時只需請求一次網絡，

　　而後在css中經過設置background-position來控制顯示所須要的小圖標，這就是Sprite圖。

　　Iconfont，即字體圖標，就是將經常使用的圖標轉化爲字體資源存在文件中，經過在CSS中引用該字體文件，而後能夠直接用控制字體的css屬性來設置圖標的樣式，字體圖標的好處是節省網絡請求、其大小不受屏幕分辨率的影響，而且能夠任意修改圖標的顏色。

　　@font-face是CSS3中的一個模塊，經過@font-face能夠定義一種全新的字體，而後就能夠經過css屬性font-family來使用這個字體了，即便操做系統沒有安裝這種字體，網頁上也會正常顯示出來。

　　十、CSSHack

　　早期，不一樣內核瀏覽器對CSS屬性的解析存在着差別，致使顯示效果不一致，好比margin

　　屬性在ie6中顯示的距離會比其餘瀏覽器中顯示的距離寬2倍，也就是說margin-left:20px;在ie6中距左側元素的實際顯示距離是40px，而在非ie6的瀏覽器上顯示正常。所以，若是要想讓全部瀏覽器中都顯示是20px的寬度，就須要在CSS樣式中加入一些特殊的符號，讓不一樣的瀏覽器識別不一樣的符號，以達到應用不一樣的CSS樣式的目的，這種方式就是css

　　hack，對於ie6中的margin應用hack就會變成這樣：.el{margin-left:20px;_margin-left:10px}