三部分 附錄（因為暫時不支持插入超鏈接所以部分內(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
• 滾動： scroll
• 服務(wù)： service
• 提示信息： msg
• 熱點：hot
• 新聞： news
• 小技巧： tips
• 下載： download
• 欄目標(biāo)題： title
• 熱點： hot
• 加入：joinus
• 注冊： 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
• 注冊：regsiter
• 搜索：search
• 功能區(qū)：shop
• 標(biāo)題：title
• 加入：joinus
• 狀態(tài)：status
• 按鈕：btn
• 滾動：scroll
• 標(biāo)簽頁：tab
• 文章列表：list
• 提示信息：msg
• 當(dāng)前的:current
• 小技巧：tips
• 圖標(biāo): icon
• 注釋：note
• 指南：guild
• 服務(wù)：service
• 熱點：hot
• 新聞：news
• 下載：download
• 投票：vote
• 合作伙伴：partner
• 友情鏈接：link
• 版權(quán)：copyright

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

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

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

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)，此時圖像顯示的是頂上的部分*/
}
a:hover {
 background-position:0 -66px;
 /*定義鏈接的滑過狀態(tài)，此時顯示的為中間部分，向下取負(fù)值*/
}
a:active {
 background-position:0 -132px; 
 /*定 義鏈接的普通狀態(tài)，此時顯示的是底部的部分，向下取負(fù)值*/
}

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

附錄三 一些tips解決方案

頁面優(yōu)化實踐

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

寫DIV+CSS 的一些常識

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

常用代碼片段

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

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*/

• 文字溢出點點省略

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

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

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

• 更多代碼片段詳情
• 實用的60個CSS代碼片段

一些總結(jié)

• 自動繼承屬性：
• 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
• 消除圖片底部間隙的方法
• 圖片塊狀化-無基線對齊
• img{display:block;}
• 圖片底線對齊
• img{vertical-align:bottom;}
• 行高足夠小 - 基線位置上移
• .box{line-height:0;}

一些概念

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

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

二部分 CSS

第八章 css基礎(chǔ)知識

• css基礎(chǔ)知識：
• css樣式表的定義
• css：（Cascading Style Sheets）層疊樣式表；
• 分類及位置：內(nèi)部樣式-head區(qū)域style標(biāo)簽里面
• 外部樣式-link調(diào)用
• 內(nèi)聯(lián)樣式-標(biāo)簽元素里面
• css內(nèi)的注釋：/*注釋內(nèi)容*/
• css樣式表的語法
• CSS規(guī)則由兩個主要的部分構(gòu)成：要添加樣式的盒子名或者標(biāo)簽名、和要添加的樣式。
• 盒子名或者標(biāo)簽名{屬性:值;}
• CSS中幾種顏色的表示方法
• 用顏色名表示
• 有17個預(yù)先確定的顏色，它們是
• aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
• olive, orange, purple, red, silver, teal, white, and yellow
• 用十六進制的顏色值表示(紅、綠、藍(lán))
• #FF0000或者#F00
• 用rgb(r,g,b)函數(shù)表示
• 如：rgb(255,255,0)
• 用hsl(Hue,Saturation,Lightness)函數(shù)表示（色調(diào)、飽和度、亮度)
• 如：hsl(120,100%,100%),色調(diào)0代表紅色，120代表綠色，240代表
• 藍(lán)色
• 用rgba(r,g,b,a)函數(shù)表示
• 其中a表示的是改顏色的透明度，取值范圍是0~1，其中0代表完全透明
• 用hsla(Hue,Saturation,Lightness,alpha)函數(shù)表示
• 色調(diào)、飽和度、亮度、透明度
• 例子

 <div style="position:absolute;top:0px">
	<div style="background-color:gray;">background-color:gray</div>
	<div style="background-color:#F00;">background-color:#F00</div>
	<div style="background-color:#ffff00;">background-color:#ffff00</div>
	<div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)</div>
	<div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div>
	<div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div>
	<div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div>
</div>

• 內(nèi)部樣式表
• 當(dāng)單個頁面需要設(shè)置樣式時，就應(yīng)該使用內(nèi)部樣式表。
• 使用 <style></style>標(biāo)簽在文檔<head></head>里面定義內(nèi)部樣式表

<head>
 <style type="text/css" >
 p{color:red;}
 </style>
</head>

