讀《CSS揭祕》總結一超實用的項目開發技巧

讀《CSS揭祕》總結一

前言：文章是看《CSS揭祕》書邊看邊總結的筆記

目錄：

• 減小重複 1.考慮css值是依賴關係的時候，要用比例代碼表達。 2.靈活控制 3.使用currentColor變量簡化代碼 4.使用inherit繼承關鍵字
• 關於響應式佈局的設計 1.響應式佈局的設計建議

---------------------------------人工分割線---------------------------------------------------

減小重複

1.考慮css值是依賴關係的時候，要用比例代碼表達。 例如：

行高是字體的1.5倍
font-size: 20px;
line-height: 1.5;

字體是父字體的1.25倍
font-size: 125%;
line-height: 1.5

巧用em
padding: 0.3em 0.8em;
border-radios: 0.2em;
text-shasow: 0 -0.5em 0.05em #fff
複製代碼

==Tips:== 儘可能多使用比例的方式能使得你的修改，適應設備等很是靈活、簡便

2.靈活控制

這是你設計的按鈕樣式。

.button {
    font-size: 125%;
    line-height: 1.5
    padding: 0.3em 0.8em;
    border-radios: 0.2em;
    background: blue;
}
複製代碼

稍加改造就能變成取消按鈕、確認按鈕的樣式

.button .cancel {
    background: red;
} 
.button .ok {
    background: green;
} 
複製代碼

==Tips:== 你能夠把這個按鈕的樣式放在你的全局css 庫中，class加上button就是一個按鈕樣式，class再加上ok就是一個確認按鈕了。

3.使用currentColor變量簡化代碼

currentColor顧名思義是當前顏色，更準確的說是當前文本的顏色。 例如：你要設計一個按鈕，樣子是中間文字加上邊框。樣子想象一下，那麼你會但願這個邊框的顏色跟文字的顏色是一致的，這樣美美噠。

之前的實現方式 vs currentColor的實現方式：

舊：
button {
    color: blue;
    border: 1px solid blue;
}
新：
button {
    color: blue;
    border: 1px solid currentColor;
}
複製代碼

==Tips:== 這種方式有超級都的應用場景，在你開發的時候只要想起有這個變量就必定有幫到你的地方

4.使用inherit繼承關鍵字 簡單理解就是某個屬性的值跟隨父佈局的值 例如：當你遇到

<style>
    span {
        color: green;
    }
</style>
<div class="parent" style="color:red">
    123<span class="child">456</span>
</div>
複製代碼

此時運行的結果是（紅123）（綠456）； 若是你想那個child的顏色跟parent的保持一致怎麼辦？

style再加一個
.child {
    color: inherit;
}
複製代碼

這樣的話就是紅123456； parent改什麼顏色child就跟着變成什麼顏色。

==Tips:== 因此當遇到父佈局跟子元素之間有聯繫的屬性能夠考慮使用繼承的方式實現

關於響應式佈局的設計

在過往的開發中會大量使用媒體查詢（Media Query）去實現響應式的佈局（適應不一樣分別率的設備），但媒體查詢使用的越多，你的代碼就會變得越難以維護。本人並沒有這種開發經歷，簡單跳過。 這裏引入一位國外大神的語錄：

Basecamp的設計師：
結果咱們發現，想讓網頁在一堆不一樣的設備上合理展現，只須要在
最終產品上添加一點 CSS 媒體查詢就能夠了。這件事情之因此這麼簡單，
關鍵在於咱們的佈局本來就是彈性可伸縮的。所以，優化網頁在小屏幕上
的表現，其實只意味着把一些外邊距收攏到最小程度，而後把由於屏幕太
窄而沒法顯示成雙列的側欄調整爲單列布局而已。
複製代碼

下面是關於響應式佈局的設計建議：

• 儘可能使用百分比來取代固定長度，實在不行就考慮與視圖相關的單位（vw,vh,vmin,vmax等）;這種值會被解析成視圖的百分比
• 當你須要在較大分辨率下獲得固定寬度時，可使用max-width而非width,由於max-width具備必定的適應性，能夠兼顧到小分辨率的狀況
• 爲（img、Object、Video、iframe）等設置max-width:100%
• 加入圖片要鋪滿一個容器，而且不受容器尺寸影響，可使用background-size:cover實現，但每每從接口中拿回一張大圖而後縮成一個小圖去顯示都是很浪費的，應爲浪費瀏覽，浪費對圖片的解析
• 善於使用流式佈局；例如想展現一個橫向滾動的列表，你能夠定義你每一個item的寬度（假設寬度=50%),這樣的話不管是pc，仍是手機最終顯示兩個；例如，你將item固定200px寬，那麼在電腦、手機顯示效果都是固定寬度的方式，電腦屏幕寬一點的話就能多顯示幾個，手機就顯示少一幾個而已。

咱們的思路就是想方設法的不使用固定寬高，如此一來你的網頁能有一個不錯的自適應屏幕的能力了，再搭配媒體查詢那應該能解決更多的屏幕適應問題。

這一篇文章就到這裏；後續會更新~