三部分 附錄（因?yàn)闀簳r(shí)不支持插入超鏈接所以部分內(nèi)容無法顯示）

附錄一 DIV命名規(guī)范

• 企業(yè)DIV使用頻率高的命名方法
• 網(wǎng)頁內(nèi)容類
• 標(biāo)題: title
• 摘要: summary
• 箭頭： arrow
• 商標(biāo)： label
• 網(wǎng)站標(biāo)志： logo
• 轉(zhuǎn)角/圓角：corner
• 橫幅廣告： banner
• 子菜單： subMenu
• 搜索： search
• 搜索框： searchBox
• 登錄： login
• 登錄條：loginbar
• 工具條： toolbar
• 下拉： drop
• 標(biāo)簽頁： tab
• 當(dāng)前的： current
• 列表： list
• 滾動(dòng)： scroll
• 服務(wù)： service
• 提示信息： msg
• 熱點(diǎn)：hot
• 新聞： news
• 小技巧： tips
• 下載： download
• 欄目標(biāo)題： title
• 熱點(diǎn)： hot
• 加入：joinus
• 注冊(cè)： regsiter
• 指南： guide
• 友情鏈接： friendlink
• 狀態(tài)： status
• 版權(quán)： copyright
• 按鈕： btn
• 合作伙伴： partner
• 投票： vote
• 左右中：left right center

• 
  
• 注釋的寫法: /* Footer */ 內(nèi)容區(qū)/* End Footer */
• id的命名:
• 頁面結(jié)構(gòu)
• 容器: container
• 頁頭：header
• 內(nèi)容：content/container
• 頁面主體：main
• 頁尾：footer
• 導(dǎo)航：nav
• 側(cè)欄：sidebar
• 欄目：column
• 頁面外圍控制整體布局寬度：wrapper
• 左右中：left right center

• 導(dǎo)航
• 導(dǎo)航：nav
• 主導(dǎo)航：mainbav
• 子導(dǎo)航：subnav
• 頂導(dǎo)航：topnav
• 邊導(dǎo)航：sidebar
• 左導(dǎo)航：leftsidebar
• 右導(dǎo)航：rightsidebar
• 菜單：menu
• 子菜單：submenu
• 標(biāo)題: title
• 摘要: summary

• 功能
• 標(biāo)志：logo
• 廣告：banner
• 登陸：login
• 登錄條：loginbar
• 注冊(cè)：regsiter
• 搜索：search
• 功能區(qū)：shop
• 標(biāo)題：title
• 加入：joinus
• 狀態(tài)：status
• 按鈕：btn
• 滾動(dòng)：scroll
• 標(biāo)簽頁：tab
• 文章列表：list
• 提示信息：msg
• 當(dāng)前的:current
• 小技巧：tips
• 圖標(biāo): icon
• 注釋：note
• 指南：guild
• 服務(wù)：service
• 熱點(diǎn)：hot
• 新聞：news
• 下載：download
• 投票：vote
• 合作伙伴：partner
• 友情鏈接：link
• 版權(quán)：copyright