• 從外部引入到樣式分為兩種：（注意寫在head標(biāo)簽里面）
• 當(dāng)樣式需要應(yīng)用于很多頁面時，就需要用到外部樣式表，首先需要創(chuàng)建一個css文件，然后引用到我們的頁面中。
• Link樣式表式： <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路徑)>
• Html式： <style type="text/css">@import url("css.css");></style>
• 內(nèi)聯(lián)樣式表（優(yōu)先級高）
• 寫在標(biāo)簽里面的樣式
• 如：<p style="color:red;"></p>
• 表示給p標(biāo)簽里面的文字顏色設(shè)置為紅色
• 區(qū)別：外鏈樣式與導(dǎo)入樣式
• link標(biāo)簽是屬于xhtml范疇，而@import則是css2.1中特有的。link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。
• 加載的順序的區(qū)別，link加載的css時，是一種并行(沒有嘗試是否是這樣)加載CSS方式，而@impor則在整個頁面加載完成后才加載。
• 兼容性的區(qū)別，因@import``CSS2.1才特有的，所以對于不兼容CSS2.1的瀏覽器來說，無效。
• 在樣式控制上(比如動態(tài)改變網(wǎng)頁的布局時,使用javascript操作DOM)的區(qū)別，此時@import就無能為力了。

• 樣式的優(yōu)先級補充
• 相同權(quán)值情況下，CSS樣式的優(yōu)先級總結(jié)來說，就是——就近原則（離被設(shè)置元素越近優(yōu)先級別越高）：
• 內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部） > 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）
• 權(quán)值不同時，瀏覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的，哪種樣式權(quán)值高就使用哪種樣式
• 層疊優(yōu)先級是:
• 瀏覽器缺省< 外部樣式表 < 內(nèi)部樣式表 < 內(nèi)聯(lián)樣式
• 其中樣式表又有:類選擇器 < 類派生選擇器<ID選擇器 < ID派生選擇器
• 派生選擇器以前叫上下文選擇器，所以完整的層疊優(yōu)先級是:
• 瀏覽器缺省 <外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器< 外部樣式表ID選擇器< 外部樣式表ID派生選擇器< 內(nèi)部樣式表 < 內(nèi)部樣式表類選擇器 < 內(nèi)部樣式表類派生選擇器 < 內(nèi)部樣式表ID選擇器 < 內(nèi)部樣式表ID派生選擇器 < 內(nèi)聯(lián)樣式…共12個優(yōu)先級
• 另外，如果同一個元素在沒有其他樣式的作用影響下，其Class定義了多個并以空格分開，其優(yōu)先級順序為：
• 一個元素同時應(yīng)用多個class，后定義的優(yōu)先（即近者優(yōu)先），加上!important者最優(yōu)先！

第九章 css選擇器(上)

