1.CSS背景
? CSS的背景
? background-attachment 設(shè)置背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)呀伙。
? background-color 設(shè)置元素的背景顏色贮乳。
? background-image 設(shè)置元素的背景圖像。
? background-position 設(shè)置背景圖像的開始位置既棺。
? background-repeat 設(shè)置是否及如何重復(fù)背景圖像。
? background 合寫：在一個(gè)聲明中設(shè)置所有的背景屬性。
2.背景圖片
background-image
? 可以設(shè)置盒子的背景圖片：
? background-image: url(bgimage.gif);
? 注意url指向一個(gè)相對(duì)路徑，url后面緊跟的是一對(duì)括號(hào)烁兰，括號(hào)內(nèi)的是路徑，路徑可以用引號(hào)徊都，也可以
省略沪斟，建議省略。
? 背景圖片會(huì)蓋住背景顏色暇矫。
? 也就是說(shuō)：背景圖片的優(yōu)先級(jí)要高于背景色
background-attachment
? background-attachment屬性設(shè)置背景圖像是
? scroll： 默認(rèn)值主之。背景圖像會(huì)隨著頁(yè)面其余部分的滾動(dòng)而移動(dòng)。否固定或者隨著頁(yè)面的其余部分滾動(dòng)李根。
? fixed：固定顯示槽奕，相對(duì)于body固定。一般只用于body的背景設(shè)置房轿。
? background-attachment: fixed;
background-position
? background-position 屬性設(shè)置背景圖像的起始位置,如下圖:
background-position.png
background-repeat
? background-repeat 屬性定義了圖像的平鋪模式粤攒。
background-repeat.png
background合寫
? background合寫的順序： 背景顏色、背景圖地址囱持、平鋪設(shè)置夯接、背景圖滾動(dòng)、背景圖位置纷妆。
? background: #00FF00 url(bgimage.gif) no-repeat fixed top;
? 建議：背景都以合寫的形式存在盔几，CSS的字節(jié)更少。
3.CSS規(guī)避脫標(biāo)
標(biāo)準(zhǔn)流（常規(guī)流） 是及其穩(wěn)定的寫法掩幢，很多地方逊拍，我們盡量使用標(biāo)準(zhǔn)流.
優(yōu)先選擇標(biāo)準(zhǔn)上鞠，其次使用float，最后選擇定位芯丧。
1. margin-left:auto; 左側(cè)外邊距自動(dòng)
不用浮動(dòng)塊級(jí)元素也可以到右側(cè)
2. vertical-align 和 inline-block 的使用
怎么讓一個(gè) 盒子和文字對(duì)齊芍阎？
實(shí)現(xiàn)方式： 可以使用浮動(dòng)，也可以使用inline-block和 vertial-align
4.CSS元素可見性
單詞 作用
overflow：hidden 隱藏超出的那部分
display：none 不顯示元素 同時(shí)也不占位置
visibility:hidden; 不顯示元素 但是占有位置
5.CSS標(biāo)簽包含
常用標(biāo)簽嵌套
1.內(nèi)聯(lián)元素卻不能包含塊元素缨恒，它只能包含其他的內(nèi)聯(lián)元素
span> div
div> div>ul>li>div
2.有些塊級(jí)元素不能放其他塊級(jí)元素能曾。
標(biāo)題標(biāo)記的<h1>、<h2>肿轨、<h3>、<h4>蕊程、<h5>椒袍、<h6>、<caption>藻茂；
段落標(biāo)記的<p>驹暑； p>div
分隔線<hr>和<dt>
3、a標(biāo)簽不能嵌套 a和input標(biāo)簽辨赐，能嵌套的標(biāo)簽像,<b><strong>等等优俘。
6.CSS內(nèi)容移除某個(gè)區(qū)域
常用于logo 優(yōu)化
1. 利用text-indent:-2000em;
2. 利用padding 擠開盒子 并且overflow 切割。
3.利用margin拉動(dòng)盒子配合overflow切割
7. CSS精靈技術(shù)
精靈技術(shù)原理圖.png
? 上圖所示為網(wǎng)頁(yè)的請(qǐng)求原理圖掀序，當(dāng)用戶訪問(wèn)一個(gè)網(wǎng)站時(shí)帆焕，需要向服務(wù)器發(fā)送請(qǐng)求，網(wǎng)頁(yè)上的每張圖像都要
經(jīng)過(guò)一次請(qǐng)求才能展現(xiàn)給用戶不恭。
? 然而叶雹，一個(gè)網(wǎng)頁(yè)中往往會(huì)應(yīng)用很多小的背景圖像作為修飾，當(dāng)網(wǎng)頁(yè)中的圖像過(guò)多時(shí)换吧，服務(wù)器就會(huì)頻繁地接
受和發(fā)送請(qǐng)求折晦，這將大大降低頁(yè)面的加載速度。為了有效地減少服務(wù)器接受和發(fā)送請(qǐng)求的次數(shù)沾瓦，提高頁(yè)面的
加載速度满着，出現(xiàn)了CSS精靈技術(shù)（也稱CSS Sprites）。
?簡(jiǎn)單地說(shuō)贯莺，CSS精靈是一種處理網(wǎng)頁(yè)背景圖像的方式风喇。它將一個(gè)頁(yè)面涉及到的所有零星背景圖像都集中到一
張大圖中去，然后將大圖應(yīng)用于網(wǎng)頁(yè)缕探，這樣响驴，當(dāng)用戶訪問(wèn)該頁(yè)面時(shí)，只需向服務(wù)發(fā)送一次請(qǐng)求撕蔼，網(wǎng)頁(yè)中的
背景圖像即可全部展示出來(lái)豁鲤。通常情況下秽誊，這個(gè)由很多小的背景圖像合成的大圖被稱為精靈圖，如下圖所
示為搜狗網(wǎng)站中的一個(gè)精靈圖琳骡。
搜狗精靈圖.png
CSS 精靈其實(shí)是將網(wǎng)頁(yè)中的一些背景圖像整合到一張大圖中（精靈圖）锅论。然而，各個(gè)網(wǎng)頁(yè)元素通常只需要
精靈圖中不同位置的某個(gè)小圖楣号，要想精確定位到精靈圖中的某個(gè)小圖最易，就需要使用CSS的
background-image、background-repeat和backgroundposition屬性進(jìn)行背景定位炫狱，其中最關(guān)鍵的是使
用backgroundposition屬性精確地定位藻懒。
CSS 精靈其實(shí)是將網(wǎng)頁(yè)中的一些背景圖像整合到一張大圖中（精靈圖）
騰訊精靈圖.png
8.小圖跟文字進(jìn)行水平對(duì)齊技術(shù)
? 第一種方式：通過(guò)調(diào)整文字背景圖的位置。
通過(guò)padding+背景圖的position配合產(chǎn)生對(duì)齊效果视译。
注意精靈圖（長(zhǎng)條適合）
? 第二種方式：將背景圖設(shè)置到一個(gè)s標(biāo)簽上嬉荆，讓s標(biāo)簽跟文本對(duì)齊。精靈圖可以做的非常緊湊酷含。
關(guān)鍵點(diǎn)：文本的對(duì)齊到middle鄙早，可以通過(guò)設(shè)置圖片的margin-top、left椅亚、right等控制圖片的顯示位置限番。
? 第三種方式：
可以同浮動(dòng)的形式實(shí)現(xiàn)
文字小圖對(duì)齊.png
.arrow-d {
width: 9px;
height: 6px;
background:
url(../imgs/bg.fw.png) no-repeat
0 -80px;
display: inline-block;
vertical-align: middle;
margin-top: -2px;
}
9.拓展學(xué)習(xí)
? 淘寶的小圖，已經(jīng)部分font-face在線字體化呀舔。
? 研究一下font-face弥虐？
10.? css滑動(dòng)門技術(shù)
滑動(dòng)門.png
制作網(wǎng)頁(yè)時(shí)，為了美觀媚赖，常常需要為網(wǎng)頁(yè)元素設(shè)置特殊形狀的背景躯舔，
如下圖所示，即為設(shè)置了圓角背景的導(dǎo)航省古。
圓角背景導(dǎo)航條.png
?如果使用傳統(tǒng)的CSS思想粥庄，要想為列表項(xiàng)“技術(shù)聯(lián)盟”設(shè)置上圖所示的圓角背景，可以對(duì)其所在的<li>標(biāo)記
應(yīng)用大圓角背景豺妓。這種方式固然可以實(shí)現(xiàn)圓角背景的效果惜互，但是，如果以后增加或減少列表項(xiàng)中的文字琳拭，就
需要重新對(duì)<li>定義背景圖像训堆，以適應(yīng)文本內(nèi)容的多少。
需求分析:
?為了使各種特殊形狀的背景能夠自適應(yīng)元素中文本內(nèi)容的多少白嘁，出現(xiàn)了CSS滑動(dòng)門技術(shù)坑鱼。它從新的角度構(gòu)
建頁(yè)面，使各種特殊形狀的背景能夠自由拉伸滑動(dòng)，以適應(yīng)元素內(nèi)部的文本內(nèi)容鲁沥，可用性更強(qiáng)呼股。
11.margin負(fù)值運(yùn)用
制作網(wǎng)頁(yè)時(shí)，為了拉開元素之間的距離画恰，常常給元素設(shè)置大于0的外邊距margin彭谁。其實(shí)，在實(shí)際工作中允扇，為
了實(shí)現(xiàn)一些特殊的效果缠局，經(jīng)常需要將元素的margin設(shè)置為負(fù)值，如下圖所示的元素重疊效果考润。
margin負(fù)值元素重疊.png
12.消除inline-block中的空隙
行內(nèi)塊之間會(huì)有縫隙狭园，去掉的方法
1. 去除空格，把代碼放在一行上糊治。
2. 使用margin負(fù)值唱矛。
3.給父級(jí)添加font-size:0；
4.使用letter-spacing或者 word-spacing
5俊戳、使用float的方式
13.CSS圓角
圖片簡(jiǎn)單，但是寫起來(lái)要復(fù)雜多馆匿。但是也有自己意外的一部分抑胎。
圓角練習(xí).png
用CSS實(shí)現(xiàn) 三角
背景圖實(shí)現(xiàn)三角
在線字體三角
文字三角
14.ico圖標(biāo)
1. www.bitbug.net 進(jìn)行轉(zhuǎn)換 生成的是： favicon.ico 的小圖標(biāo)
2. <link rel="shortcut icon" href="favicon.ico" />
15.導(dǎo)入式補(bǔ)充:
導(dǎo)入式與鏈入式相同，都是針對(duì)外部樣式表文件的渐北。對(duì)HTML頭部文檔應(yīng)用style標(biāo)記阿逃，并在<style>標(biāo)記內(nèi)
的開頭處使用@import語(yǔ)句，即可導(dǎo)入外部樣式表文件赃蛛。其基本語(yǔ)法格式如下：
<style type="text/css" >
@import url(css文件路徑);或 @import "css文件路徑";
/* 在此還可以存放其他CSS樣式*/
</style>
需要位于其他內(nèi)嵌樣式的上面恃锉。
樣式表總結(jié).png
15.關(guān)于表格
表格.png
16.CSS的選擇器解析順序
? CSS解析順序：從最右選擇器進(jìn)行篩選，然后依次向左進(jìn)行過(guò)濾呕臂。
? #aside div .tit { color: red; }
? 先解析：.tit進(jìn)行過(guò)濾破托，然后過(guò)濾 div，然后最后過(guò)濾#aside元素
? 選擇器層級(jí)嵌套不要超過(guò)3層歧蒋。
17.CSS選擇器優(yōu)化效率
CSS選擇器的性能排序：
1.id選擇器（#myid）
2.類選擇器（.myclassname）
3.標(biāo)簽選擇器（div,h1,p）
4.相鄰選擇器（h1+p）
5.子選擇器（ul < li）
6.后代選擇器（li a）
7.通配符選擇器（*）
8.屬性選擇器（a[rel="external"]）
9.偽類選擇器（a:hover,li:nth-child）
18.有思想的CSS
? OOCSS
? ACSS
? BEM