• class的命名:
• 顏色:使用顏色的名稱或者16進(jìn)制代碼,如
• .red { color: red; }
• .f60 { color: #f60; }
• .ff8600 { color: #ff8600; }
• 字體大小,直接使用”font+字體大小”作為名稱,如
• .font12px { font-size: 12px; }
• .font9px {font-size: 9pt; }
• 對(duì)齊樣式,使用對(duì)齊目標(biāo)的英文名稱,如
• .left { float:left; }
• .bottom { float:bottom; }
• 標(biāo)題欄樣式,使用”類別+功能”的方式命名,如
• .barnews { }
• .barproduct { }

• 注意事項(xiàng)::
• 一律小寫;
• 盡量用英文;
• 不加中杠和下劃線;
• 盡量不縮寫，除非一看就明白的單詞.

• 
  
• 推薦的 CSS 書寫順序：
• 顯示屬性
• display
• list-style
• position
• float
• clear
• 自身屬性
• width
• height
• margin
• padding
• border
• background
• 文本屬性
• color
• font
• text-decoration
• text-align
• vertical-align
• white-space
• other text
• content

附錄二 CSS精靈

• CSS精靈原理以及應(yīng)用
• CSS雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨(dú)的圖片中，從而減少你的網(wǎng)站的HTTP請(qǐng)求數(shù)量。
• 該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標(biāo)簽變得更加復(fù)雜了，圖片是在CSS中定義，而非<img>標(biāo)簽。
• 一個(gè)簡(jiǎn)單的例子：
• 一張圖片作出一個(gè)按鈕的三個(gè)狀態(tài)
• 一個(gè)鏈接用CSS做成按鈕的樣式，我們可以使用同一張圖片，完成按鈕的三個(gè)狀態(tài)，a:link，a:hover，a:active <a class="button" href="#">鏈接</a>
• 加入右側(cè)的圖片為：200px 65px的三個(gè)按鈕圖拼合而成的圖片button.png，從上到下一次為按鈕的普通、鼠標(biāo)滑過、鼠標(biāo)點(diǎn)擊的狀態(tài)。則可以使用CSS進(jìn)行定義。

a {
 display:block; 
 width:200px; 
 height:65px; 
 line-height:65px; /*定義狀態(tài)*/
 text-indent:-2015px; /*隱藏文字*/
 background-image:url(button.png); /*定義背景圖片*/
 background-position:0 0;
 /*定義鏈接的普通狀態(tài)，此時(shí)圖像顯示的是頂上的部分*/
}
a:hover {
 background-position:0 -66px;
 /*定義鏈接的滑過狀態(tài)，此時(shí)顯示的為中間部分，向下取負(fù)值*/
}
a:active {
 background-position:0 -132px; 
 /*定 義鏈接的普通狀態(tài)，此時(shí)顯示的是底部的部分，向下取負(fù)值*/
}

• 更多的CSS雪碧，圖片更復(fù)雜，背景定位更精確?？赡軙?huì)用到大量的數(shù)值
• 如：background:url(nav.png) -180px 24pxno-repeat; 來達(dá)到更精確的定位
• 優(yōu)點(diǎn)：
• 減少加載網(wǎng)頁圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù)
• 可以合并多數(shù)背景圖片和小圖標(biāo)，方便在任何位置使用，這樣不同位置的請(qǐng)求只需要調(diào)用一個(gè)圖片，從而減少對(duì)服務(wù)器的請(qǐng)求次數(shù)，降低服務(wù)器壓力，同時(shí)提高了頁面的加載速度，節(jié)約服務(wù)器的流量。
• 提高頁面的加載速度
• sprite技術(shù)的其中一個(gè)好處是圖片的加載時(shí)間(在有許多 sprite 時(shí)，單張圖片的加載時(shí)間)。由所需圖片拼成的一張 GIF圖片的尺寸會(huì)明顯小于所有圖片拼合前的大小。單張的 GIF只有相關(guān)的一個(gè)色表，而單獨(dú)分割的每一張 GIF 都有自己的一個(gè)色表，這就增加了總體的大小。因此，單獨(dú)的一張 JPEG 或者 PNGsprite 在大小上非?？赡鼙劝岩粡垐D分成多張得來的圖片總尺寸小。
• 減少鼠標(biāo)滑過的一些bug
• IE6不會(huì)主動(dòng)預(yù)加載鼠標(biāo)滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標(biāo)滑過會(huì)出現(xiàn)閃白的現(xiàn)象。使用CSS雪碧，由于一張圖片即可，所以不會(huì)出現(xiàn)這種現(xiàn)象。
• 不足：
• CSS雪碧的最大問題是內(nèi)存使用
• 影響瀏覽器的縮放功能
• 拼圖維護(hù)比較麻煩
• 使CSS的編寫變得困難
• CSS 雪碧調(diào)用的圖片不能被打印
• 錯(cuò)誤得使用 Sprites 影響可訪問性