• css選擇器：
• class類選擇器可以重復(fù)利用
• id選擇器唯一
• 標(biāo)簽選擇器
• 什么是選擇器：css選擇器就是要改變樣式的對象
• 選擇器{屬性:值;屬性:值;}
• 標(biāo)簽選擇器：頁面中所有的標(biāo)簽都是一個選擇器 p{color:red;}
• ID選擇器
• 選擇id命名的元素 以 # 開頭 #p1{color:#0f0;}
• 類選擇器
• class選擇器，選擇clas命名的元素 以.開頭 .first{color:#00f;}
• css代碼寫完后上線前要經(jīng)過壓縮處理
• 本地和服務(wù)器分兩個css版本（備份）
• 壓縮后注釋都清除，空間體積減少
• 群組選擇器
• 選擇多個元素,以逗號隔開 #main,.first,span,a,h1{color:red;}
• 包含選擇器
• 選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開p
• span{color:red;}
• 屬性選擇器
• 選擇包含某一屬性的元素
• a[title]{color:red;} 選擇包含title的a標(biāo)簽
• a[title][href]{color:red;} 選擇包含title和href的a標(biāo)簽
• > + 選擇器子類選擇器：只選擇子元素（只選擇兒子）（相當(dāng)于包含元素）
• p > span{color:red;}
• 相鄰兄弟選擇器：只選擇后面的相鄰兄弟元素
• p + span{color:red;}

第十章 css選擇器(下)

• <a>偽類選擇器
• a:link {color:#FF0000;} / 未訪問的鏈接 / （只用于a標(biāo)簽）
• a:visited {color:#00FF00;} / 已訪問的鏈接 / （只用于a標(biāo)簽）
• a:hover {color:#FF00FF;}/* 鼠標(biāo)移動到鏈接上
• */（可和其他標(biāo)簽結(jié)合一起用）
• a:active {color:#0000FF;} / 選定的鏈接 /
• 注意
• 偽類選擇器的排序很重要，a:link a:visited a:hover a:active，記作lvha
• 輸入偽類選擇器（針對表單）
• input:focus{color:red;} / 鍵盤輸入焦點 /
• 其他偽類選擇器
• p:first-child{color:red;} /* 第一個p */
• :before 在元素之前添加內(nèi)容。
• :after 在元素之后添加內(nèi)容。
• css優(yōu)先規(guī)則
• 內(nèi)聯(lián)樣式表-> ID 選擇器—> Class 類選擇器->標(biāo)簽選擇器

第十一章 背景屬性

• 背景屬性：
• 背景的添加 ：
• 背景顏色的添加:
• background:red;
• backgronnd-color:red;
• 背景圖片的添加：
• background:url(“images/1.jpg”);
• backgronnd-image:url(“images/1.jpg”);
• 背景的平鋪
• 什么是平鋪？平鋪就是圖片是否重復(fù)出現(xiàn)
• 不平鋪：background-repeat:no-repeat;
• 水平方向平鋪：background-repeat:repeat-x;
• 垂直方向平鋪：background-repeat:repeat-y;
• 完全平鋪：默認(rèn)為完全平鋪
• 背景圖片的定位
• 背景圖片的定位就是可以設(shè)置顯示背景圖片的位置，通過屬性background-position來實現(xiàn)
• background-position的取值可為英文單詞或者數(shù)值和百分值。
• background-positon的英文單詞取值
• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• ottom right
• background-positon的數(shù)值取值
• background-position:x y;
• positon的百分值取值
• background-position:x% y%;
• 背景圖片的大小
• 背景圖片的大小可以通過屬性background-size來設(shè)置background-size的取值可為數(shù)值和百分值。
• background-size的數(shù)值取值
• background-size:x y;
• background-size的數(shù)值取值
• background-size:x% y%;
• 背景圖片的滾動
• 背景圖片是否隨著內(nèi)容的滾動而滾動由background-attachment設(shè)置
• background-attachment:fixed; 固定，不隨內(nèi)容的滾動而滾動
• background-attachment:scroll; 滾動，隨內(nèi)容的滾動而滾動

第十二章 文字文本屬性

• css文字文本屬性：
• 文字屬性
• color:red; 文字顏色
• font-size:12px; 文字大小
• font-weight:“bold” 文字粗細(xì)(bold/normal)
• font-family:“宋體” 文字字體
• font-variant:small-caps小寫字母以大寫字母顯示
• 文本屬性
• text-align:center; 文本對齊(right/left/center)
• line-height:10px; 行間距(可通過它實現(xiàn)文本的垂直居中)
• text-indent:20px; 首行縮進
• text-decoration:none;
• 文本線(none/underline/overline/line-through)
• letter-spacing: 字間距

第十三章 盒子模型

• 盒子模型
• 盒子模型就是一個有高度和寬度的矩形區(qū)域
• 所有html標(biāo)簽都是盒子模型
• div標(biāo)簽自定義盒子模型
• 所有的標(biāo)簽都是盒子模型
• class和id的主要差別是：class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標(biāo)識單獨的唯一的元素。
• 盒子模型的組成
• 盒子模型組成部分：
• 自身內(nèi)容：width、height 寬高
• 內(nèi)邊距： padding
• 盒子邊框： border 邊框線
• 與其他盒子距離： margin外邊距
• 內(nèi)容+內(nèi)邊距+邊框+外邊距=面積
• border 邊框
• 常見寫法 border:1px solid #f00;
• 單獨屬性：
• border-width:
• border-style:
• dotted 點狀虛線
• dashed（虛線）
• solid（實線）
• double（雙實線）
• border-color (顏色)
• padding 內(nèi)邊距
• 值：像素/厘米等長度單位、百分比
• padding:10px; 上下左右
• padding:10px 10px; 上下 左右
• padding:10px 10px 10px; 上 左右 下
• padding:10px 10px 10px 10px; 上 右 下 左（設(shè)置4個點–>順時針方向）
• 單獨屬性：
• padding-top:
• padding-right:
• padding-bottom:
• padding-left:
• 當(dāng)設(shè)置內(nèi)邊距的時候會把盒子撐大，為了保持盒子原來的大小，應(yīng)該高度和寬度進行減小，根據(jù)width和height減小
• margin 外邊距
• 值：與padding相同
• 單獨屬性：與padding相同
• 外邊距合并：兩個盒子同時設(shè)置了外邊距，會進行一個外邊距合并

補充盒子模型內(nèi)容

• 標(biāo)準(zhǔn)盒子模型
• 盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 ie盒子模型和標(biāo)準(zhǔn) w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標(biāo)準(zhǔn)盒子模型

• 從上圖可以看到標(biāo)準(zhǔn) w3c 盒子模型的范圍包括 margin、border、padding、content，并且 content部分不包含其他部分
• IE盒子模型

• 從上圖可以看到 ie盒子模型的范圍也包括 margin、border、padding、content
• 和標(biāo)準(zhǔn) w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border和 padding
• IE盒子模型width = padding+border+內(nèi)容
• 標(biāo)準(zhǔn)盒子模型 = 內(nèi)容的寬度（不包含border+padding）
• 例：
• 一個盒子的 margin為 20px，border 為 1px，padding為 10px，content 的寬為 200px、高為 50px，假如用標(biāo)準(zhǔn) w3c 盒子模型解釋，那么這個盒子需要占據(jù)的位置為：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實際大小為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么這個盒子需要占據(jù)的位置為：寬 20*2+200=240px、高 20*2+50=70px，盒子的實際大小為：寬 200px、高 50px
• 那應(yīng)該選擇哪中盒子模型呢？當(dāng)然是“標(biāo)準(zhǔn) w3c 盒子模型”了。怎么樣才算是選擇了“標(biāo)準(zhǔn) w3c盒子模型”呢？很簡單，就是在網(wǎng)頁的頂部加上 doctype 聲明。
• 假如不加doctype 聲明，那么各個瀏覽器會根據(jù)自己的行為去理解網(wǎng)頁，即 ie瀏覽器會采用 ie 盒子模型去解釋你的盒子，而 ff會采用標(biāo)準(zhǔn)w3c 盒子模型解釋你的盒子，所以網(wǎng)頁在不同的瀏覽器中就顯示的不一樣了。
• 反之，假如加上了 doctype 聲明，那么所有瀏覽器都會采用標(biāo)準(zhǔn) w3c盒子模型去解釋你的盒子，網(wǎng)頁就能在各個瀏覽器中顯示一致了。

• 用 jquery 做的例子來證實一下

<html>
<head>
<title>你用的盒子模型是？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標(biāo)準(zhǔn)w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

• 上面的代碼沒有加上 doctype 聲明，在 ie 瀏覽器中顯示 ie盒子模型，在 ff 瀏覽器中顯示“標(biāo)準(zhǔn)w3c盒子模型”。

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是標(biāo)準(zhǔn)w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標(biāo)準(zhǔn)w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

• 代碼2 與代碼1 唯一的不同的就是頂部加了 doctype聲明。在所有瀏覽器中都顯示“標(biāo)準(zhǔn) w3c盒子模型”
• 所以為了讓網(wǎng)頁能兼容各個瀏覽器，讓我們用標(biāo)準(zhǔn) w3c 盒子模型
• 擴展
• 學(xué)會使用box-sizing布局

第十四章 塊元素、行元素與溢出

• 基本概念
• 塊級元素：默認(rèn)情況下獨占一行的元素，可控制寬高、上下邊距；
• 行內(nèi)元素：默認(rèn)情況下一行可以擺放多個的元素，不可控制寬高和上下邊距
• 行塊轉(zhuǎn)換
• display:none; 不顯示
• display:block; 變成塊級元素
• display:inline; 變成行級元素
• display:inline-block; 以塊級元素樣式展示，以行級元素樣式排列
• 溢出
• overflow:hidden; 溢出隱藏
• overflow:scroll; 內(nèi)容會被修剪，瀏覽器會顯示滾動條
• overflow:auto; 如果內(nèi)容被修剪，則產(chǎn)生滾動條
• 文本不換行：white-space:nowrap;
• 長單詞換行：word-wrap:break-word;
• 行內(nèi)元素和快級元素小結(jié)
• 一、塊級元素：block element
• 每個塊級元素默認(rèn)占一行高度，一行內(nèi)添加一個塊級元素后無法一般無法添加其他元素（float浮動后除外）。兩個塊級元素連續(xù)編輯時，會在頁面自動換行顯示。塊級元素一般可嵌套塊級元素或行內(nèi)元素；
• 塊級元素一般作為容器出現(xiàn)，用來組織結(jié)構(gòu)，但并不全是如此。有些塊級元素，如只能包含塊級元素。
• DIV 是最常用的塊級元素，元素樣式的display:block都是塊級元素。它們總是以一個塊的形式表現(xiàn)出來，并且跟同級的兄弟塊依次豎直排列，左右撐滿。
• 二、行內(nèi)元素：inline element
• 也叫內(nèi)聯(lián)元素、內(nèi)嵌元素等；行內(nèi)元素一般都是基于語義級(semantic)的基本元素，只能容納文本或其他內(nèi)聯(lián)元素，常見內(nèi)聯(lián)元素 “a”。比如 SPAN元素，IFRAME元素和元素樣式的display : inline的都是行內(nèi)元素。例如文字這類元素，各個字母 之間橫向排列，到最右端自動折行。
• 三、block（塊）元素的特點:
• ①、總是在新行上開始；
• ②、高度，行高以及外邊距和內(nèi)邊距都可控制；
• ③、寬度缺省是它的容器的100%，除非設(shè)定一個寬度。
• ④、它可以容納內(nèi)聯(lián)元素和其他塊元素
• 四、inline元素的特點
• ①、和其他元素都在一行上；
• ②、高，行高及外邊距和內(nèi)邊距不可改變；
• ③、寬度就是它的文字或圖片的寬度，不可改變
• ④、內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
• 對行內(nèi)元素，需要注意如下:
• 設(shè)置寬度width 無效。 設(shè)置高度height無效，可以通過line-height來設(shè)置。 設(shè)置margin
• 只有左右margin有效，上下無效。
• 設(shè)置padding只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內(nèi)容是沒影響的。
• 五、常見的塊狀元素
• address – 地址
• blockquote – 塊引用
• center – 舉中對齊塊
• dir – 目錄列表
• div – 常用塊級容易，也是CSS layout的主要標(biāo)簽
• dl – 定義列表
• fieldset – form控制組
• form – 交互表單
• h1 – 大標(biāo)題
• h2 – 副標(biāo)題
• h3 – 3級標(biāo)題
• h4 – 4級標(biāo)題
• h5 – 5級標(biāo)題
• h6 – 6級標(biāo)題
• hr – 水平分隔線
• isindex – input prompt
• menu – 菜單列表
• noframes – frames可選內(nèi)容，（對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
• noscript – 可選腳本內(nèi)容（對于不支持script的瀏覽器顯示此內(nèi)容）
• ol – 有序表單
• p – 段落
• pre – 格式化文本
• table – 表格
• ul – 無序列表
• 六、常見的內(nèi)聯(lián)元素
• a – 錨點
• abbr – 縮寫
• acronym – 首字
• b – 粗體(不推薦)
• bdo – bidi override
• big – 大字體
• br – 換行
• cite – 引用
• code – 計算機代碼(在引用源碼的時候需要)
• dfn – 定義字段
• em – 強調(diào)
• font – 字體設(shè)定(不推薦)
• i – 斜體
• img – 圖片
• input – 輸入框
• kbd – 定義鍵盤文本
• label – 表格標(biāo)簽
• q – 短引用
• s – 中劃線(不推薦)
• samp – 定義范例計算機代碼
• select – 項目選擇
• small – 小字體文本
• span – 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
• strike – 中劃線
• strong – 粗體強調(diào)
• sub – 下標(biāo)
• sup – 上標(biāo)
• textarea – 多行文本輸入框
• tt – 電傳文本
• u – 下劃線
• 七，可變元素
• 可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。
• applet - java applet
• button - 按鈕
• del- 刪除文本
• iframe - inline frame
• ins - 插入的文本
• map - 圖片區(qū)塊(map)
• object - object對象
• script - 客戶端腳本
• 八、行內(nèi)元素與塊級元素有什么不同
• 區(qū)別一：
• 塊級：塊級元素會獨占一行，默認(rèn)情況下寬度自動填滿其父元素寬度
• 行內(nèi)：行內(nèi)元素不會獨占一行，相鄰的行內(nèi)元素會排在同一行。其寬度隨內(nèi)容的變化而變化。
• 區(qū)別二：
• 塊級：塊級元素可以設(shè)置寬高
• 行內(nèi)：行內(nèi)元素不可以設(shè)置寬高
• 區(qū)別三：
• 塊級：塊級元素可以設(shè)置margin，padding
• 行內(nèi)：行內(nèi)元素水平方向的margin-left; margin-right;
• padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。
• 區(qū)別四：
• 塊級：display:block;
• 行內(nèi)：display:inline;
• 替換元素有如下：（和img一樣的設(shè)置方法）
• <img>、<input>、<textarea>、<select>
• <object>都是替換元素，這些元素都沒有實際的內(nèi)容
• 可以通過修改display屬性來切換塊級元素和行內(nèi)元素

第十五章 定位

• static靜態(tài)定位（不對它的位置進行改變，在哪里就在那里）
• 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top,bottom, left, right 或者 z-index 聲明）。
• fixed固定定位（參照物–瀏覽器窗口）—做 彈窗廣告用到
• 生成固定定位的元素，相對于瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right"以及 "bottom"屬性進行規(guī)定。
• relative（相對定位 ）（參照物以他本身）
• 生成相對定位的元素，相對于其正常位置進行定位。
• absolute（絕對定位）(除了static都可以，找到參照物–>與它最近的已經(jīng)有定位的父元素進行定位)
• 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。
• 元素的位置通過 “l(fā)eft", "top", "right" 以及 "bottom" 屬性進行規(guī)定
• z-index
• z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
• 定位的基本思想: 它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。
• 一切皆為框
• 塊級元素: div、h1或p元素 即：顯示為一塊內(nèi)容稱之為 “塊框“ ;
• 行內(nèi)元素: span,strong,a等元素 即：內(nèi)容顯示在行中稱 “行內(nèi)框”;
• 使用display屬性改變成框的類型 即：display:block; 讓行內(nèi)元素設(shè)置為塊級元素，display:none; 沒有框
• 相對定位：
• 如果對一個元素進行相對定位，它將出現(xiàn)在它所在的位置上。
• 通過設(shè)置垂直或水平位置，讓這個元素“相對于”它的起點進行移動
• .adv_relative { position: relative; left: 30px; top: 20px; }
• 絕對定位：
• 元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位 的祖先元素，它的位置相對于最初的包含塊。 .adv_absolute { position: absolute; left: 30px; top: 20px; }

第十六章 框架

• frameset框架：
• <frameset> —- 用來定義一個框架；雙標(biāo)簽
• 不能和 <body> 一起使用
• rows、cols屬性
• rows 定義行表示框架有多少行（取值 px/%/ * ）
• cols 定義列表示框架有多少列（取值px/ %/ * ）
• frame子框架
• <frame> —- 表示框架中的某一個部分；單標(biāo)簽，要跟結(jié)束標(biāo)志
• src 顯示的網(wǎng)頁的路徑
• name 框架名
• frameborder 邊框線（取值 0 / 1）
• <noframes>屬性
• <noframes> 提供不支持框架的瀏覽器顯示body的內(nèi)容；雙標(biāo)簽

<frameset>
 <frame src=“” />
 <frame src=“” />
 <frame src=“” />
 <noframes>
 <body>內(nèi)容</body>
 </noframes>
</frameset>

• <iframe>內(nèi)聯(lián)框架
• iframe元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）
• 允許和 body 一起使用
• width 寬（取值 px / %）
• height 高（取值 px / %）
• name 框架名
• frameborder 邊框線（取值 0 / 1）
• src 顯示的網(wǎng)頁的路徑

第十七章 css高級屬性

• opacity透明屬性
• opacity
• 對于IE6/7/，使用filter:alpha(opacity:值;) 值為0-100
• 對于Webkit，Opera，F(xiàn)irefox，IE9+，使用opacity:值; 值為0-1
• 對于早期火狐，使用-moz-opacity:值; 值為0-1
• 所以寫透明屬性時，一般寫法是

 {	
 opacity:0.5;
 filter:alpha(opacity：50);/*0-100*/
 -moz-opacity:0.5;	/*取值0-1*/-->針對早起版本的火狐兼容問題的解決
}

• border-radius圓角邊框?qū)傩?/li>
• 向 div 元素添加圓角邊框
• border-radius:10px;
• box-shadow陰影屬性
• box-shadow屬性向框添加陰影效果,后面跟4個參數(shù)。
• box-shadow:0px 0px 10px #000;
• <embed>屬性
• 是HTML5中新增的標(biāo)簽,媒體嵌入插件標(biāo)簽，可以通過<embed>插入音頻或視頻
• <embed src=“media/music.mp3” />
• 格式.mid .wav .mp3等

• CSS部分導(dǎo)圖總結(jié)

• css常見簡寫