1. 程式人生 > >CSS揭秘(引言)

CSS揭秘(引言)

-s 思路 預處理 wid 指定 nbsp 體積 play 背景圖片

1、標準的制定過程

  a 人員結構:W3C會員公司的成員、特邀專家、W3C工作人員

  b 盡管“CSS3”非常流行,但它實際上並沒有在任何規範中定義過。它實際上是指一個非正式的集合,包括CSS規範第三版再加上一些版本號還是1的新規範。

2、CSS編碼技巧

  a 盡量減少代碼重復

  b 相信你的眼睛,而不是數字

  c 關於響應式網頁設計的建議

使用百分比長度來取代固定寬度,同時可以嘗試使用視口相關的單位(vw、vh、vmin和vmax);
當你需要在較大分辨率下得到固定寬度時,使用max-width而不是width,因為它可以適應較小的分辨率,而無需使用媒體查詢;
不要忘記為替換元素(img、object、video、iframe等)設置一個max-width,值為100%;
假如背景圖片需要完整地鋪滿一個容器,不管容器的尺寸如何變化,background-size:cover這個屬性都可以做到;
當圖片或者其他元素以行列式進行布局時,讓視口的寬度來決定列的數量。彈性布局或者display:inline-block加上常規的文本折行行為,都可以實現;
在使用多列文本時,制定column-width而不是指定column-count,這樣就可以在較小的屏幕上自動顯示為單列布局;

總體思路:盡最大努力,實現彈性可伸縮的布局,並在媒體查詢的各個斷點區間內指定相應的尺寸(需要細細琢磨)。

  d 合理使用簡寫

background中background-size和background-position之間需要斜杠(/)作為分隔,因為(50% 50%)這樣的值對於解析器來說是不確定的。
background-size這個屬性的定義必須在background-position之後, 並使用 ‘/‘ 符號分隔。

  e 預處理器

面臨的問題是,css的文件體積和復雜度可能會失控,調試難度會增加,增加協作者學習成本;
還有抽象泄漏法則:所有重大的抽象機制在某種程度上都存在泄漏的情況(即它們有它們自己的BUG)。

  

CSS揭秘(引言)