知识分享

CSS3新增了那些属性?

发表日期:2015/7/28 11:50:23 文章编辑: 浏览次数:2088

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

将文章分享到..
相关新闻
全新新闻
随机新闻
最新网站设计案例
Hi,我来帮您!