CSS3新增屬性

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

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

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

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

CSS：

HTML：

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

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

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

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

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

（3）字級單位。

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

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

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

轉載本文章請關注！網站建設選擇北京瑩晨設計m.bbtklxp.cn