好程式設計師Web前端分享前端CSS篇

　　今天 好程式設計師 跟大家分享的文章是 CSS 篇。 Web 前端技術由 html 、 css 和 javascript 三大部分構成，而我們在學習它的時候往往是先從某一個點切入，然後不斷地接觸和學習新的知識點，因此對於初學者很難理清楚整個體系的脈絡結構。今天小編將為大家帶來關於 Web 前端中 CSS 的介紹，下面我們一起來看一看吧 ~

 

　　1 、 CSS 選擇器

 

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

 

　　2 、 CSSReset

 

　　HTML

 

　　標籤在不設定任何樣式的情況下，也會有一個預設的 CSS 樣式，而不同核心瀏覽器對於這個預設值的設定則不盡相同，這樣可能會導致同一套程式碼在不同瀏覽器上的顯示效果不一致，而出現相容性問題。因此，在初始化時，需要對常用標籤的樣式進行初始化，使其預設樣式統一，這就是 CSS

 

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

 

　　Neat.css

 

　　3 、盒子佈局

 

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

 

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

 

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

 

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

 

　　4 、浮動佈局

 

　　設定元素的 float 屬性值為 left 或

 

　　right ，就能使該元素脫離普通文件流，向左或向右浮動。一般在做宮格佈局時會用到，如果子元素全部設定為浮動，則父元素是塌陷的，這時就需要清除浮動，清除浮動的方法也很多，常用的方法是在元素末尾加空元素設定 clear:both ，

 

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

 

　　5 、定位佈局

 

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

 

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

 

　　是絕對定位，它以離自己最近的定位父容器作為參照進行偏移 ; 為了對某個元素進行定位，常用的方式就是設定父容器的 poistion:relative ，因為相對定位元素在不設定

 

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

 

　　即固定定位，它則以瀏覽器視窗為參照物， PC 網頁底部懸停的 banner 一般都可以透過 fixed 定位來實現，但 fixed 屬性在移動端有相容性問題，因此不推薦使用，可替代的方案是：絕對定位 + 內部滾動。

 

　　6 、彈性佈局

 

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

 

　　屬性將失效。

 

　　7 、 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 屬性，從而達到動畫效果。

 

　　8 、 BFC

 

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

 

　　根元素，即 HTML 元素

 

　　float 的值不為 none

 

　　overflow 的值不為 visible

 

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

 

　　position 的值為 absolute 或 fixed

 

　　9 、 Sprite ， Iconfont ， @font-face

 

　　對於大型站點，為了減少 http 請求的次數，一般會將常用的小圖示排到一個大圖中，頁面載入時只需請求一次網路，

 

　　然後在 css 中透過設定 background-position 來控制顯示所需要的小圖示，這就是 Sprite 圖。

 

　　Iconfont ，即字型圖示，就是將常用的圖示轉化為字型資源存在檔案中，透過在 CSS 中引用該字型檔案，然後可以直接用控制字型的 css 屬性來設定圖示的樣式，字型圖示的好處是節省網路請求、其大小不受螢幕解析度的影響，並且可以任意修改圖示的顏色。

 

　　@font-face 是 CSS3 中的一個模組，透過 @font-face 可以定義一種全新的字型，然後就可以透過 css 屬性 font-family 來使用這個字型了，即使作業系統沒有安裝這種字型，網頁上也會正常顯示出來。

 

　　10 、 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}