CSS3实践手册

##will-change

不要再使用translateZ()或者translate3d()去骗GPU硬件加速了，而应使用will-change提早通知浏览器咱们须要对元素作什么动画，以便浏览器提早准备合适的优化设置

注意合理使用，不能泛滥使用形成系统资源浪费，同时给浏览器必定的准备时间。正确的使用姿式：

.element {
  transition: transform 1s ease-out;
}
.element:hover {
  will-change: transform;
}
.element:active {
  transform: rotateY(180deg);
}

更多关于will-change，参考这里

##pointer-events

设置pointer-events:none;可使鼠标不会点击到该DIV层上，而是直接穿透点击其底下的元素。

.elem{pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit}

pointer-events属性有不少值，可是对于浏览器来讲，只有auto和none两个值可用，其它的几个是针对SVG的(自己这个属性就来自于SVG技术)。

pointer-events属性值详解

auto: 效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。

none: 元素再也不是鼠标事件的目标，鼠标再也不监听当前层而去监听下面的层中的元素。可是若是它的子元素设置了pointer-events为其它值，好比auto，鼠标仍是会监听这个子元素的。

##zoom与transform-scale

transform-scale只是对元素进行视图缩放，但占位仍是保持不变；而zoom不只把元素缩放，其占位也相应地缩放；有点相似visibility:hidden;和display:none;的区别

##margin-top:%

margin-top:margin和padding无论是上下的仍是左右的，其百分比%单位是以该容器的宽度做为计算的，与高度无关！宽度为500px，那么margin-top:1%等同margin-top:5px;，它是以宽度做为百分比来计算，而不是高度哦！

##border-width:%

border-width不支持以%为单位的