前端CSS必須要學的知識點有哪些

本文小編為大家詳細介紹“前端CSS必須要學的知識點有哪些”，內容詳細，步驟清晰，細節處理妥當，希望這篇“前端CSS必須要學的知識點有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一、移動端

移動端還沒有上車。先來總結一下三個基本的移動端開發特性：視口（viewport）、媒體查詢（@media）和相對字體大小。

1.1 視口（viewport）

加上視口之后，頁面將會自動裁剪成適合移動頁面的大小。

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

1.2 媒體查詢（media query）

以下只是對媒體查詢使用的一個演示。實際中我們常用媒體查詢來根據不同寬度的設備顯示不同的布局。

/* HTML */

1.3 相對字體大?。?/span>rem/em）

rem是相對于根字體的大小，em是相對于父級的字體大小。

/* HTML */

二、選擇器

2.1 常用

標簽（tag）、id和類（class）都是常用的選擇器。其中class最為常用。

// id在頁面中是唯一的，class的屬性可以有多個

2.2 關系

后代（parent child-child） 子代（parent>child） 兄弟（+） 相鄰（~）。

兄弟選擇器常用來制作，導航欄中間的一條邊框線。

<ul>

2.3 偽元素

偽類有::before、::after、::selection、::first-line、::first-letter。

其中::before常用來制作三角形和登陸框左邊的圖標。更多請見kingkit。

/* HTML */

2.4 偽類

LVHA（:link,:visited,:hover,:active）、:focus、lang、first-child（last-child,nth-child(n)）

div:first-child {}

2.5 優先級

優先級最高的是設置了!important的元素，其次看元素的權重。權重相同時看誰離HTML更近（內嵌>內鏈>外鏈），近的優先級更高。

權重分配是attr：1000，id：100，class：10，tag：1。當有多種選擇器組合的時候，他們的權重之和就是總權重。權重大的優先級高。

display: none!important; // 優先級最高，IE6不支持同一選擇符中的!important

同級的按照就近原則（內嵌>內連>外鏈），越近優先級越高

優先級最高

三、樣式重置（reset）

3.1 常用重置

* {box-sizing:border-box;} /* IE8+ */

3.2 重置插件（Normalize.css,IE8+）

當然，你也可以不自己寫重置樣式，使用插件制動幫你完成。

四、瀏覽器前綴

想要使用未標準化的新特性，往往伴隨著一大堆兼容前綴。各瀏覽器使用自己的私有前綴實現新功能，我門在寫完了兼容屬性之后，還要加上一條標準屬性。等到屬性標準化之后我們就不需要重新添加標準屬性了。

div

4.1 前綴由來

在實驗性功能尚未標準化之前，瀏覽器廠商為了開發者能盡快的體驗這些新特效。通過帶前綴的CSS屬性使得這些功能可以直接被使用。

待到標準化之后，則可以通過不帶前綴的屬性設置樣式。但是對于沒有更新瀏覽器的用戶來說，樣式依舊需要通過私有屬性訪問。

這樣，你不得不寫N條兼容代碼。chrome（-webkit-）、firefox(-moz-)和opera(-o-)。safari和chrome一樣，私有屬性前綴也是-webkit-。

4.2 解決方案

這時，你需要的是一個Autoprefixer或者-prefix-free。

五、兼容性

除了手寫IE兼容性，你也可以直接使用IE9.js自動處理IE6-9的bug。另外，讓IE6-9支持的支持圓角、背景漸變、邊框圖片、盒陰影、rgba等可視化的功能可以用CSS3PIE。讓IE6-8支持媒體查詢可以使用Respond.js。IE6-7支持CSS3 box-sizing可以使用borderBoxModel.js。IE6-8支持:first-child等高級CSS選擇符，可以用selectivizr。讓IE8及以下的瀏覽器支持H5新元素，可以用html5shiv.js。

5.1 IE條件注釋

這類代碼只有IE會解析，其他瀏覽器會作為注釋處理。更多請見天堂的旋轉木馬。

<!--[if IE 6]>

5.2 IE hack

為針對不同IE瀏覽器進行樣式修改，可以使用css hack。更多請見freshlover。

指定版本：IE6(_),IE7(+),IE8(/),IE9(:root 9)

5.3 指定渲染模式

你可以為IE指定渲染模式，當用戶安裝谷歌插件GCF之后，將會強制頁面使用chrome模式渲染。更多請見腳本之家。

<meta http-equiv="X-UA-Compatible" content="IE=7" /> // IE8-9使用IE7模式渲染

五、方便快速的再次實現需要的效果，把常用的功能封裝起來。通過設置class的方式，使用封裝好的css庫。更多請見深度開源。

CSS3懸浮效果（Hover.CSS）、提示（HINT.css）、進度（progress.js）、加載動畫（css-loaders）、按鈕（Buttons）、預處理（less,sass）、界面（Bootstrap）。

讀到這里，這篇“前端CSS必須要學的知識點有哪些”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。