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的大小其他的元素都会相应变化，方便极了。

转载本文章请关注！网站建设选择北京莹晨设计www.itccx.com