https://juejin.im/post/6869689622676471816
使用CSS重置（reset）
*{ box-sizing:border-box; margin:0; padding:0}使用box-sizing聲明是可選擇，如果你使用下面繼承的盒模型形式可以跳過它。繼承盒模型
html { box-sizing: border-box;}*, *:before, *:after { box-sizing: inherit;}使用flexbox布局來避免margin的問題
（Get Rid of Margin hacks width Flexbox）
當你多少次試著去設計柵格布局如：組合或者圖片畫廊，如果使用浮動的方式，那麼就需要去清除浮動和重置外邊距來使其分解成所需要行數。
為了避免nth-、first-、last-child 問題 ，可以使用flexbox 的space-between 屬性值。
.flex-container{ display:flex; justify-content:space-between;}.flex-container .item{ flex-basis:23%;}使用:not() 解決lists邊框的問題
在web設計中，我們通常使用：last-child nth-child 選擇器來覆蓋原先聲明應在父選擇器上的樣式。
比如說一個導航菜單，通過使用borders 來給每個連結Link創建分割符，然後再在加上一條規則 解除最後一個link的border。
.nav li { border-right: 1px solid #666;}.nav li:last-child { border-right: none;}這是一種很混亂的方式，它不僅強制瀏覽器以一種方式渲染，然後又通過特定的選擇器來撤銷它。
這樣覆蓋樣式是不可避免的。然而，最重要的是，我們可以通過使用：not偽類(pseudo-class) 在你想聲明的元素上僅僅只使用一種樣式：
.nav li:not(:last-child) { border-right: 1px solid #666;}上面就是，除了最後一個li以外，所有的 .nav li 都加上了border樣式，是不是很簡單！
當然，你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是 ：not是更有語義化（semantic）和容易理解的。
body上加入line-height樣式
導致低樣式效率（inefficient stylesheets）的一件事就是不斷的重複聲明。最好是做下項目規劃和組合規則，這樣CSS會更流暢。
實現這一點，就需要我們理解級聯（cascade）,以及如何在通用選擇器寫的樣式可以繼承在其他地方。
行間距（line-height）可以作為給你的整個項目設置的一個屬性，不僅可以減小代碼量，而且可以讓你的網站的樣式給一個標準的外觀。
body { line-height: 1.5;}請注意，這裡的聲明沒有單位，我們只是告訴瀏覽器 讓它渲染行高是 渲染字體大小的1.5倍。
垂直居中任何元素 (vertical-center anything)
在沒有準備使用CSSGrid 布局的時候，設置垂直居中布局的全局規則是一個很好的方式，可以為優雅（elegantly）的設置內容布局奠定一個基礎。
html, body { height: 100%; margin: 0;}body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex;}最近有小夥伴跟三金反饋：今天看的文章，過幾天想看就找不到了。
於是三金優化了公眾號的後臺搜索功能~
現在只要回復以下的乾貨關鍵詞
就能分類查找近期文章啦~
快來試試吧!