第二次討論——響應式設計、布局技巧、css效能最佳化、css預先處理

標籤：visit   合并   enter   原則   響應式   程式設計語言   區別   工作   動物   

第二次討論

【響應式設計】

集中建立頁面的圖片排版大小，可以智能地根據使用者行為以及使用的裝置環境（系統平台、螢幕尺寸、螢幕定向等）進行相對應的布局。

響應式布局：

meta標籤的實用：設定布局寬度等於裝置寬度，布局viewport等於度量viewport

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

 

【【布局】】

【水平置中】

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

text-align屬性：通過指定行框與哪個點對齊，從而設定區塊層級元素內文本的水平對齊方式。（從而child為文本行內元素，parent為塊狀元素，可以通過display來設定）。

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

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

二、使用margin：0 auto設定

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

margin設定的是區塊層級元素的置中。相容性好，不過需要設定寬度。

三、display：table設定

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

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

四、使用絕對位置

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

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

不過這個方法相容性不好，要IE9 以上。

【垂直置中】

一、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。

二、使用絕對位置

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

注意與水平置中的區別

【水平垂直置中】

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

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

二、使用絕對位置

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

由上可知，絕對位置可以實現任何方式的置中，不過還要考慮相容性問題。

【多欄版面配置】

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

（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;}

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

（1）使用margin+float

（2）利用float+overflow實現

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

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

（1）使用margin+float

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

（2）利用table實現

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

（1）利用float+overflow實現

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

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

五、多列式分布

（1）div+float

六、九宮格布局

（1）div+table

 

【css效能最佳化】

一、模組化：讓代碼高度重用，提高開發效率。

　　　　　　模組與模組之間盡量不要包含相同的部分，如果有，提取出來，拆分成一個獨立的模組。

二、css命名：用英文。大小駝峰、底線等。駝峰表示區別不同單詞，底線表示從屬關係。

　　　　　　避免重複命名，自己的代碼前加上屬於自己的首碼。

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

四、上下margin處理：如果不確定模組的上下margin特別穩定，最好不要將它寫在模組的類裡，而是使用類的組合，單獨為上下margin掛用於邊距的原子類（如mt10、

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

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

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

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

六、css sprite技術：將網站的多張背景圖片合并到一張大圖上。利用background-position屬性來展示我們需要的部分

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

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

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

七、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）IE6、7不支援display：inline-block。

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

【css預先處理】

用一種專門的程式設計語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標組建檔案，然後開發人員就只要使用這種語言進行編碼工作。

第二次討論——響應式設計、布局技巧、css效能最佳化、css預先處理