開頭先寫點別的，今天終於離開了生活了一年的國家。 心裡有點對未來的期待，終於不是個學生了。 出國一年， 獲得的收穫可能就是終於想通了以後想幹什麼吧， 人總要有一項技術傍身，進可成名立萬，退可養家餬口。 今天登機前終於有一家投了簡歷的公司聯絡我了，也算乙個好訊息。前幾天發現了一本寫css很好的書，叫做css－secrets。 可惜的是網上並沒有中文版，只用英文本。不過語句比較易懂。 寫下筆記，以供查閱。
－赫爾辛基飛往北京
－gl r.t
1.最小化**重複度
當需要修改乙個屬性的時候，盡量只需要最小限度的修改
看以下**
font-size: 20px;
line-height: 30px;
font-size: 20px;
line-height: 1.5;
我們想修改**的時候，只需要修改font-size乙個屬性就可以了。 所以，當兩個標籤有聯絡的時候，盡量讓他們的value也有相關性。
擴充套件： 如果我們要改變父元素的font-size，那麼子元素的font-size自然也要跟著改變。 那麼**又可以改寫為：
font-size: 150%;
line-height: 1.5;
2.可維護性vs簡潔性
有時候可維護性和簡潔性是互相排斥的。 如果我們要做乙個只有左邊邊框為0的border，
border-width: 10px, 10px, 10px, 0;如果注重可維護性，
border-width: 10px;
border-left-width: 0;
hr｛
height： .5em;
background
: currentcolor;｝
input， select， button｛font： inherit;｝a
一些方法去避免：
使用百分比
當需要使用乙個固定的寬度時，使用max-width.
當背景顏色需要覆蓋整個包容器的時候，使用background-size: cover;
當用行，列去排列元素的時候，讓列數可以隨寬度變化。（使用display: inline-block）
當使用多列文字的時候，使用column-width代替column－count
7.理智的使用簡略表示式
下面的兩行css是不完全相等的，
background: rebeccapurple;
background-color: rebeccapurple;
8.是否要使用預處理
（沒聽說過，看不懂，跳過看後面有介紹。）
1.半透明邊框
利用rgba()和hsla()可以製作出半透明效果，但是它們主要用來製作背景。原因如下：
一些老的瀏覽器不會認識到這是一種新的顏色形式，像處理一樣處理它們，只在背景中使用它們。
對於背景更容易提供撤回功能。
如果使用在別的地方，不能直接應用。
例子：
border: 10px solid hola(0,0%,100%,.5);
邊框消失了！！！
原因時背景只自動延伸到了邊框區域。 為了解決這個問題，css3中引入了background-clip。預設值是border-box。如果想讓background延展到內部，那麼**改寫為
2.多邊框實現辦法1: box－shadow
很少有人知道box－shadow有第四個引數，擴散半徑。它可以使陰影變得更大。0offset和0blur可以用陰影製造乙個邊框。由於我們可以在乙個shadow上加另乙個shadow，所以可以實現多邊框。
實現辦法2: outline
如果只需要2個邊框，可以使用outline在border外面再加乙個邊框。
3.可變背景位置
有時候，我們想讓背景從另一角落開始而不是左上。
方法1: 擴充套件背景位置
在css3，background－position允許設定邊距。
background-position: right 20px bottom 10px;
方法2: background-origin 法
看如下**，
padding: 10px;
background: url(code-pirate.svg) no-repeat #58a;
background-position: right 10px bottom 10px;
每次修改padding，便要修改position，太麻煩了。 我們經常寫 top left，但是，到底是哪個元素的top left。 在box model中有4個box，margin，border，padding，content。預設的，background position是padding。 因此影象不會使背景變的模糊。background-orgin可以對這個設定進行改變。
padding: 10px;
background: url(「code-pirate.svg」) no-repeat #58a bottom right;
background-organ: content-box;
這和之前的**的效果一樣，但是更加簡潔。
方法3: calc()
我們想讓背景距離底部10px距離右邊20px。如果一定要用top left，那麼我們可以用calc().
background-position: calc(100%-20px) calc(100%-10px)
4.內邊框
有時候，我們只想讓內邊框是圓滑的，而外邊框是尖的。
最簡單的辦法就是用乙個div巢狀進另乙個div。 不過這樣是比較麻煩的。
解決辦法： 使用shadow，但是對擴散半徑有限制。（我覺得div套div就挺好，書上寫了怎麼求最小半徑了，有興趣的自行查閱。 我覺得有點奇技淫巧的感覺，不推薦。）
5.條紋背景
假設我們使用2種顏色來製造，
修改**
可以看到，上20%和下20%都是純色。
如果設定為50%，那麼便上下分界。
縮小上下的高度
background： linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;
如果設定第二個顏色的位置為0，那麼下乙個顏色會在上乙個顏色結束時開始。
background： linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;
如果設定成豎直，只需要加入to right屬性就可以。 文章後面踢到了如何實現45度角。需要的時候自行查閱。
《CSS Secrets》讀書筆記（1）
三年重構老司機二刷 css secrets 覺得有些東西還是應該記錄下來，本文內容來自書籍 css secrets 中文名叫 css揭秘 做筆記的過程中我會根據自己的過往經驗加上自己的理解和看法，用通俗的表達對一些知識點進行解釋。本書的物件是有一定css開發經驗的人，如果你是新手，閱讀起來可能有點吃...
《CSS Secrets》讀書筆記（3）
三年重構老司機二刷 css secrets 覺得有些東西還是應該記錄下來，本文內容來自書籍 css secrets 中文名叫 css揭秘 做筆記的過程中我會根據自己的過往經驗加上自己的理解和看法，用通俗的表達對一些知識點進行解釋。本書的物件是有一定css開發經驗的人，如果你是新手，閱讀起來可能有點吃...
讀書筆記 1
從我第一次看到windows就對它那花花綠綠的外表所吸引，大學兩年過來，時間又讓我從另乙個角度重新認識的了這些美麗的。本學期開始圖形程式設計的學習，探索windows圖形系統，並對gdi api，directdraw api進行學習。之所以寫部落格，第 一 是想勉勵自己不斷學習，讓大家監督 第 二 ...