我們在現代 css 中所面臨的挑戰已經不在於如何繞過這些轉瞬即逝的瀏覽器 bug。如今的挑戰是，在保證 dry ① 、可維護、靈活性、輕量級並且盡可能符合標準的前提下，把我們手中的這些css特性轉化為網頁中的各種創意。這正是這本書將要呈現的內容。——引用自前言
①dry 是 don』t repeat yourself 的首字母縮寫，意思是不應該重複你已經做過的事。它是一種廣為流傳的程式設計理念，旨在提公升**某方面的可維護性：在改變某個引數時，做到只改盡量少的地方，最好是一處。強調 css **的 dry 原則是乙個貫穿本書的主題。dry 的反面是 wet，它的意思是 we enjoy typing（我們喜歡敲鍵盤）或 write everything twice（同樣的**寫兩次）。雖然建議是作為高階閱讀，但是每篇攻略都貼心的提供了背景知識提示，不管能否完全看懂，仍然可以開闊思路。
編輯草案（ed）
首個公開工作草案（fpwd）
工作草案（wd）
候選推薦規範（cr
提名推薦規範（pr）
正式推薦規範（rec）
通過在名稱前面加上瀏覽器特有的字首，就可以自由地嘗試使用不同瀏覽器實現的一些實驗性的（甚至是私有的、非標準的）特性，工作組會將收到的反饋吸收到規範之中，並且逐漸完善該項特性的設計。然而這種方式產生了很多弊端，例如隨著規範的修改要來回打補丁修改，**冗餘不利於維護等。
最近，瀏覽器廠商已經很少以字首的方式來實驗性地實現新特性了。取而代之的是，這些實驗性特性需要通過配置開關來啟用，這可以有效防止開發者在生產環境中使用它們，因為你不能要求使用者為了正確地瀏覽你的**而去修改瀏覽器設定。當然，這會導致乙個後果：嘗試這些實驗性特性的開發者會減少；但我們仍然會得到足夠多的反饋，甚至是更高質量的反饋（你可能會質疑），同時還避免了瀏覽器字首的所有缺點。不過我們還需要很長的時間，才能從瀏覽器字首所引發的漣漪效應中解脫出來。**易維護 vs. **量少。
inherit （繼承）：很容易被遺忘，可以用在任何 css 屬性中，而且它總是繫結到父元素的計算值（對偽元素來說，則會取生成該偽元素的宿主元素）。
tips：推薦使用 hsla 而不是 rgba 產生半透明的白色，因為它的字元長度更短，敲起來也更快，這歸功於它的重複度更低。
人的眼睛並不是一台完美的輸入裝置，有時候精準的尺度看起來並不精準，而我們的設計需要順應這種偏差。
在視覺設計領域廣為人知的例子：我們的眼睛在看到乙個完美垂直居中的物體時，會感覺它並不居中，實際上，我們應該把這個物體從幾何學的中心點再稍微向上挪一點，才能取得理想的視覺效果。
每個**查詢都會增加成本，用對了它就是利器。
我們的思路是盡最大努力實現彈性可伸縮的布局，並在**查詢的各個斷點區間內指定相應的尺寸。當網頁本身的設計足夠靈活時，讓它變成響應式應該只需要用到一些簡短的**查詢**。
如果你發現自己需要一大堆**查詢才能讓設計適應大大小小的螢幕，那麼不妨後退一步，重新審視你的**結構。因為在所有的情況下，響應式都不是唯一需要考慮的問題。
以下建議可能會幫你避免不必要的**查詢：
em：相對於當前物件內文字的字型大小。
rem：r是"root"的縮寫，意思是 1rem 等於根元素的字型大小；大部分情況下，根元素就是元素。rem 也可以用基於 html 根元素字型大小的 rem 作為整個網格布局或者ui庫的大小單位.container。
vw：1vw 等於 1/100 的視口寬度。
vh：1vh 等於 1/100 的視口高度。
vmin 和 vmax：是 vw 和 vh（視口高度和寬度）兩者的最小或者最大值。
ch：單位通常被定義為數字 0 的寬度。
ex：定義為當前字型的小寫x字母的高度或者 1/2 的 1em。 很多時候，它是字型的中間標誌。
pc：1pc 等於 12 點。
pt：1pt 等於 1/72 英吋。
合理使用簡寫是一種良好的防衛性編碼方式，可以抵禦未來的風險。
當我們要明確地去覆蓋某個具體的展開式屬性並保留其他相關樣式，那就需要用展開式屬性。
展開式屬性與簡寫屬性的配合使用，可以讓**更加 dry。
預處理器為 css 的編寫提供了一些便利，比如變數、mixin、函式、規則巢狀、顏色處理等。如果使用得當，它們在大型專案中可以讓**更加靈活，而 css 自身在這方面確實有很大侷限。只要我們在**健壯性、靈活性和 dry 方面有追求，就會感受到 css 在這方面的侷限。不過，預處理器也不是完美無缺：
已經有很多受預處理器啟發的特性都已經以各種方式融入到原生 css 中了，原生特性通常比預處理器提供的版本要強大得多，例如：calc() 函式和 color() 函式。
掘金：《css揭秘》筆記（一）
：《css揭秘》筆記（一）
CSS揭秘讀書筆記 （一）
css揭秘讀書筆記 一 一 半透明邊框 要想實現半透明邊框可以使用border div hsla h是色調，取值範圍是0 360。s是飽和度，取值範圍是0 100 l是亮度，取值範圍是0 100 a是透明度，取值範圍是0 1。background clip 用於調整背景圖的顯示區域，有3個值，bor...
css揭秘 筆記 垂直居中
css揭秘第40個小技巧 整篇文章所使用的的結構 如下 an i center yet h1 center me pleasep 1 基於絕對定位的解決方案 main這段 所做的事情相信有css基礎的同學都了解，這裡不做過多的解釋。在網上就能找到這種解決方案。用calc 函式還能再優化一下 main...
css揭秘筆記 字型排版
name zhanglu email zhanglu helloworld 126.com zhanglu helloworld 126.com location earth 如何讓上面這一段html變成這個樣子 background origin content box 很重要，讓條紋和文字行對應...