附錄三 一些tips解決方案

頁面優(yōu)化實(shí)踐

• 從下面的幾個(gè)方面可以進(jìn)行頁面的優(yōu)化：
• 減少請(qǐng)求數(shù)
• 圖片合并
• CSS文件合并
• 減少內(nèi)聯(lián)樣式
• 避免在 CSS中使用 import
• 減少文件大小
• 選擇適合的圖片格式
• 圖片壓縮
• CSS 值縮寫（Shorthand Property)
• 文件壓縮
• 頁面性能
• 調(diào)整文件加載順序
• 減少標(biāo)簽數(shù)量
• 調(diào)整選擇器長度
• 盡量使用CSS 制作顯示表現(xiàn)
• 增強(qiáng)代碼可讀性與可維護(hù)性
• 規(guī)范化
• 語義化
• 模塊化

寫DIV+CSS 的一些常識(shí)

• 不要使用過小的圖片做背景平鋪
• 這就是為何很多人都不用 1px 的原因，這才知曉。寬高 1px 的圖片平鋪出一個(gè)寬高 200px 的區(qū)域，需要 200200=40, 000 次，占用資源
• 無邊框
• 推薦的寫法是 border:none;，哈哈，我一直在用這個(gè)。 border:0; 只是定義邊框?qū)挾葹榱?，但邊框樣式、顏色還是會(huì)被瀏覽器解析，占用資源
• 慎用 通配符
• 所謂通配符，就是將CSS 中的所有標(biāo)簽均初始化，不管用的不用的，過時(shí)的先進(jìn)的，一視同仁，這樣，大大的占用資源。要有選擇的初始化標(biāo)簽。
• CSS的十六進(jìn)制顏色代碼縮寫
• 習(xí)慣了縮寫及小寫，這才知道，原來不是推薦的寫法，為的是減少解析所占用的資源。但同時(shí)會(huì)增加文件體積。孰優(yōu)孰劣，有待仔細(xì)考證。
• 樣式放頭上，腳本放腳下。不內(nèi)嵌，只外鏈
• 堅(jiān)決不用 CSS表達(dá)式
• 使用 引用樣式表，而不是通過@import 導(dǎo)入。
• 一般來說，PNG比 GIF 要小，小得多。再者，GIF 中有多少顏色是被浪費(fèi)的，很值得優(yōu)化。
• 千萬不要在 HTML中縮放圖片，一者不好看，二者占資源。
• 正文字體最好用偶數(shù)
• 12px、14px、16px，效果非常好。特例，15px。
• block、ul、ol等上下留出至少一倍行距，左側(cè)至少兩倍行距，右側(cè)隨意。
• 段落之間，至少要有一倍行距
• 強(qiáng)行指定某些元素的 line-height，正文 1.6倍于文字大小，標(biāo)題1.3倍。
• 中文標(biāo)點(diǎn)用全角
• 英文夾雜在中文中，左右空格，半角。
• 中文字體的粗體和斜體，遠(yuǎn)離較好

常用代碼片段

• 雅虎工程師提供的CSS初始化示例代碼【僅供參考】
• 可以在html頭文件中直接引用，從而避免瀏覽器的不兼容帶來的錯(cuò)誤。

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td { 
 margin:0; padding:0; 
}
body {
 background:#fff; 
 color:#555; 
 font-size:14px; 
 font-family: Verdana, Arial, Helvetica, sans-serif; 
}
td,
th,
caption { 
 font-size:14px;
}
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
 font-weight:normal; 
 font-size:100%; 
}
address, 
caption,
cite, 
code, 
dfn, 
em, 
strong,
th, 
var { 
 font-style:normal; 
 font-weight:normal;
}
a { 
 color:#555; 
 text-decoration:none; 
}
a:hover { 
 text-decoration:underline; 
}
img {
 border:none;
}
ol,ul,li { 
 list-style:none; 
}
input, 
textarea, 
select, 
button { 
 font:14px Verdana,Helvetica,Arial,sans-serif; 
}
table { 
 border-collapse:collapse; 
}
html {
 overflow-y: scroll;
} 
.clearfix:after {
 content: "."; 
 display: block; 
 height:0; 
 clear:both; 
 visibility: hidden;
}
.clearfix { 
 *zoom:1; 
}

