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不支持以%爲單位的