CSS3新增屬性

現(xiàn)在移動(dòng)端兩大陣營(yíng)ios和android都是基于webkit內(nèi)核的，而webkit內(nèi)核對(duì)CSS3的支持走在了前面，在這里我們可以拋開(kāi)翔一樣的ie家族，盡情享受多彩絢麗CSS3世界吧！

CSS3給我們帶來(lái)了如：文字陰影（text-shadow）、盒子陰影（box-shadow）、圓角（border-radius）、背景漸變（background: linear-gradient(#000, #fff)）、2D變換（transition）、動(dòng)畫(huà)（animation）等大家耳熟能詳?shù)某Ｓ脤傩酝?，還有如-webkit-mask、-webkit-text-stroke、-webkit-nbsp-mode、-webkit-tap-highlight-color、-webkit-box-reflect、-webkit-marquee、-webkit-box等webkit內(nèi)核私有屬性，至于這些屬性其他瀏覽器支持程度，有興趣的可以自己研究研究，這上面的每一個(gè)屬性都有自己的使用場(chǎng)景，就看如何靈活運(yùn)用。今天我不全部列出，僅簡(jiǎn)單介紹幾個(gè)。

（1）、介紹的第一個(gè)就是display：-webkit-box，我們知道元素大致分為內(nèi)聯(lián)元素、塊狀元素和介于兩者之間的元素，當(dāng)然還有inline-table、table-cell等神馬的，那么display: -webkit-box怎么用呢，什么舉個(gè)應(yīng)用場(chǎng)景，對(duì)于下圖所示的情況，父元素被1、2、3均分，且2和1之間間隔10px，你會(huì)怎么做？

這時(shí)候我們可以試試新的display:-webkit-box，另外還有如下屬性配合使用，
-webkit-box-orient子元素排列方向 horizontal | vertical | inline-axis | block-axis | inherit，其中默認(rèn)值是inline-axis，即橫向排列
-webkit-box-flex 子元素之間比例，僅作一個(gè)系數(shù)
-webkit-box-direction 子元素排列順序 normal | reverse | inherit，其中默認(rèn)值是normal
-webkit-box-flex-group 以組為單位的流體系數(shù)
-webkit-box-ordinal-group 以組為單位的子元素排列方向
-webkit-box-lines 子元素是否換行，類似word-wrap和word-break的作用
-webkit-box-align 子元素垂直方向的對(duì)其方式
-webkit-box-pack 子元素水平方向的對(duì)其方式
這些配合使用的屬性我們?nèi)磕J(rèn)即可

CSS：

HTML：

怎么理解上面的代碼呢，父親有一塊地，要分給兄弟幾個(gè)，除去老大和老二之間的分割線所占的那塊，剩下的部分均分的分?jǐn)?shù)由li的兄弟個(gè)數(shù)和box-flex的總數(shù)確定，現(xiàn)在一共三兄弟，每兄弟的box-flex都是1，所以就總分?jǐn)?shù)=1*1+1*1+1*1=3。
如果代碼稍作修改

那么現(xiàn)在老二的box-flex是2了，總分?jǐn)?shù)就是1*1+1*2+1*1=4，其中老大老三各占一份，老二占兩份，顯示效果如下：

（2）、-webkit-text-size-adjust:none;我做項(xiàng)目的時(shí)候發(fā)現(xiàn)一個(gè)問(wèn)題，就是當(dāng)豎屏的屏的時(shí)候顯示效果不錯(cuò)，但是當(dāng)橫屏的時(shí)候，字體會(huì)變大，無(wú)論你怎么設(shè)置字體大小都無(wú)效，后來(lái)才知道是text-size-adjust（https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust）在作怪。瀏覽器默認(rèn)會(huì)根據(jù)當(dāng)前屏幕和內(nèi)容作調(diào)整，在webkit內(nèi)核的瀏覽器中只需要-webkit-text-size-adjust:none就禁止自動(dòng)調(diào)整，至于是否全局活局部使用看自己的項(xiàng)目需求。

如上圖所示，很明顯當(dāng)手機(jī)由豎屏轉(zhuǎn)向橫屏的時(shí)候主題區(qū)域的文字自動(dòng)變大，跟你自己設(shè)置的大小無(wú)關(guān)，當(dāng)你設(shè)置了-webkit-text-size-adjust:none后橫屏的效果是這樣的

這樣，字體的大小就有我們自己設(shè)置，是可控的。

（3）字級(jí)單位。

我們常用的有px、pt、百分比、em等，很慚愧，我最近才知道有rem，而且是個(gè)相當(dāng)不錯(cuò)的朋友。前面的幾個(gè)單位大家都比較熟悉，不知道有沒(méi)有和我一樣小白的才知道rem的呢，我們就介紹一下這個(gè)新朋友，它是隨著css3來(lái)到這個(gè)世界。

我們之前用em、百分比的時(shí)候遇到的問(wèn)題就是計(jì)算，而且當(dāng)嵌套的層級(jí)太多時(shí)就會(huì)非常難以把控，而用px則被固定死了，現(xiàn)在我們用rem完全不用擔(dān)心這個(gè)問(wèn)題，因?yàn)閞em的參照對(duì)象只有根節(jié)點(diǎn)。我們只需設(shè)置根節(jié)點(diǎn)的大小，所有子節(jié)點(diǎn)都只需參照它來(lái)設(shè)計(jì)就可以，下面是px、em、百分比和pt的對(duì)比

根據(jù)上面的圖表（紅色部分為默認(rèn)，當(dāng)然不同的瀏覽器渲染默認(rèn)值不一樣，具體還需各位實(shí)測(cè)）可以看出，我們只需設(shè)置html根元素字體大小為75%，對(duì)應(yīng)的px值就是12，這樣我們可以很方便的設(shè)置頁(yè)面的寬高和字體大小，當(dāng)然單位是rem，這樣參考對(duì)象才會(huì)永遠(yuǎn)是html而不是父元素，當(dāng)需要變化的時(shí)候，只需改變html的大小其他的元素都會(huì)相應(yīng)變化，方便極了。

轉(zhuǎn)載本文章請(qǐng)關(guān)注！網(wǎng)站建設(shè)選擇北京瑩晨設(shè)計(jì)www.ww520ww.com