CSS3新增屬性

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

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

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

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

CSS：

HTML：

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

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

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

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

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

（3）字級單位。

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

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

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

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