CSS 專家密技[轉載自 AllThingsSmitty Added pointer-event tip ]

使用 CSS Reset

CSS Reset 可以幫你在不同的瀏覽器上維持一致的樣式風格。你可以使用像 Normalize 這類的 CSS Reset 套件，或使用更簡潔的 CSS Reset 方法：

現在元素的 margin 和 padding 已重設，且 box-sizing 可以讓你透過 CSS Box Model 管理版面配置。示範

注意：如果你接著套用 繼承 box-sizing 這個技巧, 你或許不需要在你的 CSS Reset 中加入 box-sizing 屬性。

繼承 box-sizing

讓 box-sizing 屬性自動從 html 元素繼承下來 ：

如此一來，你就很容易的在其他外掛或元件裡改變 box-sizing 的值。

使用 unset 而不是重置所有屬性

當重置元素的屬性時，並不需要重置元素中每個屬性：

你可以用 all 來代表元素中所有的樣式屬性。 將該值設定為 unset 意味著將元素中所有樣式屬性回復到預設值：

注意： 目前 all 屬性在 IE11 並不支援，而目前 Edge 瀏覽器則正在考慮支援。IE11 不支援 unset 用法！

使用 :not() 選擇器來決定表單是否顯示邊框

假設你用以下樣式先替元素新增邊框

然後在最後一個元素去除邊框

不過你可以改用 :not() 偽類別 (pseudo-class) 來做到完全相同的效果：

當然，你也可以用 .nav li + li，但是使用 :not() 可以使語句更加清晰，更具可讀性。示範

將 line-height 加入到 body 元素

你不必為分別為每一個 <p>、<h*> 元素加入 line-height 樣式，相反的，你應該直接新增到 body 元素：

所有的文字元素預設就會繼承 body 的樣式。

將所有元素設定垂直居中

不！這絕不是黑魔法，這真的可以將所有元素設定垂直居中：

還想居中排版其他的東西？垂直居中、水平居中、... 任何事、任何時間、任何地點？CSS-Tricks 有篇不錯的文章 提到了各種居中排版的技巧。

注意： IE11 的 flexbox 有些怪怪的行為 要注意。示範

想知道更多的技巧，就動動手指連到以下網址去看看吧!! Let's go!!