- 寫CSS的要求？--保證DRY(don't repeat yourself ），可維護、靈活性、輕量級
- 不同浏覽器表現有細微差異，需要加浏覽器字首，把标準文法排在最後。可以在書寫css時，提供回退機制回退樣式。最常見的字首Firefox的-moz-、IE的-ms-、opera的-o-，以及safari和chrome的-webkit-.
- CSS編寫技巧--
盡量減少代碼重複：
我來寫這個框的思路：
.button{
width:200px;
height:100px;
padding:15px 10px;
color:#fff;
font-size: 20px;
line-height: 30px;
border: 1px solid yellow;
box-shadow: 0 5px 10px grey;
text-align: center;
text-shadow: 0 -1px 1px #355166;
background: yellow;
}
書上的寫法：
body{font-size: 16px;}
.button{
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 .5em .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;
}
對比分析：
1.沒有width和height ，可以利用width:auto的自适應效果自動填充 2.不要寫絕對長度，用比值改用em機關，修改某一處時容易維護，不需要每一處都修改 浏覽器裡預設字型大小是16px;字号和其他尺寸與父級字号相關聯，用em；如果要和<html>的字号相關聯可以使用rem機關。 3.顔色值用rgba或者hsla值友善實作相對的調整變化 根據本身的顔色自适應
hsla的用法：文法：取值：<length> ：Hue(色調)。 0(或360)表示紅色，120表示綠色，240表示藍色，當然可取其他數值來确定其它顔色；
<percentage> ： Saturation(飽和度)。 取值為0%到100%之間的值； <percentage> ： Lightness(亮度)。 取值為0%到100%之間的值； <opacity> ： alpha(透明度)。 取值在0到1之間；
1.代碼易維護和代碼量少不可兼得 {border-width:10px; border-left-width:0; } 比 { border-width:10px 10px 10px 0;} 可讀性以及可修改性更好
2.currentColor 從SVG借鑒的，但是沒有綁定固定顔色，一直被解讀為color，成為了CSS中的變量。 用法：例子讓所有水準分割線（<hr>元素）自動與文本顔色保持一緻， hr{ height: 0.5em; background: currentColor; } 如果沒有給邊框指定顔色，它自動繼承body中文本顔色
3.inherit可以用在任何css屬性中 總是綁定到父元素的計算值 （僞元素：取其宿主元素）
這個樣式是黃色部分小箭頭的樣式
.callout{
position: relative;
}
.callout::before{
content: "";
position:absolute;
top:-.4em;left: 1em;
padding: .35em;
background: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
transform:rotate(45deg);
}
人的視覺有局限性，在完美居中的情況下，實際上并不居中，要把中心點往上挪一點，才能達到居中的視覺效果 ，如果要四面的邊距看起來基本上一緻 需要減少padding-top/bottom的内邊距
關于響應式網頁設計：
使用媒體查詢會增加使用成本，媒體查詢的斷點應該有設計自身來決定，不由具體裝置決定，以下建議避免不必要的媒體查詢 1.使用百分比長度取代固定長度 或者盡量嘗試使用與視口相關機關（vw、vh、vmin和vmax），它們的值解析為視口寬度或高度的百分比； 2.在加大分辨率下得到固定寬度時，使用max-width而不是width，因為它可以适應較小分辨率，無需媒體查詢 3.要為替代元素設定一個max-width:100%; 4.如果背景圖檔要完整鋪滿整個容器 要設定background-size:cover; 5.當圖檔或其他元素以行列式進行布局，讓視口的寬度決定列的數量。用彈性盒布局或者display:inline-block加上正常的文本折行行為都可以實作 6.在使用多列文本時，指定列寬column-width而不是指定列數column-count，這樣就可在較小螢幕上自動顯示為單列布局
實作思路是盡可以努力實作彈性可伸縮的布局，并在媒體查詢的各個斷點區間内指定相應尺寸。
合理使用簡寫 background:red; background-color:red; 這兩條聲明并不等價，background:#abc; 前一種可以確定得到紅色背景， 後一條可能會和背景圖檔一起互相作用； 要明确的覆寫某個具體的展開式屬性并保留其他相關樣式 需要用展開式屬性。
改寫成為在background簡寫屬性中指定background-size，需要同時提供一個background-position值，用/分隔；這是為了消除歧義，随時查閱文法 css預處理相關 ---書p14-16 用到時再查閱3-6CSS揭秘閱讀筆記第一章：引言