最近在看《css揭秘》，於是寫了文章來作筆記，除此以外還會補充一些自己遇到的筆試題。希望大家都有所收穫。
在實踐中，**可維護性的最大要素是儘量減少改動時要編輯的地方。
舉例說明
padding:6px 12px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow:0 -1px 1px #335166;
font-size:20px;
line-height:30px;
如果需要改變字型大小，那麼同時需要調整行高。
【當某些值相互依賴時，應該把它們的相互關係用**表達出來】
如果將父級的字型大小加大，則不得不修改每一處使用絕對值作為字型尺寸的樣式。
需要確定哪些效果是應該跟著變大變小，哪些效果是保持不變的
產生主色調的亮色和暗色變體，其實可以使用將半透明的黑色或白色疊加在主色調上。
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
//作者建議使用hsla而不是rgba來產生半透明的白色。因為它的字元長度更短，重複率更低。
那麼經過修改後的**如下：
padding: .3em .8em;
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
font-size: 125%;
line-height:1.5
【插播筆試題】
q：line-height:1.5 與line-height:150%的差別？
q：rem,em,px的差別
繼續回到css編碼技巧。
有時候，**易維護和**量少不可兼得。
例如，為元素新增乙個10px寬的邊框，但左側不加邊框
border-width: 10px 10px 10px 0;
但若以後需要改動邊框的寬度，需要同時改3個地方。那麼以下這種方式可能更好。
border-width: 10px;
border-left: 0;
currentcolor【ie9+支援】
例如，我們想讓所有的水平分割線元素自動與文字顏色保持一致，只需要這樣寫。
hr border和box-shadow預設的顏色就是當前的文字顏色，也就是類似currentcolor。currentcolor本身就是很多顏色屬性的初始值，例如border-color、outline-color、text-shadow和box-shadow的顏色。【ios safari瀏覽器下(ios8)下，currentcolor有一些bug，例如偽元素hover時候，background:currentcolor的背景色不會跟著變化。關於currentcolor其他資訊可檢視張鑫旭部落格，currentcolor-css3超高校級好用css關鍵字。
繼承 inherit
例如，在建立提示框時，可能希望小箭頭能自動繼承背景和邊框的樣式。就可以這樣做。
.callout:before {
//其他**
background: inherit;
border: inherit;
視覺上的錯覺在任何形式的視覺設計中都普遍存在。如果希望四邊的內邊距看起來基本一致，需要減少頂部和底部的內邊距。
作者提出了一些建議，可能可以避免不必要的**查詢
使用百分比長度來取代固定長度，如果做不到，嘗試使用與視口相關的單位(vw,vh,vmin,vmax)，它們的值解析為視口寬度與高度的百分比。
當需要在較大解析度得到固定寬度時，使用max-width
不要忘記為替換元素（例如img,object,video,iframe等）設定乙個max-width，值為100%
假設背景需要完整的鋪滿乙個容器，可以使用background-size:cover。【在移動網頁中通過css把一張大圖縮小顯示往往不太明智】
當或其他元素以行列式進行布局，讓視口的寬度來決定列的數量。可以使用彈性盒布局(flexbox)或者display:inline-box加上文字折行行為。
在使用多列文字時，指定column-width而不是column-count，這樣可以在較小的螢幕上自動顯示為單列布局。
【盡量實現彈性可伸縮的布局，並在**查詢的各個斷點區間內制定相應尺寸】
如果要明確地去覆蓋某個具體展開式屬性並保留其他相關樣式，則需要用展開式屬性。
background: url(tr.png) no-repeat top right / 2em 2em,
url(br.png) no-repeat bottom right / 2em 2em,
url(bl.png) no-repeat bottom left / 2em 2em;
//如果只為某個屬性提供乙個值，那麼它會擴散並應用到列表中的每一項。
//在簡寫時，使用乙個斜槓（/）作為分隔，是為了消除歧義。
background: url(tr.png) top right,
url(br.png) bottom right,
url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;
//此時，只需要在一處修改，就可以改變所有的background-size和background-repeat
css 揭秘 CSS編碼技巧
喜歡的給我乙個星吧 儘量減少改動時需要編輯的地方 當某些值相互依賴時，應該把它們的相互關係用 表示出來 易維護 vs 量少 currentcolor css有史以來第乙個變數 inherit可以用在任何css屬性中，而且它總是繫結到父元素的計算值 每個 查詢都會增加成本 查詢的端點不應該由具體裝置來...
css 揭秘 CSS編碼技巧
喜歡的給我乙個星吧 儘量減少改動時需要編輯的地方 當某些值相互依賴時，應該把它們的相互關係用 表示出來 易維護 vs 量少 currentcolor css有史以來第乙個變數 inherit可以用在任何css屬性中，而且它總是繫結到父元素的計算值 每個 查詢都會增加成本 查詢的端點不應該由具體裝置來...
01 css編碼技巧 css揭秘
一 儘量減少 重複 1.按鈕 btn 2.易維護vs.量少 3.currentcolor 自動從文字那獲取顏色值 hr 3.繼承 inherit inherit 可以用在任何css 屬性中，而且它總是繫結到父元素的計 算值 對偽元素來說，則會取生成該偽元素的宿主元素 這個inherit 關鍵字對於背...