CSS3主要新特性总结

[abcrun]

盒模型

1. 早期IE在quirks模式下盒模型里width,height属性包含了padding和border，而在W3C标准盒模型中代表元素content的宽和高。为了解决这种差异，可以通过设置盒模型属性 box-sizing:border-box(默认值:content-box) 来让W3C兼容传统的IE盒模型
2. resize是CSS给盒模型增加的新的属性，设置相应的值后可以通过拖拽调整盒模型大小**resize:none|both|horizontal|vertical**
3. 关于outline和border属性的主要区别:border属于盒模型的一部分，outline则不是;border可以对各个边单独的设置不同的样式，而outline不能单独设置，各个边的样式也完全一样。outline:[outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit
4. box还增加了阴影的属性 box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit。

CSS3选择器

1. 基本选择器: id,class,tag,*通配符,群组
2. 层次:后代选择器E F,子选择器E>F,相邻兄弟选择器E+F,向后兄弟选择器E~F
3. 结构伪类:E:first-child/last-child, E:root, E F:nth-child(n)/nth-last-child(n), E:first-of-type/last-of-type/only-of-type/only-child/empty, E:nth-of-type(n)/nth-last-of-type(n)。其中n是从1开始，值可以为odd,even,2n-1等
4. 表单伪类:E:diabled,E:enabled,E:checked
5. 动态伪类:E:link,E:visited,E:hover,E:active,E:focus
6. 目标伪类:E:target - URL中包含hash时，选择E元素内id是hash的子元素。可以和其他选择器配合使用，如通过:target元素后，在缩小到其子元素，如:.abc :target p
7. 语言伪类:E:lang(language)。如
   中div:lang(zn)匹配的是
8. 否定伪类:E:not(F)匹配所有F元素外的E元素
9. 伪元素:E::before,E::after,E::first-letter,E::first-line,E::selection。其中E::selection表示selection被选择区域的元素
10. 属性选择器:E[attr], E[attr=val], E[attr|=val]表示attr=val或以val-开头的值, E[attr~=val]表示attr具有多个属性且其中一个的值是val, E[attr*=val]表示attr的属性值包含val, E[attr^=val],E[attr$=val]

CSS3变形

transform: none|transform-functions|initial|inherit;
transform-origin: x-axis y-axis z-axis|initial|inherit;//用于改变被转换元素的基准坐标
transform-style: flat|preserve-3d|initial|inherit;//用于规定看到的转换元素是flat还是3d视角。
perspective: length|none;//规定了3d元素的视图距离
perspective-origin: x-axis y-axis|initial|inherit;//规定了3d元素基于x,y轴的相对位置,从而展示距离地步的位置。
backface-visibility: visible|hidden|initial|inherit;//用于当旋转3d元素时，隐藏的底部是否可见。

1. transform-origin坐标中Y轴是正方向向下
2. 结合perspective属性,通过设置perspective-origin的值可以简单的从几个特定的角度观看物体(如一个正方体);若想从更多的角度来观察物体，只能通过设置transform-functions的rotateX,rotateY,rorateZ值
3. transform-functions中rotate3d(x,y,z,a)表示对象以 原点到点(x,y,z)的向量为轴，旋转a角度
4. 多个transform属性用空格隔开

CSS3过渡

1. transition可以指定多组样式过度，每一组都包含四个属性**[transition-property transition-duration transition-time-function transition-delay]**;不同的样式组合用逗号隔开
2. transition的四个属性可以单独设置
3. 同perspective-origion一样，transition-time-function有几个简单的默认方法，如果想详细的控制动画可以通过设置cubic-bezier和step函数作为transition-time-function的值
4. transition是异步的，浏览器给transition提供了transitionEnd事件，但仍有问题暂不可用
5. transition过度有时候不够流畅，可以通过添加变形属性transform(如transform:translate(0))启用硬件加速

CSS3动画

动画则是针对上面两种属性的综合运用。通过设置@keyframes来定义一种动画效果。@keyframes animationname {keyframes-selector {css-styles;}}。关于keyframes-selector可以用from,to关键字也可以通过%来设置各个阶段的样式。

而动画的应用可以通过animation来实现。

animation: @keyframes-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
animation-iteration-count: number|infinite|initial|inherit;//定义动画执行次数
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;//规定如果动画重复多次时，是否执行中reverse，alternate/alternate更进一步区分在奇数或者偶数次数时是否需要reverse。
animation-fill-mode: none|forwards|backwards|both|initial|inherit;//定义了动画执行前后的样式。
animation-play-state: paused|running|initial|inherit;//规定动画当前应该处于什么状态

CSS3伸缩布局盒模型

1. CSS3新增了伸缩布局display:flex|inline-flex。值为flex时将会按block元素进行渲染，为inline-flex时将会以inline元素进行渲染。如果元素display:inline-flex同时设置为浮动或者定位，那么改元素的display将会按照display:flex进行处理(老版本:display:box)。
2. 伸缩容器包含的属性:
   • 伸缩主轴方向:标准/混合版: flex-direction :row|row-reverse|column|column-reverse(老版本:box-orient:horizontal|vertical)
   • 伸缩容器内项目是否换行:标准/混合版:flex-wrap:nowrap|wrap|wrap-reverse(老版本:box-lines:single|multiple)
   • 主轴对齐方式:标准版:justify-content:flex-start|center|flex-end|space-around|flex-pack(混合版:flex-pack:start|center|end|justify|distribute，老版本:box-pack:start|center|end|justify|distribute)
   • 侧轴对齐方式:标准版:align-items:flex-start|cneter|flex-end|baseline|strech(混合版:flex-align:start|center|end|baseline|strech，老版本:box-align属性值同混合版)
3. 伸缩项目的属性:
   • 伸缩项目为多行时(flex-wap:wap),每行在侧轴对齐方式:flex-line-pack:start|center|end|justify|distribute|stretch(标准版:align-content:flex-start|center|flex-end|space-between|space-around-strech)来指定多行在侧轴的对齐方式。
   • 单个伸缩项目在侧轴的对齐方式(用来覆盖伸缩容器侧轴的对齐方式):flex-item-align(标准版:align-self)
   • 显示顺序:标准版:order(混合版:flex-order，老版本:box-ordinal-group)
   • 伸缩性放大缩小的比例:标准/混合版:flex:none|flex-grow flex-shrink ? || flex-basis`

多列布局

CSS3针对文本内容引入了多列布局模式，主要用于给文字分成几列这种场景。如果包含其他的元素如标题之类的，可以通过设置column-span来横跨所有的列。

columns: auto|column-width column-count|initial|inherit;
column-width: auto|length|initial|inherit;//规定列的宽度
column-count: number|auto|initial|inherit;//规定了多少列

column-gap: length|normal|initial|inherit;//规定列之间的间隙

column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;//规定了列之间分割线的样式
column-rule-width: medium|thin|thick|length|initial|inherit;
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
column-rule-color: color|initial|inherit;


column-span: 1|all|initial|inherit;//规定多列不居中某个子元素所占据多少列，有点类似于colspans

其他

1. 响应式布局包含三部分:流体布局，弹性图片，媒体设备与媒体特性
2. 流动布局和弹性图片主要是通过%来设置宽度
3. 媒体设备与特性就是设备(all,screen,tv,print等)与特性(width,height,color,device-width,resolution等)的组合,通过@media 设备 and 特性 或者在link中指定等
4. 自定义字体，在指定src字体源是注意区分IE和非IE浏览器
5. 样式中获取属性

    <img src=“image.jpg” data-src-600px=“image-600px.jpg” data-src-800px=“image-800px.jpg”/>
    @media (min-device-width:600px){
        img[data-src-600px]{content:attr(data-src-600px,url)}
    }

另外CSS3还增加了很多其他的属性，如背景，边框，文字等，甚至包括UI交互，语音之类的，当然有很多甚至目前没有浏览器支持，但是还是有必要提前了解一下的。关于CSS3的详细内容，还是尽量参考官方文档，或者w3schools http://www.w3schools.com/cssref/default.asp