概述
CSS3 是 CSS2.1 的拓展版，它的诸多功能已经拆分为模块，这些模块彼此独立，此后的新特性都将模块化，并只按照自己的进度进行标准化。
常用的比如盒模型、选择器、过渡、动画，新的布局比如 flexible box 、grid layout 、multi-columns。
盒模型
每个元素都表示为矩形框，由内向外逐层包裹。CSS3 中新增了box-sizing属性，它有两个属性值。
content-box默认值，标准的盒模型。
在此模式下，浏览器渲染的元素宽度=width+padding-left+padding-right+border-left+border-right。
元素高度同理。
content-box
border-box浏览器渲染宽度就是元素的
width的值，高度同理。
这也是Bootstrap的全局设置，栅格系统就基于这个模式实现。也是当前推荐的设置值。
border-box
选择器(selectors)
新的伪类：:disable 、:checked 、:not等等。
伪元素的新写法，之前使用 :after，CSS3 之后使用双冒号 ::after 。
过渡(trasitions)
改变CSS属性时可以控制改变过程的速度，使得过程能够自定义。
能够支持过渡的属性是一个有限的集合，不是所有属性都支持。
可以在某些地方代替JavaScript使用，更加方便。
动画(animations)
使用 CSS3 进行动画的实现可以很方便的产出动画效果，使用成本低，而且经由浏览器的控制和优化，它的性能要优于使用 JavaScript。
CSS动画主要通过 关键帧@keyframe 来描绘关键时间节点的表现形式，并且通过其他的一些辅助属性来进行更大自由度的动画绘制。
弹性盒子(flexible box) 和 网格布局(grid layout)
弹性盒子，移动互联网时代的新型布局方式，可以很方便的进行垂直居中等布局，不需要那些‘奇技淫巧’的老办法来做了，随着标准的落实，已经可以在 >=IE11 的PC浏览器上使用。
网格布局是下一代的布局方式，可以简洁的实现更复杂的布局，但是目前的浏览器支持度还不够，从 IE Edge 16 才开始完整支持，现在要使用的话必须注意 平稳退化，渐进增强 ，要给不兼容的浏览器留下替代方案。
多列布局(multi-columns)
让文字向报纸一样，把长行变成多列的短行显示，提高阅读体验，从 IE 11 开始全面支持。
网友评论