css是用來對(duì)html進(jìn)行修飾的一門語(yǔ)言。

1、選擇器

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

2、定位

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

3、浮動(dòng)

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

4、盒子模型

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

5、Flex布局

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

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

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

7、動(dòng)畫 Animation

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

8、Sprite圖

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

9、字體圖標(biāo) iconfont

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

      本文由培訓(xùn)無憂網(wǎng)達(dá)內(nèi)教育課程顧問老師整理發(fā)布，更多課程信息可關(guān)注web前端培訓(xùn)或添加老師微信：15033336050

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://www.hebeijilong.cn/news-id-10941.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注web前端頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050