如何提升我的HTML&CSS技術，編寫有結構的代碼
前言
之前寫了四篇HTML和CSS的知識點，也相當於是一個知識點匯總。有需要的可以收藏，平時開發過程中應該會遇到這些點，到時候再查看這些博客可能更容易理解。從這篇開始更多的介紹開發過程經常讓人頭痛的前端問題，以及如何編寫性能比較高的前端代碼。本人也是剛入門前端的小菜，希望各位前端大牛多多糾正內容中寫的不對的地方，讓我提升的更快。最近看到博客園中好多前端大牛，都是在各大bat公司工作，這也是我做開發的夢想。。。
導航
1.基礎篇
這些HTML、CSS知識點，面試和平時開發都需要 No1-No4（知識點：HTML、CSS、盒子模型、內容布局）
這些HTML、CSS知識點，面試和平時開發都需要 No5-No7（知識點：文字設置、設置背景、數據列表）
這些HTML、CSS知識點，面試和平時開發都需要 No8-No9（知識點：媒體操作、構建表單）
這些HTML、CSS知識點，面試和平時開發都需要 No10-No11（知識點：表格操作、代碼編寫規則）
2.進階篇
如何提升我的HTML&CSS技術，編寫有結構的代碼
No1.CSS展現和組織
1.CSS結構化
（1）比較經典的樣式架構：我們經常看到的web系統樣式文件一般都只包含index.css或者base.css，但在實際開發過程中我們應該盡量按模塊分組CSS樣式，把同類的樣式放到一個模塊下。雖然模塊化後增加了很多css文件，但當我們發布版本的時候，可以把所有的css文件壓縮到一個css文件中，這樣可提升頁面的加載速度。下面是一個比較經典的CSS樣式架構：
# Base //基礎樣式 – normalize.css //標準化樣式 – layout.css //流布局樣式 – typography.css //段落樣式 # Components //組件樣式 – alerts.css – buttons.css – forms.css – list.css – nav.css – tables.css # Modules 模塊樣式 – aside.css //邊欄樣式 – footer.css //底部樣式 – header.css //頭部樣式
（2）模塊化CSS架構：包含Base、Layout、Module、State、Theme模塊。每個模塊的意義如下所示：
# Base（核心元素style，覆蓋body、form等默認樣式）
# Layout（區別不同元素的size和grid樣式）
# Module（個別的特別頁面樣式）
# State（基於各種事件，提供不同的狀態樣式，例如:hover等）
# Theme（基於skin、look、feel的樣式）
2.如何提升頁面加載速度
（1）選擇器寫法：由於瀏覽器會渲染CSS樣式名稱路徑上的每一個選擇器，所以應該保持簡短的選擇器路徑，減少渲染，提升頁面加載速度。
（2）減小或壓縮文件：在文件通過http協議傳輸時，可通過gzip方式壓縮html、css以及js文件，縮減流量。不同的http服務器都提供了gzip壓縮傳輸。
（3）減少HTTP請求-減少文件數量：把相似的文件結合成一個文件，例如把多個CSS文件壓縮成一個CSS文件、把多個JS文件壓縮成一個JS文件，這樣每次只用發送一次http請求。
（4）減少HTTP請求-在正確的位置加載文件：CSS文件應該放在head的開頭加載，JS文件應該放在頁面的最後位置（body關閉標示</body>之前加載）。這是因為在加載CSS文件的同時可加載剩下的頁面，而加載JS文件時會導致頁面加載阻塞，所以最好是等頁面加載完了再加載js文件，這樣改善了用戶感知。
（5）圖片拼切：經常看到一組操作按鈕，每個按鈕有不同的圖標，加載頁面時每個圖標加載都會產生一次請求。我們可以使用一個合並的圖片作為多個元素的背景，然後使用background-position來定位圖片的顯示位置。下面的頁面就實現了這樣的想過：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style type="text/css"> ul { margin: 0; padding: 0; } li { float: left; list-style: none; margin: 2px; } li a { background: linear-gradient(#fff, #eee); border: 1px solid #ccc; border-radius: 3px; display: block; padding: 3px; } li a:hover { border-color: #999; } li span { background: url("sprite.png") 0 0 no-repeat; color: transparent; display: block; font: 0/0 a; height: 16px; width: 16px; } .italic { background-position: -16px 0; } .underline { background-position: -32px 0; } .size { background-position: -48px 0; } .bullet { background-position: -64px 0; } .number { background-position: -80px 0; } .quote { background-position: -96px 0; } .left { background-position: -112px 0; } .center { background-position: -128px 0; } .right { background-position: -144px 0; } </style> <script type="text/javascript"> </script> </head> <body> <ul> <li><a href="#"><span class="bold">Bold Text</span></a></li> <li><a href="#"><span class="italic">Italicize Text</span></a></li> <li><a href="#"><span class="underline">Underline Text</span></a></li> <li><a href="#"><span class="size">Size Text</span></a></li> <li><a href="#"><span class="bullet">Bullet Text</span></a></li> <li><a href="#"><span class="number">Number Text</span></a></li> <li><a href="#"><span class="quote">Quote Text</span></a></li> <li><a href="#"><span class="left">Left Align Text</span></a></li> <li><a href="#"><span class="center">Center Align Text</span></a></li> <li><a href="#"><span class="right">Right Align Text</span></a></li> </ul> </body> </html>
展示結果如下：
No2.元素定位
1.float浮動定位問題
（1）float經典問題：先看看代碼和展示結果：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style type="text/css"> .box-set { background: #eaeaed; /* 灰色 */ /* overflow: auto; */ /* overflow技術 */ } .box { background: #2db34a; /* 綠色 */ float: left; margin: 1.858736059%; width: 29.615861214%; } </style> <script type="text/javascript"> </script> </head> <body> <div class="box-set"> <figure class="box">Box 1</figure> <figure class="box">Box 2</figure> <figure class="box">Box 3</figure> </div> </body> </html>
從下面的展示效果可知，父容器box-set設置的背景色並沒有生效，父容器的height等於0。
（2）解決方法：使用overflow和clearfix兩個技術。
（3）解決方法-overflow：直接在box-set樣式中添加屬性overflow: auto,添加後就可看到父容器的背景設置生效了。但考慮兼容器，IE6還需要設置width和height。但這裏遺留有其他問題，如果我們設置了其他樣式，例如box-shadow樣式，可能導致陰影效果溢出box-set容器。
（4）解決方法-clearfix：把頁面修改成下面的代碼，運行頁面box-set展示正常並且也解決了IE6和7的兼容問題。需要說明的是:bofore偽類組織child的top-margin溢出，而:after偽類組織child的buttom-margin溢出。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style type="text/css"> .box-set { background: #eaeaed; /* 灰色 */ *zoom: 1; } .box-set:before, .box-set:after { content: ""; display: table; } .box-set:after{ clear: both; } .box { background: #2db34a; /* 綠色 */ float: left; margin: 1.858736059%; width: 29.615861214%; } </style> <script type="text/javascript"> </script> </head> <body> <div class="box-set"> <figure class="box">Box 1</figure> <figure class="box">Box 2</figure> <figure class="box">Box 3</figure> </div> </body> </html>
2.position屬性
（1）position默認值：元素默認的position為static。
（2）position的relative值：相對於元素position屬性值為static的偏移位置。relative不會導致其他元素的位置改變。
（3）position的absolute值：元素從常規的流文檔中溢出，元素的位置是相對於最近的position為relative或者absolute值得父元素偏移位置，找不到則元素的位置相對於body偏移。
（4）position的fixed值：元素相對於瀏覽器視窗的偏移位置，不會隨著瀏覽器的滾動條滾動而改變位置。IE6不支持該屬性。
（5）fixed實現header和foot停靠功能：下面這個例子實現footer一致停靠在瀏覽器的最下面，不會隨著滾動條位置的變化而變化。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style type="text/css"> body { background: #eaeaed; } footer { height: 100px; background: #2db34a; bottom: 0; left: 0; position: fixed; right: 0; } </style> <script type="text/javascript"> </script> </head> <body> <footer>Fixed Footer</footer> </body> </html>
3.z-index屬性
（1）默認z-index位置：越排在DOM節點的靠top位置就越在z方向的下邊。
（2）前置條件：如果要設置z-index屬性，必須設置元素的position屬性為relative、aboslute或者fixed。例如下面的代碼分別按層次停靠元素：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style type="text/css"> .box-set { background: #eaeaed; height: 160px; position: relative; } .box { background: #2db34a; border: 2px solid #ff7b29; position: absolute; } .box-1 { left: 10px; top: 10px; } .box-2 { bottom: 10px; left: 70px; z-index: 3; } .box-3 { left: 130px; top: 10px; z-index: 2; } .box-4 { bottom: 10px; left: 190px; z-index: 1; } </style> </head> <body> <div class="box-set"> <figure class="box box-1">Box 1</figure> <figure class="box box-2">Box 2</figure> <figure class="box box-3">Box 3</figure> <figure class="box box-4">Box 4</figure> </div> </body> </html>
如何提升我的HTML&CSS技術，編寫有結構的代碼