Css前端的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)Css前端的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

一、移動端

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

1.1 視口（viewport）

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

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

1.2 媒體查詢（media query）

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

/* HTML */

1.3 相對字體大?。╮em/em）

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

/* HTML */

二、選擇器

2.1 常用

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

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

2.2 關(guān)系

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

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

<ul>

2.3 偽元素

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

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

/* HTML */

2.4 偽類

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

div:first-child {}

2.5 優(yōu)先級

優(yōu)先級最高的是設(shè)置了!important的元素，其次看元素的權(quán)重。權(quán)重相同時(shí)看誰離HTML更近（內(nèi)嵌>內(nèi)鏈>外鏈），近的優(yōu)先級更高。

權(quán)重分配是attr：1000，id：100，class：10，tag：1。當(dāng)有多種選擇器組合的時(shí)候，他們的權(quán)重之和就是總權(quán)重。權(quán)重大的優(yōu)先級高。

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

同級的按照就近原則（內(nèi)嵌>內(nèi)連>外鏈），越近優(yōu)先級越高

優(yōu)先級最高

三、樣式重置（reset）

3.1 常用重置

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

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

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

四、瀏覽器前綴

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

div

4.1 前綴由來

在實(shí)驗(yàn)性功能尚未標(biāo)準(zhǔn)化之前，瀏覽器廠商為了開發(fā)者能盡快的體驗(yàn)這些新特效。通過帶前綴的CSS屬性使得這些功能可以直接被使用。

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

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

4.2 解決方案

這時(shí)，你需要的是一個(gè)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會解析，其他瀏覽器會作為注釋處理。更多請見天堂的旋轉(zhuǎn)木馬。

<!--[if IE 6]>

5.2 IE hack

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

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

5.3 指定渲染模式

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

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

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

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

關(guān)于“Css前端的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。