第二次討論——響應式設計、佈局技巧、css性能優化、css預處理

第二次討論

【響應式設計】

集中建立頁面的圖片排版大小，能夠智能地根據用戶行爲以及使用的設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相對應的佈局。

響應式佈局：

meta標籤的實用：設置佈局寬度等於設備寬度，佈局viewport等於度量viewport

<meta name="viewport" content="width=device-width,initial-scale=1">

 

【【佈局】】

【水平居中】

1、text-align和inline-block的聯合使用：

text-align屬性：經過指定行框與哪一個點對齊，從而設置塊級元素內文本的水平對齊方式。（從而child爲文本行內元素，parent爲塊狀元素，能夠經過display來設置）。

.parent{text-align: center;} //父元素
.child{display: inline-block;}//子元素

不過此方法兼容性比較好，IE瀏覽器接收。不過代碼較多，同時要設置父元素和子元素。

2、使用margin：0 auto設置

.child{width:100px;margin:0 auto;}//必需要有寬度

margin設置的是塊級元素的居中。兼容性好，不過須要設置寬度。

3、display：table設置

.child{display:table;margin:0 auto;}

此方法只需對自身進行設置，代碼簡短。不過在IE六、7上，須要進行調整。

4、使用絕對定位

.parent{position:relative;}
 /*或者實用margin-left的負值爲盒子寬度的一半也能夠實現，不過這樣就必須知道盒子的寬度，但兼容性好*/
 .child{position:absolute;left:50%;transform:translate(-50%);}

transform：translate。移動transform在translation的方向和距離。簡單的說，向某方向移動物體多少距離。

不過這個方法兼容性很差，要IE9 以上。

【垂直居中】

1、vertical-align方法

/*第一種方法*/ 
.parent{display:table-cell;vertical-align:middle;height:20px;} 
/*第二種方法*/ 
.parent{display:inline-block;vertical-align:middle;line-height:20px;}

在使用vertical-align的時候，因爲對齊的基線是用行高的基線做爲標記，故須要設置line-height或設置display:table-cell。

2、使用絕對定位

.parent{position:relative;} 
.child{positon:absolute;top:50%;transform:translate(0,-50%);}

注意與水平居中的區別

【水平垂直居中】

1、利用vertical-align,text-align,inline-block實現

.parent{display:table-cell;vertical-align:middle;text-align:center;} 
.child{display:inline-block;}

2、使用絕對定位

.parent{position:relative;} 
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

由上可知，絕對定位能夠實現任何方式的居中，不過還要考慮兼容性問題。

【多列布局】

1、左列定寬，右列自適應：

（1）使用float+margin

.left{float:left;width:100px;}
.right{margin-left:100px;}

經試驗，若是不用margin的話，必須設置高度。IE6會有3px的bug

（2）使用table實現

.parent{display:table;table-layout:fixed;width:100%;} 
.left{display:table-cell;} 
.right{width:100px;display:table-cell;}

2、兩列定寬，一列自適應

（1）使用margin+float

（2）利用float+overflow實現

.left,.center{float:left:width:200px;} 
.right{overflow:hidden;}

（3）利用table實現
3、兩側自適應，中間定寬（網頁佈局經常使用）

（1）使用margin+float

.left{width：100px;float:left;}
 .center{float:left;width:100%;margin-right:-200px;} 
.right{width:100px;float:right;}

（2）利用table實現

4、一列不定寬，一列自適應

（1）利用float+overflow實現

.left{float:left;background-color: red;height: 100px;}
.right{background-color: blue;overflow: hidden;height: 100px;}

不須要設定高度。會自適應。

5、多列式分佈

（1）div+float

6、九宮格佈局

（1）div+table

 

【css性能優化】

1、模塊化：讓代碼高度重用，提升開發效率。

　　　　　　模塊與模塊之間儘可能不要包含相同的部分，若是有，提取出來，拆分紅一個獨立的模塊。

2、css命名：用英文。大小駝峯、下劃線等。駝峯表示區別不一樣單詞，下劃線表示從屬關係。

　　　　　　避免重複命名，本身的代碼前加上屬於本身的前綴。

3、class的使用：多組合，少繼承。

4、上下margin處理：若是不肯定模塊的上下margin特別穩定，最好不要將它寫在模塊的類裏，而是使用類的組合，單獨爲上下margin掛用於邊距的原子類（如mt十、

　　　　　　　　　　mb20）。模塊最好不要混用margin-top和margin-bottom，統一使用某一個。

5、低權重原則：避免濫用自選擇器。當不一樣選擇符的樣式設置有衝突時，會採用權重高的選擇符設置樣式。選擇符權重相同，爲就近原則。

　　　　　　　　權重原則：HTML標籤爲1（如p），class爲10，id爲100。css選擇符保證權重儘量低。

　　　　　　　　使用子選擇器，會增長css選擇符的權重。新添class更利於維護。

6、css sprite技術：將網站的多張背景圖片合併到一張大圖上。利用background-position屬性來展現咱們須要的部分

　　　　　　　　　　圖片加載會發出HTTP請求，而使用css sprite就減小了HTTP請求次數。減輕服務器壓力。

　　　　　　　　　　只能合併背景圖片。對於橫向和縱向都平鋪的圖片，不能使用css sprite，只能或橫向，或縱向。排版要儘可能緊湊。

　　　　　　　　　　缺點：下降開發效率和增大維護難度，是否使用取決於網站流量。

7、css常見問題：（1）編碼風格：多行式可讀性強，不過會增大css文件大小，一行式可讀性較差，不過利於提升開發速度，減少css文件大小。推薦一行式。

　　　　　　　　 （2）id和class：同一網頁，相同id只能出現一次，可是class無限制。id的權重大於class。不過原生JS提供getElementId()方法，不支持class。

　　　　　　　　　　　　　　　　使用id會限制網頁的擴展性。通常狀況下，建議儘可能使用class，少用id。

　　　　　　　　 （3）css hack：IE條件註釋法（兼容性最好，增長了開發和維護成本）

　　　　　　　　　　　　　　　　 選擇符前綴法（加強了可維護性，不過兼容性欠佳，不能用於內聯樣式）

　　　　　　　　　　　　　　　　 樣式屬性前綴法（集合度更高，代碼更加精簡，可維護性更強，但存在兼容風險，可用於內聯樣式）

　　　　　　　　 （4）解決超連接訪問後hover樣式不出現的問題：a標籤四種狀態的排序問題，love hate原則，即l(link)ov(visited)e h(hover)a(active)te。

　　　　　　　　 （5）haslayout：IE瀏覽器的專有屬性，用於css的解析引擎。不少bug都由於haslayout沒有被自動觸發。最好的解決方法：zoom。

　　　　　　　　 （6）塊級元素和行內元素：使用display轉換。

　　　　　　　　 （7）IE六、7不支持display：inline-block。

　　　　　　　　 （8）relative、absolute和float：不要濫用。

【css預處理】

用一種專門的編程語言，爲 CSS 增長了一些編程的特性，將 CSS 做爲目標生成文件，而後開發者就只要使用這種語言進行編碼工做。