• mobile meta標(biāo)簽

<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>

• 表格不被撐開

table-layout: fixed; word-break: break-all;;border-collapse: collapse

• 不設(shè)寬高居中

<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”>
 <span style=”background:#f00; display:table-cell; vertical-align:middle;”>
 <input type=”button” value=”item1″ />
 </span>
</div>

• 透明度的兼容代碼

filter:alpha(opacity=50); /*1-100*/
-moz-opacity:0.5; /*0-1.0*/
-khtml-opacity:0.5; /*0-1.0*/
opacity:0.5; /*0-1.0*/

• 文字溢出點(diǎn)點(diǎn)省略

white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;

• 清除浮動(dòng)的幾種方法
• 方法一：投機(jī)取巧法 – 不推薦
• 直接一個(gè)放到當(dāng)作最后一個(gè)子標(biāo)簽放到父標(biāo)簽?zāi)莾?，此方法屢試不爽，兼容性?qiáng)
• 方法二：overflow + zoom方法 –不推薦
• .fix{overflow:hidden; zoom:1;}
• 此方法優(yōu)點(diǎn)在于代碼簡(jiǎn)潔，涵蓋所有瀏覽器
• 方法三：after + zoom方法 -推薦–此方法可以說是綜合起來最好的方法了
• clearfix只應(yīng)用在包含浮動(dòng)子元素的父級(jí)元素上

.fix{zoom:1;}
.fix:after{
 display:block; 
 content:'clear'; 
 clear:both;
 line-height:0; 
 visibility:hidden;
}

• 更多代碼片段詳情
• 實(shí)用的60個(gè)CSS代碼片段

一些總結(jié)

• 自動(dòng)繼承屬性：
• color
• font
• text-align
• list-style
• …
• 非繼承屬性：
• background
• border
• position
• …
• 具有破壞性的元素：
• float
• display:none;
• position:absoblute/fixed/sticky;
• 具有包裹性的元素：
• display:inline-block/table-cell
• position:absolute/fixed/sticky
• overflow:hidden/scroll
• 消除圖片底部間隙的方法
• 圖片塊狀化-無基線對(duì)齊
• img{display:block;}
• 圖片底線對(duì)齊
• img{vertical-align:bottom;}
• 行高足夠小 - 基線位置上移
• .box{line-height:0;}

一些概念

• BFC
• BFC全稱”Block Formatting Context” 中文為“塊級(jí)格式化上下文”
• 記住這么一句話：BFC元素特性表現(xiàn)原則就是，內(nèi)部子元素再怎么翻江倒海，翻云覆雨都不會(huì)影響外部的元素
• BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此
• 優(yōu)雅降級(jí)(graceful degradation)
• 一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容
• 漸進(jìn)增強(qiáng) progressive enhancement：
• 是在瀏覽器開啟JavaScript功能后，如果瀏覽器版本不支持某些 JavaScript 能力，我們解決這種問題的方式
• 平穩(wěn)退化
• 是在瀏覽器沒有JavaScript功能，或沒有開啟JavaScript功能情況下，我們解決這種問題的方式；

學(xué)習(xí)從來不是一個(gè)人的事情，要有個(gè)相互監(jiān)督的伙伴，想要學(xué)習(xí)或交流前端問題的小伙伴可以私信“學(xué)習(xí)”小明加群獲取2019web前端最新入門資料，一起學(xué)習(xí)，一起成長！