- 學(xué)會(huì)使用CSS選擇器
- 熟記CSS樣式和外觀屬性
- 熟練掌握CSS各種選擇器
- 熟練掌握CSS各種選擇器
- 熟練掌握CSS三種顯示模式
- 熟練掌握CSS背景屬性
- 熟練掌握CSS三大特性
- 熟練掌握CSS盒子模型
- 熟練掌握CSS浮動(dòng)
10.熟練掌握CSS定位
11.熟練掌握CSS高級(jí)技巧強(qiáng)化CSS
typora-copy-images-to: media
CSS的發(fā)展歷程
從HTML被發(fā)明開始，樣式就以各種形式存在宦焦。不同的瀏覽器結(jié)合它們各自的樣式語言為用戶提供頁面效果的控制料身。最初的HTML只包含很少的顯示屬性赔硫。
隨著HTML的成長，為了滿足頁面設(shè)計(jì)者的要求骂倘，HTML添加了很多顯示功能掺涛。但是隨著這些功能的增加，HTML變的越來越雜亂匿情，而且HTML頁面也越來越臃腫兰迫。于是CSS便誕生了。
CSS 網(wǎng)頁的美容師
CSS的出現(xiàn)炬称，拯救了混亂的HTML汁果，當(dāng)讓更加拯救了我們web開發(fā)者。 讓我們的網(wǎng)頁更加豐富多彩玲躯。
CSS的最大貢獻(xiàn)就是： 讓 HTML 從樣式中解脫苦海， 實(shí)現(xiàn)了 HTML 專注去做 結(jié)構(gòu)呈現(xiàn)跷车。 而樣式交給 CSS 后棘利，你完全可以放心的早點(diǎn)洗洗睡了！
而且朽缴。浇冰。咏花。壁畸。癣朗。 CSS 做的很出色，如果JavaScript是網(wǎng)頁的魔法師或渤，那么CSS它是我們網(wǎng)頁的美容師系冗，不信，你看:
ps: 你跟Angelababy只差了一個(gè)妝容的距離
有人說薪鹦， 沒有不漂亮的女人掌敬，只有不會(huì)打扮的女人。
我想說距芬， 沒有不好看的網(wǎng)頁涝开，只有不會(huì)CSS的前端循帐。
CSS初識(shí)
CSS(Cascading Style Sheets) 美化樣式
CSS通常稱為CSS樣式表或?qū)盈B樣式表（級(jí)聯(lián)樣式表）框仔，主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小拄养、對(duì)齊方式等）离斩、圖片的外形（寬高银舱、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式跛梗。
CSS以HTML為基礎(chǔ)寻馏，提供了豐富的功能，如字體核偿、顏色诚欠、背景的控制及整體排版等，而且還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式漾岳。
引入CSS樣式表（書寫位置）
CSS可以寫到那個(gè)位置轰绵？ 是不是一定寫到html文件里面呢？
內(nèi)部樣式表
內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的head頭部標(biāo)簽中尼荆，并且用style標(biāo)簽定義左腔，其基本語法格式如下：
<head>
<style type="text/CSS">
選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>
語法中，style標(biāo)簽一般位于head標(biāo)簽中title標(biāo)簽之后捅儒，也可以把他放在HTML文檔的任何地方液样。
type="text/CSS" 在html5中可以省略， 寫上也比較符合規(guī)范巧还， 所以這個(gè)地方可以寫也可以省略鞭莽。
行內(nèi)式（內(nèi)聯(lián)樣式）
內(nèi)聯(lián)樣式，又有人稱行內(nèi)樣式狞悲、行間樣式撮抓、內(nèi)嵌樣式。是通過標(biāo)簽的style屬性來設(shè)置元素的樣式摇锋，其基本語法格式如下：
<標(biāo)簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內(nèi)容 </標(biāo)簽名>
語法中style是標(biāo)簽的屬性丹拯，實(shí)際上任何HTML標(biāo)簽都擁有style屬性，用來設(shè)置行內(nèi)式荸恕。其中屬性和值的書寫規(guī)范與CSS樣式規(guī)則相同乖酬，行內(nèi)式只對(duì)其所在的標(biāo)簽及嵌套在其中的子標(biāo)簽起作用。
外部樣式表（外鏈?zhǔn)剑?/h2>
鏈入式是將所有的樣式放在一個(gè)或多個(gè)以.CSS為擴(kuò)展名的外部樣式表文件中融求，通過link標(biāo)簽將外部樣式表文件鏈接到HTML文檔中咬像，其基本語法格式如下：
<head>
<link href="CSS文件的路徑" rel="stylesheet" />
</head>
注意： link 是個(gè)單標(biāo)簽哦!!!
該語法中，link標(biāo)簽需要放在head頭部標(biāo)簽中生宛，并且必須指定link標(biāo)簽的三個(gè)屬性县昂，具體如下：
href：定義所鏈接外部樣式表文件的URL，可以是相對(duì)路徑陷舅，也可以是絕對(duì)路徑倒彰。
type：定義所鏈接文檔的類型，在這里需要指定為“text/CSS”莱睁，表示鏈接的外部文件為CSS樣式表待讳。
rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系芒澜，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個(gè)樣式表文件创淡。
三種樣式表總結(jié)（位置）
| 樣式表 | 優(yōu)點(diǎn) | 缺點(diǎn) | 使用情況 | 控制范圍 |
|---|---|---|---|---|
| 行內(nèi)樣式表 | 書寫方便痴晦，權(quán)重高 | 沒有實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離 | 較少 | 控制一個(gè)標(biāo)簽（少） |
| 內(nèi)部樣式表 | 部分結(jié)構(gòu)和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個(gè)頁面（中） |
| 外部樣式表 | 完全實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離 | 需要引入 | 最多，強(qiáng)烈推薦 | 控制整個(gè)站點(diǎn)（多） |
CSS樣式規(guī)則
使用HTML時(shí)琳彩，需要遵從一定的規(guī)范誊酌。CSS亦如此，要想熟練地使用CSS對(duì)網(wǎng)頁進(jìn)行修飾露乏，首先需要了解CSS樣式規(guī)則术辐，具體格式如下：
在上面的樣式規(guī)則中:
1.選擇器用于指定CSS樣式作用的HTML對(duì)象，花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式施无。
2.屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn)辉词。
3.屬性是對(duì)指定的對(duì)象設(shè)置的樣式屬性，例如字體大小猾骡、文本顏色等瑞躺。
4.屬性和屬性值之間用英文“:”連接。
5.多個(gè)“鍵值對(duì)”之間用英文“;”進(jìn)行區(qū)分兴想。
可以用段落 和 表格的對(duì)齊的演示幢哨。
選擇器（重點(diǎn)）
要想將CSS樣式應(yīng)用于特定的HTML元素，首先需要找到該目標(biāo)元素嫂便。在CSS中捞镰，執(zhí)行這一任務(wù)的樣式規(guī)則部分被稱為選擇器（選擇符）。
<img src="media/ax.png" />
如上圖所以毙替，要把里面的小黃人分為2組岸售，最快的方法怎辦？
很多厂画， 比如 一只眼睛的一組凸丸，剩下的一組
選擇器干啥的？ 選擇標(biāo)簽用的
這就用到基礎(chǔ)選擇器組：
CSS基礎(chǔ)選擇器
標(biāo)簽選擇器（元素選擇器）
標(biāo)簽選擇器是指用HTML標(biāo)簽名稱作為選擇器袱院，按標(biāo)簽名稱分類屎慢，為頁面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式。其基本語法格式如下：
標(biāo)簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標(biāo)簽選擇器最大的優(yōu)點(diǎn)是能快速為頁面中同類型的標(biāo)簽統(tǒng)一樣式忽洛，同時(shí)這也是他的缺點(diǎn)腻惠，不能設(shè)計(jì)差異化樣式。
標(biāo)簽選擇器 可以把某一類標(biāo)簽全部選擇出來 div span
類選擇器
類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)欲虚，后面緊跟類名集灌，其基本語法格式如下：
.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標(biāo)簽調(diào)用的時(shí)候用 class=“類名” 即可。
類選擇器最大的優(yōu)勢(shì)是可以為元素對(duì)象定義單獨(dú)或相同的樣式苍在。 可以選擇一個(gè)或者多個(gè)標(biāo)簽
<img src="media/good.png" />小技巧：
1.長名稱或詞組可以使用中橫線來為選擇器命名绝页。
2.不建議使用“_”下劃線來命名CSS選擇器。
? 輸入的時(shí)候少按一個(gè)shift鍵;
瀏覽器兼容問題 (比如使用tips的選擇器命名寂恬，在IE6是無效的)
能良好區(qū)分JavaScript變量命名(JS變量命名是用“”)
3.不要純數(shù)字续誉、中文等命名， 盡量使用英文字母來表示初肉。
猜謎底游戲：
<img src="media/midi.png" width="450" /> 你猜酷鸦？
命名是我們通俗約定的，但是沒有規(guī)定必須用這些常用的命名牙咏。
<head>
<meta charset="utf-8">
<style>
span {
font-size: 100px;
}
.blue {
color: blue;
}
.red {
color: red;
}
.orange {
color: orange;
}
.green {
color: green;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
多類名選擇器
我們可以給標(biāo)簽指定多個(gè)類名臼隔，從而達(dá)到更多的選擇目的。
<img src="media/lei.png" />
注意：
1. 樣式顯示效果跟HTML元素中的類名先后順序沒有關(guān)系,受CSS樣式書寫的上下順序有關(guān)妄壶。
2. 各個(gè)類名中間用空格隔開摔握。
多類名選擇器在后期布局比較復(fù)雜的情況下，還是較多使用的丁寄。
<div class="pink fontWeight font20">亞瑟</div>
<div class="font20">劉備</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蟬</div>
類名選擇器 ：< div class=“nav”> 這個(gè) div 的名字 就是 nav nav 就是 div 這個(gè) div 也是 nav
< 人 class = 劉德華 > 我們想要吧div 找到 div {} .nav {}
id選擇器
id選擇器使用“#”進(jìn)行標(biāo)識(shí)氨淌，后面緊跟id名，其基本語法格式如下：
#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
該語法中伊磺，id名即為HTML元素的id屬性值盛正，大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的屑埋，只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素豪筝。
用法基本和類選擇器相同。
id選擇器和類選擇器區(qū)別
W3C標(biāo)準(zhǔn)規(guī)定摘能，在同一個(gè)頁面內(nèi)续崖，不允許有相同名字的id對(duì)象出現(xiàn)，但是允許相同名字的class团搞。
類選擇器（class） 好比人的名字袜刷， 是可以多次重復(fù)使用的， 比如 張偉 王偉 李偉 李娜
id選擇器 好比人的身份證號(hào)碼莺丑， 全中國是唯一的著蟹， 不得重復(fù)。 只能使用一次梢莽。
id選擇器和類選擇器最大的不同在于 使用次數(shù)上萧豆。
通配符選擇器
通配符 選擇器用“*”號(hào)表示，他是所有選擇器中作用范圍最廣的昏名，能匹配頁面中所有的元素涮雷。其基本語法格式如下：
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
例如下面的代碼，使用通配符選擇器定義CSS樣式轻局，清除所有HTML標(biāo)記的默認(rèn)邊距洪鸭。
* {
margin: 0; /* 定義外邊距*/
padding: 0; /* 定義內(nèi)邊距*/
}
注意：
這個(gè)通配符選擇器样刷，就像我們的電影明星中的夢(mèng)中情人， 想想它就好了览爵，但是它不會(huì)和你過日子置鼻。
CSS字體樣式屬性
font-size:字號(hào)大小
font-size屬性用于設(shè)置字號(hào)，該屬性的值可以使用相對(duì)長度單位蜓竹，也可以使用絕對(duì)長度單位箕母。其中，相對(duì)長度單位比較常用俱济，推薦使用像素單位px嘶是，絕對(duì)長度單位使用較少。具體如下：
font-family:字體
font-family屬性用于設(shè)置字體蛛碌。網(wǎng)頁中常用的字體有宋體聂喇、微軟雅黑、黑體等蔚携，例如將網(wǎng)頁中所有段落文本的字體設(shè)置為微軟雅黑蘸朋，可以使用如下CSS樣式代碼：
p{ font-family:"微軟雅黑";}
可以同時(shí)指定多個(gè)字體坤学，中間以逗號(hào)隔開有序，表示如果瀏覽器不支持第一個(gè)字體唐含，則會(huì)嘗試下一個(gè)，直到找到合適的字體秕硝。
<img src="media/good.png" />常用技巧：
1. 現(xiàn)在網(wǎng)頁中普遍使用14px+芥映。
2. 盡量使用偶數(shù)的數(shù)字字號(hào)。ie6等老式瀏覽器支持奇數(shù)會(huì)有bug远豺。
3. 各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開奈偏。
4. 中文字體需要加英文狀態(tài)下的引號(hào)，英文字體一般不需要加引號(hào)躯护。當(dāng)需要設(shè)置英文字體時(shí)惊来，英文字體名必須位于中文字體名之前。
5. 如果字體名中包含空格棺滞、#裁蚁、$等符號(hào)，則該字體必須加英文狀態(tài)下的單引號(hào)或雙引號(hào)继准，例如font-family: "Times New Roman";枉证。
6. 盡量使用系統(tǒng)默認(rèn)字體，保證在任何用戶的瀏覽器中都能正確顯示移必。
CSS Unicode字體
在 CSS 中設(shè)置字體名稱室谚，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時(shí)會(huì)產(chǎn)生亂碼的錯(cuò)誤秒赤。xp 系統(tǒng)不支持 類似微軟雅黑的中文猪瞬。
方案一： 你可以使用英文來替代。 比如 font-family:"Microsoft Yahei"入篮。
方案二： 在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯(cuò)誤陈瘦。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的崎弃。
font-family: "\5FAE\8F6F\96C5\9ED1"，表示設(shè)置字體為“微軟雅黑”含潘。
可以通過escape() 來測(cè)試屬于什么字體饲做。
| 字體名稱 | 英文名稱 | Unicode 編碼 |
|---|---|---|
| 宋體 | SimSun | \5B8B\4F53 |
| 新宋體 | NSimSun | \65B0\5B8B\4F53 |
| 黑體 | SimHei | \9ED1\4F53 |
| 微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷體_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隸書 | LiSu | \96B6\4E66 |
| 幼園 | YouYuan | \5E7C\5706 |
| 華文細(xì)黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 細(xì)明體 | MingLiU | \7EC6\660E\4F53 |
| 新細(xì)明體 | PMingLiU | \65B0\7EC6\660E\4F53 |
為了照顧不同電腦的字體安裝問題，我們盡量只使用宋體和微軟雅黑中文字體
font-weight:字體粗細(xì)
字體加粗除了用 b 和 strong 標(biāo)簽之外遏弱，可以使用CSS 來實(shí)現(xiàn)盆均，但是CSS 是沒有語義的。
font-weight屬性用于定義字體的粗細(xì)漱逸，其可用屬性值：normal泪姨、bold、bolder饰抒、lighter肮砾、100~900（100的整數(shù)倍）。
<img src="media/good.png" />小技巧：
數(shù)字 400 等價(jià)于 normal袋坑，而 700 等價(jià)于 bold仗处。 但是我們更喜歡用數(shù)字來表示。
font-style:字體風(fēng)格
字體傾斜除了用 i 和 em 標(biāo)簽之外枣宫，可以使用CSS 來實(shí)現(xiàn)翅娶，但是CSS 是沒有語義的胯府。
font-style屬性用于定義字體風(fēng)格十减，如設(shè)置斜體、傾斜或正常字體帮辟，其可用屬性值如下：
normal：默認(rèn)值速址，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式。
italic：瀏覽器會(huì)顯示斜體的字體樣式由驹。
oblique：瀏覽器會(huì)顯示傾斜的字體樣式芍锚。
<img src="media/good.png" />小技巧：
平時(shí)我們很少給文字加斜體，反而喜歡給斜體標(biāo)簽（em，i）改為普通模式并炮。
font:綜合設(shè)置字體樣式 (重點(diǎn))
font屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置默刚，其基本語法格式如下：
選擇器{font: font-style font-weight font-size/line-height font-family;}
使用font屬性時(shí)，必須按上面語法格式中的順序書寫逃魄，不能更換順序荤西，各個(gè)屬性以空格隔開。
注意：其中不需要設(shè)置的屬性可以省略（取默認(rèn)值）伍俘，但必須保留font-size和font-family屬性邪锌，否則font屬性將不起作用。
CSS外觀屬性
color:文本顏色
color屬性用于定義文本的顏色癌瘾，其取值方式有如下3種：
1.預(yù)定義的顏色值觅丰，如red，green柳弄，blue等舶胀。
2.十六進(jìn)制概说，如#FF0000碧注，#FF6600，#29D794等糖赔。實(shí)際工作中萍丐，十六進(jìn)制是最常用的定義顏色的方式。
3.RGB代碼放典，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)逝变。
需要注意的是，如果使用RGB代碼的百分比顏色值奋构，取值為0時(shí)也不能省略百分號(hào)壳影，必須寫為0%。
line-height:行間距
ine-height屬性用于設(shè)置行間距弥臼，就是行與行之間的距離宴咧，即字符的垂直間距，一般稱為行高径缅。line-height常用的屬性值單位有三種掺栅，分別為像素px，相對(duì)值em和百分比%纳猪，實(shí)際工作中使用最多的是像素px
一般情況下氧卧，行距比字號(hào)大7.8像素左右就可以了。
text-align:水平對(duì)齊方式
text-align屬性用于設(shè)置文本內(nèi)容的水平對(duì)齊氏堤，相當(dāng)于html中的align對(duì)齊屬性沙绝。其可用屬性值如下：
left：左對(duì)齊（默認(rèn)值）
right：右對(duì)齊
center：居中對(duì)齊
是讓盒子里面的內(nèi)容水平居中， 而不是讓盒子居中對(duì)齊
text-indent:首行縮進(jìn)
text-indent屬性用于設(shè)置首行文本的縮進(jìn)，其屬性值可為不同單位的數(shù)值宿饱、em字符寬度的倍數(shù)熏瞄、或相對(duì)于瀏覽器窗口寬度的百分比%，允許使用負(fù)值, 建議使用em作為設(shè)置單位谬以。
1em 就是一個(gè)字的寬度 如果是漢字的段落强饮， 1em 就是一個(gè)漢字的寬度
text-decoration 文本的裝飾
text-decoration 通常我們用于給鏈接修改裝飾效果
| 值 | 描述 |
|---|---|
| none | 默認(rèn)。定義標(biāo)準(zhǔn)的文本为黎。 |
| underline | 定義文本下的一條線邮丰。下劃線 也是我們鏈接自帶的 |
| overline | 定義文本上的一條線。 |
| line-through | 定義穿過文本下的一條線铭乾。 |
開發(fā)者工具（chrome）
此工具是我們的必備工具剪廉，以后代碼出了問題，我們首先第一反應(yīng)就是：
“按F12”或者是 “shift+ctrl+i” 打開 開發(fā)者工具炕檩。
菜單： 右擊網(wǎng)頁空白出---查看
小技巧：
- ctrl+滾輪 可以 放大開發(fā)者工具代碼大小斗蒋。
- 左邊是HTML元素結(jié)構(gòu) 右邊是CSS樣式。
- 右邊CSS樣式可以改動(dòng)數(shù)值和顏色查看更改后效果笛质。
CSS復(fù)合選擇器
復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器泉沾，通過不同的方式組合而成的,目的是為了可以選擇更準(zhǔn)確更精細(xì)的目標(biāo)元素標(biāo)簽。
交集選擇器
交集選擇器由兩個(gè)選擇器構(gòu)成妇押，其中第一個(gè)為標(biāo)簽選擇器跷究，第二個(gè)為class選擇器，兩個(gè)選擇器之間不能有空格敲霍，如h3.special俊马。
記憶技巧：
交集選擇器 是 并且的意思。 即...又...的意思
比如： p.one 選擇的是： 類名為 .one 的 段落標(biāo)簽肩杈。
用的相對(duì)來說比較少柴我，不太建議使用。
并集選擇器
并集選擇器（CSS選擇器分組）是各個(gè)選擇器通過<strong style="color:#f00">逗號(hào)</strong>連接而成的扩然，任何形式的選擇器（包括標(biāo)簽選擇器艘儒、class類選擇器id選擇器等），都可以作為并集選擇器的一部分与学。如果某些選擇器定義的樣式完全相同彤悔，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式索守。
記憶技巧：
并集選擇器 和 的意思晕窑， 就是說，只要逗號(hào)隔開的卵佛，所有選擇器都會(huì)執(zhí)行后面樣式杨赤。
比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 這三個(gè)選擇器都會(huì)執(zhí)行顏色為紅色敞斋。 通常用于集體聲明。
<img src="media/hu.gif" /> 他和他疾牲，在一起植捎， 在一起 一起的意思
后代選擇器
后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代阳柔，其寫法就是把外層標(biāo)簽寫在前面焰枢，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔舌剂。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)济锄，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。
子孫后代都可以這么選擇霍转。 或者說荐绝，它能選擇任何包含在內(nèi) 的標(biāo)簽。
<img src="media/li.png" />
子元素選擇器
子元素選擇器只能選擇作為某元素子元素的元素避消。其寫法就是把父級(jí)標(biāo)簽寫在前面低滩，子級(jí)標(biāo)簽寫在后面，中間跟一個(gè) > 進(jìn)行連接岩喷，注意恕沫，符號(hào)左右兩側(cè)各保留一個(gè)空格。
白話： 這里的子 指的是 親兒子 不包含孫子 重孫子之類均驶。
比如： .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子昏兆。 demo 元素包含著h3枫虏。
<img src="media/san.jpg" />
測(cè)試題
<div class="nav"> <!-- 主導(dǎo)航欄 -->
<ul>
<li><a href="#">公司首頁</a></li>
<li><a href="#">公司簡(jiǎn)介</a></li>
<li><a href="#">公司產(chǎn)品</a></li>
<li>
<a href="#">聯(lián)系我們</a>
<ul>
<li><a href="#">公司郵箱</a></li>
<li><a href="#">公司電話</a></li>
</ul>
</li>
</ul>
</div>
<div class="sitenav"> <!-- 側(cè)導(dǎo)航欄 -->
<div class="site-l">左側(cè)側(cè)導(dǎo)航欄</div>
<div class="site-r"><a href="#">登錄</a></div>
</div>
在不修改以上代碼的前提下淋叶，完成以下任務(wù)：
- 鏈接 登錄 的顏色為紅色,同時(shí)主導(dǎo)航欄里面的所有的鏈接改為橙色 (簡(jiǎn)單)
- 主導(dǎo)航欄和側(cè)導(dǎo)航欄里面文字都是14像素并且是微軟雅黑因惭。（中等)
- 主導(dǎo)航欄里面的一級(jí)菜單鏈接文字顏色為綠色。（難)
偽類選擇器
偽類選擇器用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果报亩， 比如可以選擇 第1個(gè)，第n個(gè)元素推励。
偽娘
類 .one
偽類 :link
為了和我們剛才學(xué)的類選擇器相區(qū)別父晶， 類選擇器是一個(gè)點(diǎn) 比如 .demo {} 而我們的偽類 用 2個(gè)點(diǎn) 就是 冒號(hào) 比如 :link{}
鏈接偽類選擇器
- :link /* 未訪問的鏈接 */
- :visited /* 已訪問的鏈接 */
- :hover /* 鼠標(biāo)移動(dòng)到鏈接上 */
- :active /* 選定的鏈接 */
注意寫的時(shí)候，他們的順序盡量不要顛倒 按照 lvha 的順序赞警。 love hate 愛上了討厭 記憶法 或者 lv 包包 非常 hao
a { /* a是標(biāo)簽選擇器 所有的鏈接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是鏈接偽類選擇器 鼠標(biāo)經(jīng)過 */
color: red; /* 鼠標(biāo)經(jīng)過的時(shí)候妓忍，由原來的 灰色 變成了紅色 */
}
CSS注釋
CSS規(guī)則是使用 /* 需要注釋的內(nèi)容 */ 進(jìn)行注釋的，即在需要注釋的內(nèi)容前使用 “/*” 標(biāo)記開始注釋愧旦，在內(nèi)容的結(jié)尾使用 “*/”結(jié)束世剖。
例如：
p {
font-size: 14px; /* 所有的字體是14像素大小*/
}
sublime快捷方式
sublime可以快速提高我們代碼的書寫方式
生成標(biāo)簽 直接輸入標(biāo)簽名 按tab鍵即可 比如 div 然后tab 鍵， 就可以生成 <div></div>
如果想要生成多個(gè)相同標(biāo)簽 加上 * 就可以了 比如 div*3 就可以快速生成3個(gè)div
如果有父子級(jí)關(guān)系的標(biāo)簽笤虫，可以用 > 比如 ul > li就可以了
如果有兄弟關(guān)系的標(biāo)簽旁瘫，用 + 就可以了 比如 div+p
-
如果生成帶有類名或者id名字的祖凫， 直接寫 .demo 或者 #two tab 鍵就可以了
?
標(biāo)簽顯示模式（display）
非洲黑人： 皮膚內(nèi)黑色素含量高，以吸收陽光中的紫外線酬凳，保護(hù)皮膚內(nèi)部結(jié)構(gòu)免遭損害惠况，頭發(fā)象羊毛一樣卷曲，使每根卷發(fā)周圍都有許多空隙宁仔，空隙充滿空氣稠屠，卷發(fā)有隔熱作用。
歐洲白人： 生活寒帶或著是說常年溫度較低的地緣,加上年日照時(shí)間少翎苫，身體的黑色素沉淀比較少``所以出現(xiàn)皮膚完箩、發(fā)色、瞳暈都呈現(xiàn)淺色
傳智黃人： 我中間的拉队。弊知。。 <img src="media/h.jpg" alt="" />
最重要的總結(jié)： 是為了更好的適應(yīng)環(huán)境而完成的自然選擇粱快。
同理秩彤，我們網(wǎng)頁的標(biāo)簽非常多，再不同地方會(huì)用到不同類型的標(biāo)簽事哭，以便更好的完成我們的網(wǎng)頁漫雷。
標(biāo)簽的類型(顯示模式)
HTML標(biāo)簽一般分為塊標(biāo)簽和行內(nèi)標(biāo)簽兩種類型，它們也稱塊元素和行內(nèi)元素鳍咱。具體如下：
塊級(jí)元素(block-level)
每個(gè)塊元素通常都會(huì)獨(dú)自占據(jù)一整行或多整行降盹，可以對(duì)其設(shè)置寬度、高度谤辜、對(duì)齊等屬性蓄坏，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。 霸道
常見的塊元素有<h1>~<h6>丑念、<p>涡戳、<div>、<ul>脯倚、<ol>渔彰、<li>等推正，其中<div>標(biāo)簽是最典型的塊元素恍涂。
塊級(jí)元素的特點(diǎn)：
（1）總是從新行開始
（2）高度，行高植榕、外邊距以及內(nèi)邊距都可以控制再沧。
（3）寬度默認(rèn)是容器的100%
（4）可以容納內(nèi)聯(lián)元素和其他塊元素。
行內(nèi)元素(inline-level)
行內(nèi)元素（內(nèi)聯(lián)元素）不占有獨(dú)立的區(qū)域内贮，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)产园，一般不可以設(shè)置寬度汞斧、高度、對(duì)齊等屬性什燕，常用于控制頁面中文本的樣式粘勒。
常見的行內(nèi)元素有<a>、<strong>屎即、<b>庙睡、<em>、<i>技俐、<del>乘陪、<s>、<ins>雕擂、<u>啡邑、<span>等，其中<span>標(biāo)簽最典型的行內(nèi)元素井赌。
<img src="media/wf.jpg" /> 我一樣重要
行內(nèi)元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素在一行上谤逼。
（2）高、寬無效仇穗，但水平方向的padding和margin可以設(shè)置流部，垂直方向的無效。
（3）默認(rèn)寬度就是它本身內(nèi)容的寬度纹坐。
（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素枝冀。（a特殊 a里面可以放塊級(jí)元素 ）
<img src="media/w.jpg" /> 注意：
- 只有 文字才 能組成段落 因此 p 里面不能放塊級(jí)元素，同理還有這些標(biāo)簽h1,h2,h3,h4,h5,h6,dt耘子，他們都是文字類塊級(jí)標(biāo)簽果漾，里面不能放其他塊級(jí)元素。
- 鏈接里面不能再放鏈接拴还。
- a里面可以放塊級(jí)元素
塊級(jí)元素和行內(nèi)元素區(qū)別
塊級(jí)元素的特點(diǎn)：
（1）總是從新行開始
（2）高度跨晴，行高欧聘、外邊距以及內(nèi)邊距都可以控制片林。
（3）寬度默認(rèn)是容器的100%
（4）可以容納內(nèi)聯(lián)元素和其他塊元素。
行內(nèi)元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素在一行上怀骤。
（2）高费封、寬無效，但水平方向的padding和margin可以設(shè)置蒋伦，垂直方向的無效弓摘。
（3）默認(rèn)寬度就是它本身內(nèi)容的寬度。
（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素痕届。
行內(nèi)塊元素（inline-block）
在行內(nèi)元素中有幾個(gè)特殊的標(biāo)簽——<img />韧献、<input />末患、<td>，可以對(duì)它們?cè)O(shè)置寬高和對(duì)齊屬性锤窑，有些資料可能會(huì)稱它們?yōu)樾袃?nèi)塊元素璧针。
行內(nèi)塊元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會(huì)有空白縫隙。
（2）默認(rèn)寬度就是它本身內(nèi)容的寬度渊啰。
（3）高度探橱，行高、外邊距以及內(nèi)邊距都可以控制绘证。
<img src="media/lyc.jpg" width="400" />
標(biāo)簽顯示模式轉(zhuǎn)換 display
塊轉(zhuǎn)行內(nèi)：display:inline;
行內(nèi)轉(zhuǎn)塊：display:block;
塊隧膏、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊： display: inline-block;
此階段，我們只需關(guān)心這三個(gè)嚷那，其他的是我們后面的工作胞枕。
課堂練習(xí)
1.寫 三個(gè) div 給定 100 * 100 的紅色盒子 -- 寬度 高度 背景色
2.三個(gè) span 也要求 150 * 150 綠色盒子
- 三個(gè) a 鏈接 80 * 20 藍(lán)色 盒子 要求 必須一行顯示 這三個(gè)盒子
- 鼠標(biāo)經(jīng)過3個(gè)a鏈接的時(shí)候， 背景顏色變?yōu)? 橙色 hover bgc
- 導(dǎo)航欄案例
CSS書寫規(guī)范
開始就形成良好的書寫規(guī)范魏宽，是你專業(yè)化的開始曲稼。
空格規(guī)范
【強(qiáng)制】 選擇器 與 { 之間必須包含空格。
示例： .selector { }
【強(qiáng)制】 屬性名 與之后的 : 之間不允許包含空格湖员， : 與 屬性值 之間必須包含空格贫悄。
示例：
font-size: 12px;
選擇器規(guī)范
【強(qiáng)制】 當(dāng)一個(gè) rule 包含多個(gè) selector 時(shí)，每個(gè)選擇器聲明必須獨(dú)占一行娘摔。
示例：
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}
【建議】 選擇器的嵌套層級(jí)應(yīng)不大于 3 級(jí)窄坦，位置靠后的限定條件應(yīng)盡可能精確。
示例：
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
屬性規(guī)范
【強(qiáng)制】 屬性定義必須另起一行凳寺。
示例：
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
【強(qiáng)制】 屬性定義后必須以分號(hào)結(jié)尾鸭津。
示例：
/* good */
.selector {
margin: 0;
}
/* bad */
.selector {
margin: 0
}
行高的測(cè)量
行高我們利用最多的一個(gè)地方是： 可以讓一行文本在盒子中垂直居中對(duì)齊。
做法就是： 文字的行高等于盒子的高度肠缨。
這里情況些許復(fù)雜逆趋，開始學(xué)習(xí)，我們可以先從簡(jiǎn)單地方入手學(xué)會(huì)晒奕。
上距離和下距離總是相等的闻书，因此文字看上去是垂直居中的。
如果 行高 等 height 高度 文字會(huì) 垂直居中
如果行高 大于 高度 文字會(huì) 偏下
如果行高小于高度 文字會(huì) 偏上
CSS 三大特性
層疊 繼承 優(yōu)先級(jí) 是我們學(xué)習(xí)CSS 必須掌握的三個(gè)特性脑慧。
CSS層疊性
所謂層疊性是指多種CSS樣式的疊加魄眉。
是瀏覽器處理沖突的一個(gè)能力,如果一個(gè)屬性通過兩個(gè)相同選擇器設(shè)置到同一個(gè)元素上，那么這個(gè)時(shí)候一個(gè)屬性就會(huì)將另一個(gè)屬性層疊掉
比如先給某個(gè)標(biāo)簽指定了內(nèi)部文字顏色為紅色闷袒，接著又指定了顏色為藍(lán)色坑律，此時(shí)出現(xiàn)一個(gè)標(biāo)簽指定了相同樣式不同值的情況，這就是樣式?jīng)_突囊骤。 就近原則
一般情況下晃择，如果出現(xiàn)樣式?jīng)_突冀值，則會(huì)按照CSS書寫的順序，以最后的樣式為準(zhǔn)宫屠。
- 樣式?jīng)_突池摧，遵循的原則是就近原則。 那個(gè)樣式離著結(jié)構(gòu)近激况，就執(zhí)行那個(gè)樣式作彤。
- 樣式不沖突，不會(huì)層疊
CSS最后的執(zhí)行口訣： 長江后浪推前浪乌逐，前浪死在沙灘上竭讳。
<img src="media/hai.gif" width="600" height="400" />
CSS繼承性
所謂繼承性是指書寫CSS樣式表時(shí)，子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式浙踢，如文本顏色和字號(hào)绢慢。想要設(shè)置一個(gè)可繼承的屬性，只需將它應(yīng)用于父元素即可洛波。
簡(jiǎn)單的理解就是： 子承父業(yè)胰舆。
CSS最后的執(zhí)行口訣： 龍生龍，鳳生鳳蹬挤，老鼠生的孩子會(huì)打洞缚窿。
<img src="media/shu.gif" />
注意：
恰當(dāng)?shù)厥褂美^承可以簡(jiǎn)化代碼，降低CSS樣式的復(fù)雜性焰扳。子元素可以繼承父元素的樣式（text-倦零，font-，line-這些元素開頭的都可以繼承吨悍，以及color屬性）
CSS優(yōu)先級(jí)
定義CSS樣式時(shí)扫茅，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問題育瓜。
在考慮權(quán)重時(shí)葫隙，初學(xué)者還需要注意一些特殊的情況咳燕，具體如下：
繼承樣式的權(quán)重為0阎曹。即在嵌套結(jié)構(gòu)中，不管父元素樣式的權(quán)重多大雷滚，被子元素繼承時(shí)钙态，他的權(quán)重都為0慧起，也就是說子元素定義的樣式會(huì)覆蓋繼承來的樣式。
行內(nèi)樣式優(yōu)先册倒。應(yīng)用style屬性的元素，其行內(nèi)樣式的權(quán)重非常高磺送，可以理解為遠(yuǎn)大于100驻子〔右猓總之，他擁有比上面提高的選擇器都大的優(yōu)先級(jí)崇呵。
權(quán)重相同時(shí)缤剧，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優(yōu)先級(jí)域慷，或者說排在最后的樣式優(yōu)先級(jí)最大荒辕。
CSS定義了一個(gè)!important命令，該命令被賦予最大的優(yōu)先級(jí)犹褒。也就是說不管權(quán)重如何以及樣式位置的遠(yuǎn)近抵窒，!important都具有最大優(yōu)先級(jí)。
CSS特殊性（Specificity）
關(guān)于CSS權(quán)重叠骑，我們需要一套計(jì)算公式來去計(jì)算李皇，這個(gè)就是 CSS Specificity，我們稱為CSS 特性或稱非凡性宙枷，它是一個(gè)衡量CSS值優(yōu)先級(jí)的一個(gè)標(biāo)準(zhǔn) 具體規(guī)范入如下：
specificity用一個(gè)四位的數(shù) 字串(CSS2是三位)來表示掉房，更像四個(gè)級(jí)別，值從左到右慰丛，左面的最大卓囚，一級(jí)大于一級(jí)，數(shù)位之間沒有進(jìn)制诅病，級(jí)別之間不可超越捍岳。
| 繼承或者* 的貢獻(xiàn)值 | 0,0,0,0 |
|---|---|
| 每個(gè)元素（標(biāo)簽）貢獻(xiàn)值為 | 0,0,0,1 |
| 每個(gè)類，偽類貢獻(xiàn)值為 | 0,0,1,0 |
| 每個(gè)ID貢獻(xiàn)值為 | 0,1,0,0 |
| 每個(gè)行內(nèi)樣式貢獻(xiàn)值 | 1,0,0,0 |
| 每個(gè)!important貢獻(xiàn)值 重要的 | ∞ 無窮大 |
權(quán)重是可以疊加的
比如的例子：
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
?
?
<img src="media/w.jpg" /> 注意：
1.數(shù)位之間沒有進(jìn)制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0睬隶， 所以不會(huì)存在10個(gè)div能趕上一個(gè)類選擇器的情況锣夹。
- 繼承的 權(quán)重是 0
總結(jié)優(yōu)先級(jí)：
- 使用了 !important聲明的規(guī)則。
- 內(nèi)嵌在 HTML 元素的 style屬性里面的聲明苏潜。
- 使用了 ID 選擇器的規(guī)則银萍。
- 使用了類選擇器、屬性選擇器恤左、偽元素和偽類選擇器的規(guī)則贴唇。
- 使用了元素選擇器的規(guī)則。
- 只包含一個(gè)通用選擇器的規(guī)則飞袋。
- 同一類選擇器則遵循就近原則戳气。
總結(jié)：權(quán)重是優(yōu)先級(jí)的算法，層疊是優(yōu)先級(jí)的表現(xiàn)
CSS 背景(background)
CSS 可以添加背景顏色和背景圖片巧鸭，以及來進(jìn)行圖片設(shè)置瓶您。
| background-color | 背景顏色 |
|---|---|
| background-image | 背景圖片地址 |
| background-repeat | 是否平鋪 |
| background-position | 背景位置 |
| background-attachment | 背景固定還是滾動(dòng) |
| 背景的合寫（復(fù)合屬性） | |
| background:背景顏色 背景圖片地址 背景平鋪 背景滾動(dòng) 背景位置 |
背景圖片(image)
語法：
background-image : none | url (url)
參數(shù)：
none : 無背景圖（默認(rèn)的）
url : 使用絕對(duì)或相對(duì)地址指定背景圖像
background-image 屬性允許指定一個(gè)圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。 如果圖片不重復(fù)地話，圖片覆蓋不到地地方都會(huì)被背景色填充呀袱。 如果有背景圖片平鋪贸毕，則會(huì)覆蓋背景顏色。
小技巧： 我們提倡 背景圖片后面的地址夜赵，url不要加引號(hào)明棍。
背景平鋪（repeat）
語法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
參數(shù)：
repeat : 背景圖像在縱向和橫向上平鋪（默認(rèn)的）
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
設(shè)置背景圖片時(shí)，默認(rèn)把圖片在水平和垂直方向平鋪以鋪滿整個(gè)元素寇僧。
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
<img src="media/y.png" width="600"/>
設(shè)置背景圖片時(shí)摊腋，默認(rèn)把圖片在水平和垂直方向平鋪以鋪滿整個(gè)元素。
<img src="media/q.png" width="600"/>
背景位置(position)
語法：
background-position : length || length
background-position : position || position
參數(shù)：
length : 百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長度值嘁傀。請(qǐng)參閱長度單位
position : top | center | bottom | left | center | right
說明：
設(shè)置或檢索對(duì)象的背景圖像位置兴蒸。必須先指定background-image屬性。默認(rèn)值為：(0% 0%)心包。
如果只指定了一個(gè)值类咧，該值將用于橫坐標(biāo)⌒诽冢縱坐標(biāo)將默認(rèn)為50%痕惋。第二個(gè)值將用于縱坐標(biāo)。
注意：
- position 后面是x坐標(biāo)和y坐標(biāo)娃殖。 可以使用方位名詞或者 精確單位值戳。
- 如果和精確單位和方位名字混合使用，則必須是x坐標(biāo)在前炉爆，y坐標(biāo)后面堕虹。比如 background-position: 15px top; 則 15px 一定是 x坐標(biāo) top是 y坐標(biāo)。
實(shí)際工作用的最多的芬首，就是背景圖片居中對(duì)齊了赴捞。
背景附著
語法：
background-attachment : scroll | fixed
參數(shù)：
scroll : 背景圖像是隨對(duì)象內(nèi)容滾動(dòng)
fixed : 背景圖像固定
說明：
設(shè)置或檢索背景圖像是隨對(duì)象內(nèi)容滾動(dòng)還是固定的。
背景簡(jiǎn)寫
background屬性的值的書寫順序官方并沒有強(qiáng)制標(biāo)準(zhǔn)的郁稍。為了可讀性赦政，建議大家如下寫：
background:背景顏色 背景圖片地址 背景平鋪 背景滾動(dòng) 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)
CSS3支持背景半透明的寫法語法格式是:
background: rgba(0,0,0,0.3);
最后一個(gè)參數(shù)是alpha 透明度 取值范圍 0~1之間
注意： 背景半透明是指盒子背景半透明， 盒子里面的內(nèi)容不收影響耀怜。
導(dǎo)航欄案例
使用技巧：在一行內(nèi)的盒子內(nèi)恢着，我們?cè)O(shè)定行高等于盒子的高度，就可以使文字垂直居中财破。
<head>
<meta charset="utf-8">
<style>
body {
background-color: #000;
}
a {
width: 200px;
height: 50px;
/* background-color: orange; */
display: inline-block; /* 把a(bǔ) 行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊元素 */
text-align: center; /* 文字水平居中 */
line-height: 50px; /* 我們?cè)O(shè)定行高等于盒子的高度掰派，就可以使文字垂直居中 */
color: #fff;
font-size: 22px;
text-decoration: none; /* 取消下劃線 文本裝飾 */
}
a:hover { /* 鼠標(biāo)經(jīng)過 給我們的鏈接添加背景圖片*/
background: url(images/h.png) no-repeat;
}
</style>
</head>
<body>
<a href="#">專區(qū)說明</a>
<a href="#">申請(qǐng)資格</a>
<a href="#">兌換獎(jiǎng)勵(lì)</a>
<a href="#">下載游戲</a>
</body>
盒子模型（CSS重點(diǎn)）
其實(shí)，CSS就三個(gè)大模塊： 盒子模型 左痢、 浮動(dòng) 靡羡、 定位系洛，其余的都是細(xì)節(jié)。要求這三部分亿眠，無論如何也要學(xué)的非常精通碎罚。
所謂盒子模型就是把HTML頁面中的元素看作是一個(gè)矩形的盒子磅废，也就是一個(gè)盛裝內(nèi)容的容器纳像。每個(gè)矩形都由元素的內(nèi)容、內(nèi)邊距（padding）拯勉、邊框（border）和外邊距（margin）組成竟趾。
看透網(wǎng)頁布局的本質(zhì)
網(wǎng)頁布局中，我們是如何把里面的文字宫峦，圖片岔帽，按照美工給我們的效果圖排列的整齊有序呢？
我們說過导绷，行內(nèi)元素比如 文字 類似牛奶犀勒，也需要一個(gè)盒子把他們裝起來，我們前面學(xué)過的雙標(biāo)簽都是一個(gè)盒子妥曲。有了盒子贾费，我們就可以隨意的，自由的檐盟，擺放位置了褂萧。
看透網(wǎng)頁布局的本質(zhì)： 把網(wǎng)頁元素比如文字圖片等等，放入盒子里面葵萎，然后利用CSS擺放盒子的過程导犹，就是網(wǎng)頁布局。
CSS 其實(shí)沒有太多邏輯可言 羡忘， 類似我們小時(shí)候玩的積木,我們可以自由的谎痢，隨意的擺放出我們想要的效果。
<img src="media/j.jpg" width="300" />
盒子模型（Box Model）
這里略過 老舊的ie盒子模型（IE6以下）卷雕，對(duì)不起节猿，我都沒見過IE5的瀏覽器。
首先爽蝴，我們來看一張圖沐批，來體會(huì)下什么是盒子模型。
所有的文檔元素（標(biāo)簽）都會(huì)生成一個(gè)矩形框蝎亚，我們成為元素框（element box）九孩，它描述了一個(gè)文檔元素再網(wǎng)頁布局匯總所占的位置大小。因此发框，<strong style="color: #f00;">每個(gè)盒子除了有自己大小和位置外躺彬，還影響著其他盒子的大小和位置。</strong>
盒子邊框（border）
邊框就是那層皮。 橘子皮宪拥。仿野。柚子皮。她君。橙子皮脚作。。缔刹。
語法：
border : border-width || border-style || border-color
邊框?qū)傩浴O(shè)置邊框樣式（border-style）
邊框樣式用于定義頁面中邊框的風(fēng)格球涛，常用屬性值如下：
none：沒有邊框即忽略所有邊框的寬度（默認(rèn)值）
solid：邊框?yàn)閱螌?shí)線(最為常用的)
dashed：邊框?yàn)樘摼€
dotted：邊框?yàn)辄c(diǎn)線
double：邊框?yàn)殡p實(shí)線
盒子邊框?qū)懛偨Y(jié)表
| 設(shè)置內(nèi)容 | 樣式屬性 | 常用屬性值 |
| 上邊框 | border-top-style:樣式; border-top-width:寬度;border-top-color:顏色;border-top:寬度 樣式 顏色; | |
| 下邊框 | border-bottom-style:樣式;border- bottom-width:寬度;border- bottom-color:顏色;border-bottom:寬度 樣式 顏色; | |
| 左邊框 | border-left-style:樣式; border-left-width:寬度;border-left-color:顏色;border-left:寬度 樣式 顏色; | |
| 右邊框 | border-right-style:樣式;border-right-width:寬度;border-right-color:顏色;border-right:寬度 樣式 顏色; | |
| 樣式綜合設(shè)置 | border-style:上邊 [右邊 下邊 左邊]; | none無（默認(rèn)）、solid單實(shí)線校镐、dashed虛線亿扁、dotted點(diǎn)線、double雙實(shí)線 |
| 寬度綜合設(shè)置 | border-width:上邊 [右邊 下邊 左邊]; | 像素值 |
| 顏色綜合設(shè)置 | border-color:上邊 [右邊 下邊 左邊]; | 顏色值鸟廓、#十六進(jìn)制从祝、rgb(r,g,b)、rgb(r%,g%,b%) |
| 邊框綜合設(shè)置 | border:四邊寬度 四邊樣式 四邊顏色; |
border-top: 1px solid red; /*上邊框*/
border-bottom: 2px solid green; /*下邊框*/
border-left: 1px solid blue;
border-right: 5px solid pink;
border: 1px solid red;
表格的細(xì)線邊框
以前學(xué)過的html表格邊框很粗引谜，這里只需要CSS一句話就可以美觀起來牍陌。 讓我們真的相信，CSS就是我們的白馬王子（白雪公主）煌张。
table{ border-collapse:collapse; } collapse 單詞是合并的意思
border-collapse:collapse; 表示相鄰邊框合并在一起呐赡。
內(nèi)邊距（padding）
padding屬性用于設(shè)置內(nèi)邊距。 是指 邊框與內(nèi)容之間的距離骏融。
padding-top:上內(nèi)邊距
padding-right:右內(nèi)邊距
padding-bottom:下內(nèi)邊距
padding-left:左內(nèi)邊距
<img src="media/w.jpg"/>注意： 后面跟幾個(gè)數(shù)值表示的意思是不一樣的链嘀。
| 值的個(gè)數(shù) | 表達(dá)意思 |
|---|---|
| 1個(gè)值 | padding：上下左右邊距 比如padding: 3px; 表示上下左右都是3像素 |
| 2個(gè)值 | padding: 上下邊距 左右邊距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素 |
| 3個(gè)值 | padding：上邊距 左右邊距 下邊距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
| 4個(gè)值 | padding:上內(nèi)邊距 右內(nèi)邊距 下內(nèi)邊距 左內(nèi)邊距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 順時(shí)針 |
課堂案例： 新浪導(dǎo)航
<img src="media/al.gif" />
關(guān)于盒子寬度下列正確的是（）
(A) 盒子寬：就是width的大小
(B) 盒子寬： padding-left + width + padding-right
(C) 盒子寬： border-left + width + border-right
(D) 盒子寬： border-left+ padding-left + width + padding-right + border-right
w 100 padding 10 border 5 ? 實(shí)際大小 ？ 130
3關(guān)于盒子高度下列正確的是（）
(A) 盒子高：就是height的大小
(B) 盒子高：padding-top +height + padding-bottom
(C) 盒子高：border-top + height + border-bottom
(D) 盒子高：border-top + padding-top +height + padding-bottom + border-bottom
**4**** 關(guān)于根據(jù)下列代碼計(jì)算 盒子寬高下列說法正確的是（）******
div {
? width: 200px;
? height: 200px;
? border: 1px solid #000000;
? border-top: 5px solid blue;
? padding: 50px;
? padding-left: 100px;
? }
(A) 寬度為200px 高度為200px
(B) 寬度為352px 高度為306px
(C) 寬度為302px 高度為307px
(D) 寬度為302px 高度為252px
外邊距（margin）
margin屬性用于設(shè)置外邊距档玻。 設(shè)置外邊距會(huì)在元素之間創(chuàng)建“空白”怀泊， 這段空白通常不能放置其他內(nèi)容。
margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:上外邊距
margin:上外邊距 右外邊距 下外邊距 左外邊
取值順序跟內(nèi)邊距相同误趴。
外邊距實(shí)現(xiàn)盒子居中
可以讓一個(gè)盒子實(shí)現(xiàn)水平居中霹琼，需要滿足一下兩個(gè)條件：
- 必須是塊級(jí)元素。
- 盒子必須指定了寬度（width）
然后就給左右的外邊距都設(shè)置為auto凉当，就可使塊級(jí)元素水平居中枣申。
實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁布局，示例代碼如下：
.header{ width:960px; margin:0 auto;}
文字盒子居中圖片和背景區(qū)別
- 文字水平居中是 text-align: center
- 盒子水平居中 左右margin 改為 auto
text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中 左右margin 改為 auto 就闊以了 */
- 插入圖片 我們用的最多 比如產(chǎn)品展示類
- 背景圖片我們一般用于小圖標(biāo)背景 或者 超大背景圖片
section img {
width: 200px;/* 插入圖片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入圖片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入當(dāng)圖片也是一個(gè)盒子 */
}
aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-size: 200px 210px; /* 背景圖片更改大小只能用 background-size */
background-position: 30px 50px; /* 背景圖片更該位置 我用 background-position */
}
清除元素的默認(rèn)內(nèi)外邊距
為了更方便地控制網(wǎng)頁中的元素看杭，制作網(wǎng)頁時(shí)忠藤，可使用如下代碼清除元素的默認(rèn)內(nèi)外邊距：
* {
padding:0; /* 清除內(nèi)邊距 */
margin:0; /* 清除外邊距 */
}
注意： 行內(nèi)元素是只有左右外邊距的，是沒有上下外邊距的楼雹。 內(nèi)邊距模孩，在ie6等低版本瀏覽器也會(huì)有問題尖阔。
我們盡量不要給行內(nèi)元素指定上下的內(nèi)外邊距就好了。
外邊距合并
使用margin定義塊元素的垂直外邊距時(shí)榨咐，可能會(huì)出現(xiàn)外邊距的合并驾荣。
相鄰塊元素垂直外邊距的合并
當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)蛇耀，如果上面的元素有下外邊距margin-bottom迟郎，下面的元素有上外邊距margin-top辫狼，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者龟劲。這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）胃夏。
解決方案： 避免就好了轴或。
嵌套塊元素垂直外邊距的合并
對(duì)于兩個(gè)嵌套關(guān)系的塊元素昌跌，如果父元素沒有上內(nèi)邊距及邊框，則父元素的上外邊距會(huì)與子元素的上外邊距發(fā)生合并照雁，合并后的外邊距為兩者中的較大者蚕愤，即使父元素的上外邊距為0，也會(huì)發(fā)生合并饺蚊。
<img src="media/n.png" />
解決方案：
- 可以為父元素定義1像素的上邊框或上內(nèi)邊距萍诱。
- 可以為父元素添加overflow:hidden。
待續(xù)污呼。裕坊。。燕酷。
content寬度和高度
使用寬度屬性width和高度屬性height可以對(duì)盒子的大小進(jìn)行控制籍凝。
width和height的屬性值可以為不同單位的數(shù)值或相對(duì)于父元素的百分比%，實(shí)際工作中最常用的是像素值苗缩。
大多數(shù)瀏覽器饵蒂，如Firefox、IE6及以上版本都采用了W3C規(guī)范酱讶，符合CSS規(guī)范的盒子模型的總寬度和總高度的計(jì)算原則是：
/*外盒尺寸計(jì)算（元素空間尺寸）*/
Element空間高度 = content height + padding + border + margin
Element 空間寬度 = content width + padding + border + margin
/*內(nèi)盒尺寸計(jì)算（元素實(shí)際大型硕ⅰ）*/
Element Height = content height + padding + border （Height為內(nèi)容高度）
Element Width = content width + padding + border （Width為內(nèi)容寬度）
注意：
1、寬度屬性width和高度屬性height僅適用于塊級(jí)元素泻肯，對(duì)行內(nèi)元素?zé)o效（ img 標(biāo)簽和 input除外）渊迁。
2、計(jì)算盒子模型的總高度時(shí)灶挟，還應(yīng)考慮上下兩個(gè)盒子垂直外邊距合并的情況琉朽。
3、如果一個(gè)盒子則會(huì)和父親一樣寬 占滿父親的寬度膏萧， 如果此盒子沒有給定寬度 則padding 不會(huì)影響本盒子大小漓骚。
盒子模型布局穩(wěn)定性
開始學(xué)習(xí)盒子模型蝌衔，同學(xué)們最大的困惑就是， 分不清內(nèi)外邊距的使用蝌蹂，什么情況下使用內(nèi)邊距噩斟，什么情況下使用外邊距？
答案是： 其實(shí)他們大部分情況下是可以混用的孤个。 就是說剃允，你用內(nèi)邊距也可以，用外邊距也可以齐鲤。 你覺得哪個(gè)方便斥废，就用哪個(gè)。
但是给郊，總有一個(gè)最好用的吧牡肉，我們根據(jù)穩(wěn)定性來分，建議如下：
按照 優(yōu)先使用 寬度 （width） 其次 使用內(nèi)邊距（padding） 再次 外邊距（margin）淆九。
width > padding > margin
原因：
margin 會(huì)有外邊距合并 還有 ie6下面margin 加倍的bug（討厭）所以最后使用统锤。
padding 會(huì)影響盒子大小， 需要進(jìn)行加減計(jì)算（麻煩） 其次使用炭庙。
-
width 沒有問題（嗨皮）我們經(jīng)常使用寬度剩余法 高度剩余法來做饲窿。
?
圓角邊框(CSS3)
從此以后，我們的世界不只有矩形焕蹄。radius 半徑（距離）
語法格式：
border-radius: 50%; 讓一個(gè)正方形 變成圓圈
盒子陰影(CSS3)
語法格式：
box-shadow:水平陰影 垂直陰影 模糊距離（虛實(shí)） 陰影尺寸（影子大杏庑邸） 陰影顏色 內(nèi)/外陰影；
[圖片上傳失敗...(image-5c80de-1527494961605)]
- 前兩個(gè)屬性是必須寫的腻脏。其余的可以省略鸦泳。
- 外陰影 (outset) 但是不能寫 默認(rèn) 想要內(nèi)陰影 inset
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顏色 內(nèi)/外陰影迹卢； */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}
浮動(dòng)(float)
普通流(normal flow)
這個(gè)單詞很多人翻譯為 文檔流 辽故， 字面翻譯 普通流 或者標(biāo)準(zhǔn)流都可以。
前面我們說過腐碱，網(wǎng)頁布局的核心誊垢，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置症见？
CSS的定位機(jī)制有3種：普通流（標(biāo)準(zhǔn)流）喂走、浮動(dòng)和定位。
html語言當(dāng)中另外一個(gè)相當(dāng)重要的概念----------標(biāo)準(zhǔn)流谋作！或者普通流芋肠。普通流實(shí)際上就是一個(gè)網(wǎng)頁內(nèi)標(biāo)簽元素正常從上到下，從左到右排列順序的意思遵蚜，比如塊級(jí)元素會(huì)獨(dú)占一行帖池，行內(nèi)元素會(huì)按順序依次前后排列奈惑；按照這種大前提的布局排列之下絕對(duì)不會(huì)出現(xiàn)例外的情況叫做普通流布局。
<img src="media/t.jpg" />
浮動(dòng)(float)
浮動(dòng)最早是用來控制圖片睡汹，以便達(dá)到其他元素（特別是文字）實(shí)現(xiàn)“環(huán)繞”圖片的效果肴甸。
后來，我們發(fā)現(xiàn)浮動(dòng)有個(gè)很有意思的事情：就是讓任何盒子可以一行排列,因此我們就慢慢的偏離主題囚巴，用浮動(dòng)的特性來布局了原在。（CSS3已經(jīng)我們真正意義上的網(wǎng)頁布局，具體CSS3我們會(huì)詳細(xì)解釋）
什么是浮動(dòng)彤叉？
元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)標(biāo)準(zhǔn)流的控制庶柿，移動(dòng)到其父元素中指定位置的過程。
在CSS中秽浇，通過float屬性來定義浮動(dòng)浮庐，其基本語法格式如下：
選擇器{float:屬性值;}
| 屬性值 | 描述 |
|---|---|
| left | 元素向左浮動(dòng) |
| right | 元素向右浮動(dòng) |
| none | 元素不浮動(dòng)（默認(rèn)值） |
浮動(dòng)詳細(xì)內(nèi)幕特性
浮動(dòng)脫離標(biāo)準(zhǔn)流，====脫標(biāo)==== 不占位置兼呵，會(huì)影響標(biāo)準(zhǔn)流兔辅。浮動(dòng)只有左右浮動(dòng)。
1. 浮動(dòng)首先創(chuàng)建包含塊的概念（包裹）击喂。就是說， 浮動(dòng)的元素總是找理它最近的父級(jí)元素對(duì)齊碰辅。但是不會(huì)超出內(nèi)邊距的范圍懂昂。
<img src="media/one.jpg" width="500" />
2.一個(gè)父盒子里面的子盒子，如果其中一個(gè)子級(jí)有浮動(dòng)的没宾，則其他子級(jí)都需要浮動(dòng)凌彬。這樣才能一行對(duì)齊顯示。
3. 元素添加浮動(dòng)后循衰，元素會(huì)具有行內(nèi)塊元素的特性铲敛。元素的大小完全取決于定義的大小或者默認(rèn)的內(nèi)容多少浮動(dòng)根據(jù)元素書寫的位置來顯示相應(yīng)的浮動(dòng)。
總結(jié)： 浮動(dòng) --->
浮動(dòng)的目的就是為了讓多個(gè)塊級(jí)元素同一行上顯示会钝。 最核心的關(guān)鍵點(diǎn)就是 怎么排列的伐蒋， 是否占有位置
float 浮 漏 特
浮： 加了浮動(dòng)的元素盒子是浮起來的迁酸，漂浮在其他的標(biāo)準(zhǔn)流盒子上面先鱼。
漏： 加了浮動(dòng)的盒子，不占位置的奸鬓，它浮起來了焙畔，它原來的位置漏 給了標(biāo)準(zhǔn)流的盒子。
特： 特別注意串远，首先浮動(dòng)的盒子需要和標(biāo)準(zhǔn)流的父級(jí)搭配使用宏多， 其次 特別的注意浮動(dòng)可以使元素顯示模式體現(xiàn)為行內(nèi)塊特性儿惫。
版心和布局流程
閱讀報(bào)紙時(shí)容易發(fā)現(xiàn)，雖然報(bào)紙中的內(nèi)容很多伸但，但是經(jīng)過合理地排版姥闪，版面依然清晰、易讀砌烁。同樣筐喳，在制作網(wǎng)頁時(shí)，要想使頁面結(jié)構(gòu)清晰函喉、有條理避归，也需要對(duì)網(wǎng)頁進(jìn)行“排版”。
“版心”(可視區(qū)) 是指網(wǎng)頁中主體內(nèi)容所在的區(qū)域管呵。一般在瀏覽器窗口中水平居中顯示梳毙，常見的寬度值為960px、980px捐下、1000px账锹、1200px等。
布局流程
為了提高網(wǎng)頁制作的效率坷襟，布局時(shí)通常需要遵守一定的布局流程奸柬，具體如下：
1、確定頁面的版心（可視區(qū)）婴程。
2廓奕、分析頁面中的行模塊，以及每個(gè)行模塊中的列模塊档叔。
3桌粉、制作HTML結(jié)構(gòu) 。
4衙四、CSS初始化铃肯，然后開始運(yùn)用盒子模型的原理，通過DIV+CSS布局來控制網(wǎng)頁的各個(gè)模塊传蹈。
一列固定寬度且居中
<img src="media/yl.jpg" width="400" />
最普通的押逼，最為常用的結(jié)構(gòu)
兩列左窄右寬型
<img src="media/ll.jpg" width="400" />
比如小米 <a target="_blank"> 小米官網(wǎng) </a>
通欄平均分布型
<img src="media/tl.jpg" width="600" />
比如錘子 <a target="_blank"> 錘子官網(wǎng) </a>
清除浮動(dòng)
人生就像乘坐北京地鐵一號(hào)線：
途經(jīng)國貿(mào)，羨慕繁華卡睦；
途經(jīng)天安門宴胧，幻想權(quán)力；
途經(jīng)金融街表锻，夢(mèng)想發(fā)財(cái)恕齐；
經(jīng)過公主墳，遙想華麗家族瞬逊；
經(jīng)過玉泉路显歧，依然雄心勃勃…
這時(shí)仪或，有個(gè)聲音飄然入耳:乘客你好,八寶山馬上就要到了！
頓時(shí)醒悟：人生苦短士骤，有始有終范删。
好比我們的浮動(dòng)，有浮動(dòng)開始拷肌，則就應(yīng)該有浮動(dòng)結(jié)束到旦。
為什么要清除浮動(dòng)
我們前面說過，浮動(dòng)本質(zhì)是用來做一些文字混排效果的巨缘，但是被我們拿來做布局用添忘，則會(huì)有很多的問題出現(xiàn)， 但是若锁，你不能說浮動(dòng)不好 <img src="media/wq.jpg" height="100" />搁骑。
由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對(duì)后面的元素排版產(chǎn)生影響又固，為了解決這些問題仲器，此時(shí)就需要在該元素中清除浮動(dòng)。
準(zhǔn)確地說仰冠，并不是清除浮動(dòng)乏冀，而是清除浮動(dòng)后造成的影響
如果浮動(dòng)一開始就是一個(gè)美麗的錯(cuò)誤，那么請(qǐng)用正確的方法挽救它沪停。
清除浮動(dòng)本質(zhì)
清除浮動(dòng)主要為了解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0 的問題煤辨。
<img src="media/n.jpg" />
<img src="media/no.jpg" />
<img src="media/kc.jpg" />
清除浮動(dòng)的方法
其實(shí)本質(zhì)叫做閉合浮動(dòng)更好一些, 記住，清除浮動(dòng)就是把浮動(dòng)的盒子圈到里面木张，讓父盒子閉合出口和入口不讓他們出來影響其他元素。
在CSS中，clear屬性用于清除浮動(dòng)，其基本語法格式如下：
選擇器{clear:屬性值;} clear 清除
| 屬性值 | 描述 |
|---|---|
| left | 不允許左側(cè)有浮動(dòng)元素（清除左側(cè)浮動(dòng)的影響） |
| right | 不允許右側(cè)有浮動(dòng)元素（清除右側(cè)浮動(dòng)的影響） |
| both | 同時(shí)清除左右兩側(cè)浮動(dòng)的影響 |
額外標(biāo)簽法
是W3C推薦的做法是通過在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽例如 <div style=”clear:both”></div>州袒，或則其他標(biāo)簽br等亦可筋岛。
優(yōu)點(diǎn)： 通俗易懂，書寫方便
缺點(diǎn)： 添加許多無意義的標(biāo)簽慌盯，結(jié)構(gòu)化較差。 我只能說，w3c你推薦的方法我不接受育拨，你不值得擁有。欢摄。熬丧。
父級(jí)添加overflow屬性方法
可以通過觸發(fā)BFC的方式，可以實(shí)現(xiàn)清除浮動(dòng)效果怀挠。（BFC后面講解）
可以給父級(jí)添加： overflow為 hidden|auto|scroll 都可以實(shí)現(xiàn)析蝴。
優(yōu)點(diǎn)： 代碼簡(jiǎn)潔
缺點(diǎn)： 內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉害捕，無法顯示需要溢出的元素。
使用after偽元素清除浮動(dòng)
:after 方式為空元素的升級(jí)版闷畸，好處是不用單獨(dú)加標(biāo)簽了
使用方法：
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6尝盼、7 專有 */
優(yōu)點(diǎn)： 符合閉合浮動(dòng)思想 結(jié)構(gòu)語義化正確
缺點(diǎn)： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout佑菩。
代表網(wǎng)站： 百度盾沫、淘寶網(wǎng)、網(wǎng)易等
<img src="media/163.png" style="border: 1px dashed #3c3c3c;"/>
注意： content:"" 盡量不帶點(diǎn)
使用before和after雙偽元素清除浮動(dòng)
使用方法：
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 這句話可以出發(fā)BFC BFC可以清除浮動(dòng),BFC我們后面講 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
優(yōu)點(diǎn)： 代碼更簡(jiǎn)潔
缺點(diǎn)： 由于IE6-7不支持:after殿漠，使用 zoom:1觸發(fā) hasLayout赴精。
代表網(wǎng)站： 小米、騰訊等
Photoshop基本使用
PS界面組成：
ctrl + r 顯示隱藏標(biāo)尺 右擊 標(biāo)尺 --- 把里面的單位一律改為像素
ctrl+ d 取消選區(qū)
菜單欄凸舵、選項(xiàng)欄祖娘、工具欄、浮動(dòng)面板（拖拽名稱啊奄，可單獨(dú)操作面板）渐苏、繪圖窗口
? 窗口菜單，可顯示隱藏所有面板
工作區(qū)：（新建）
調(diào)整浮動(dòng)面板
<img src="media/jiemian.png"/>
圖層操作(重點(diǎn))
圖層面板快捷鍵 F7 其實(shí)圖層就是一張張透明的紙 可以實(shí)現(xiàn)疊加問題菇夸。
<img src="media/tuceng.png" />
圖層選擇： 使用移動(dòng)工具V
1琼富、圖層縮覽圖判斷
2、按住CTRL,在目標(biāo)圖像上單擊
3庄新、將光標(biāo)放置在目標(biāo)圖像上右鍵鞠眉，選擇圖層名稱
圖層面板中加選圖層：
1、按SHIFT择诈，單擊另一目標(biāo)圖層 中間所有圖層被選中
2械蹋、按CTRL，單擊另一目標(biāo)圖層 只選中目標(biāo)圖層
復(fù)制圖層：選中目標(biāo)圖層后（移動(dòng)工具狀態(tài)下）
1羞芍、按ALT拖拽圖像
2哗戈、CTRL+J （重合）
案例： 擺放一個(gè)自行車
<img src="media/bike.jpg" />
圖層編組
選中目標(biāo)圖層，CTRL+G
取消編組：CTRL+SHIFT+G
雙擊圖層名稱可重新命名
雙擊組名稱荷科，可命名組
移動(dòng)工具V選擇組或圖層時(shí)唯咬，需設(shè)置選項(xiàng)欄
[圖片上傳失敗...(image-89c258-1527494961605)]
圖層上下位置移動(dòng)
1、選中目標(biāo)圖層畏浆，在圖層面拖拽
2胆胰、CTRL+] 向上移動(dòng)圖層
? CTRL+[ 向下移動(dòng)圖層
3、CTRL+SHIFT+] 圖層置頂
? CTRL+SHIFT+[ 圖層置底
移動(dòng)選區(qū)或圖像時(shí)：
移動(dòng)過程中刻获，沒釋放鼠標(biāo)蜀涨，按住SHIFT，可同一水平線、同一垂線勉盅、45度移動(dòng)佑颇。
ps中的撤銷操作是：
ctrl+z 撤銷一步
ctrl+alt+z 撤銷多步
Photoshop 切圖
PS切圖 可以 分為 手動(dòng) 利用切片切圖 以及 利用PS的插件快速切圖
切片工具
[圖片上傳失敗...(image-590ac6-1527494961605)]
利用切片工具手動(dòng)劃出
圖層菜單---新建基于圖層的切片
-
利用標(biāo)尺 基于參考線的切片 （選擇切片工具）
?
[圖片上傳失敗...(image-d4e276-1527494961605)]
先選個(gè)一個(gè)整個(gè)的切片， 切片選擇工具-- 屬性面板中有 “劃分” --可以等分?jǐn)?shù)平分切圖
導(dǎo)出切片： 文件-- 存儲(chǔ)為web設(shè)備所用格式
輔助線和切片使用及清除
視圖菜單-- 清除 輔助線/ 清除切片
切圖插件
Cutterman是一款運(yùn)行在photoshop中的插件草娜，能夠自動(dòng)將你需要的圖層進(jìn)行輸出挑胸， 以替代傳統(tǒng)的手工 "導(dǎo)出web所用格式" 以及使用切片工具進(jìn)行挨個(gè)切圖的繁瑣流程。 它支持各種各樣的圖片尺寸宰闰、格式茬贵、形態(tài)輸出，方便你在pc移袍、ios解藻、Android等端上使用。 它不需要你記住一堆的語法葡盗、規(guī)則螟左，純點(diǎn)擊操作，方便觅够、快捷胶背，易于上手。
官網(wǎng): http://www.cutterman.cn/zh/cutterman
注意： cutterman插件要求你的ps 必須是完整版喘先，不能是綠色版钳吟，所以大家需要從新安裝完整版本。
<img src="media/sample1.gif" />
項(xiàng)目案例： 云道頁面
案例練習(xí)目的是總結(jié)以前的css和html
還有ps的使用窘拯。
制作步驟：
- 準(zhǔn)備相關(guān)文件红且。（內(nèi)部樣式表) html文件(index.html) 圖片文件
- 準(zhǔn)備CSS 初始化。 書寫結(jié)構(gòu)和樣式
- 確定版心（是1200像素)和各個(gè)模塊涤姊。
定位(position)
background-position 背景定位
如果暇番，說浮動(dòng)， 關(guān)鍵在一個(gè) “浮” 字上面思喊， 那么 我們的定位奔誓，關(guān)鍵在于一個(gè) “位” 上。
PS: 定位是我們CSS算是數(shù)一數(shù)二難點(diǎn)的了搔涝，但是，你務(wù)必要學(xué)好它和措，我們CSS離不開定位庄呈，特別是后面的js特效，天天和定位打交道派阱。不要抵觸它诬留，反而要愛上它，它可以讓我們工作更加輕松哦！
為什么要用定位文兑？
那么定位盒刚，最長運(yùn)用的場(chǎng)景再那里呢？ 來看幾幅圖片绿贞，你一定會(huì)有感悟因块！
第一幅圖， 小黃色塊可以再圖片上移動(dòng)：
<img src="media/1.gif" style="border: 1px dashed #3c3c3c;"/>
第二幅圖籍铁， 左右箭頭壓住圖片：
<img src="media/2.gif" style="border: 1px dashed #3c3c3c;"/>
第三幅圖, hot 再盒子外面多出一塊涡上，更加突出：
<img src="media/it.png" style="border: 1px dashed #3c3c3c;"/>
以上三個(gè)小地方，如果用標(biāo)準(zhǔn)流或者浮動(dòng)拒名，實(shí)現(xiàn)會(huì)比較復(fù)雜或者難以實(shí)現(xiàn)吩愧，此時(shí)我們用定位來做，just soso增显！
元素的定位屬性
元素的定位屬性主要包括定位模式和邊偏移兩部分雁佳。
1、邊偏移
| 邊偏移屬性 | 描述 |
|---|---|
| top | 頂端偏移量同云，定義元素相對(duì)于其父元素上邊線的距離 |
| bottom | 底部偏移量糖权，定義元素相對(duì)于其父元素下邊線的距離 |
| left | 左側(cè)偏移量，定義元素相對(duì)于其父元素左邊線的距離 |
| right | 右側(cè)偏移量梢杭，定義元素相對(duì)于其父元素右邊線的距離 |
也就說温兼，以后定位要和這邊偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
2武契、定位模式(定位的分類)
在CSS中募判，position屬性用于定義元素的定位模式，其基本語法格式如下：
選擇器{position:屬性值;}
position屬性的常用值
| 值 | 描述 |
|---|---|
| static | 自動(dòng)定位（默認(rèn)定位方式） |
| relative | 相對(duì)定位咒唆，相對(duì)于其原文檔流的位置進(jìn)行定位 |
| absolute | 絕對(duì)定位届垫，相對(duì)于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位 |
| fixed | 固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位 |
靜態(tài)定位(static)
靜態(tài)定位是所有元素的默認(rèn)定位方式全释，當(dāng)position屬性的取值為static時(shí)装处，可以將元素定位于靜態(tài)位置。 所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中默認(rèn)的位置浸船。
上面的話翻譯成白話： 就是網(wǎng)頁中所有元素都默認(rèn)的是靜態(tài)定位哦妄迁！ 其實(shí)就是標(biāo)準(zhǔn)流的特性。
在靜態(tài)定位狀態(tài)下李命，無法通過邊偏移屬性（top登淘、bottom、left或right）來改變?cè)氐奈恢谩?/p>
PS： 靜態(tài)定位其實(shí)沒啥可說的封字。
靜態(tài)定位唯一的用處： 就是 取消定位黔州。 position: static;
相對(duì)定位relative(自戀型)
小笑話：
剛剛看到一個(gè)超級(jí)超級(jí)帥的帥哥耍鬓，看得我都忍不住想和他搞基了。世間怎會(huì)有如此之完美的男人流妻。我和他就這樣一動(dòng)不動(dòng)的對(duì)視著牲蜀，就仿佛一見鐘情。時(shí)間也在這一瞬間停止了绅这。直到我的手麻了涣达。才戀戀不舍的放下鏡子。君躺。峭判。。
<img src="media/smail.gif" width="100"/>
相對(duì)定位是將元素相對(duì)于它在標(biāo)準(zhǔn)流中的位置進(jìn)行定位棕叫，當(dāng)position屬性的取值為relative時(shí)林螃，可以將元素定位于相對(duì)位置。
對(duì)元素設(shè)置相對(duì)定位后俺泣，可以通過邊偏移屬性改變?cè)氐奈恢昧迫希撬谖臋n流中的位置仍然保留。如下圖所示伏钠，即是一個(gè)相對(duì)定位的效果展示：
<img src="media/r.png" />
注意：
- 相對(duì)定位最重要的一點(diǎn)是横漏，它可以通過邊偏移移動(dòng)位置，但是原來的所占的位置熟掂，繼續(xù)占有缎浇。
- 其次，每次移動(dòng)的位置赴肚，是以自己的左上角為基點(diǎn)移動(dòng)（相對(duì)于自己來移動(dòng)位置）
就是說素跺，相對(duì)定位的盒子仍在標(biāo)準(zhǔn)流中，它后面的盒子仍以標(biāo)準(zhǔn)流方式對(duì)待它誉券。（相對(duì)定位不脫標(biāo)）
如果說浮動(dòng)的主要目的是 讓多個(gè)塊級(jí)元素一行顯示指厌，那么定位的主要價(jià)值就是 移動(dòng)位置， 讓盒子到我們想要的位置上去踊跟。
絕對(duì)定位absolute (拼爹型)
小笑話：
吃早飯時(shí)踩验，老婆往兒子碗里放了兩個(gè)煎蛋，兒子全給了我商玫，還一本正經(jīng)地說：“爸爸箕憾，多吃點(diǎn)，男人養(yǎng)家不容易拳昌〔蘧牛” <br/>
我一陣感動(dòng)，剛想夸他兩句地回。
兒子接著說：“以后全靠你讓我拼爹了扁远！”
<img src="media/smail.gif" width="100"/>
[注意] 如果文檔可滾動(dòng)，絕對(duì)定位元素會(huì)隨著它滾動(dòng)刻像，因?yàn)樵刈罱K會(huì)相對(duì)于正常流的某一部分定位畅买。
當(dāng)position屬性的取值為absolute時(shí)，可以將元素的定位模式設(shè)置為絕對(duì)定位细睡。
注意： 絕對(duì)定位最重要的一點(diǎn)是谷羞，它可以通過邊偏移移動(dòng)位置，但是它完全脫標(biāo)溜徙，完全不占位置湃缎。
父級(jí)沒有定位
若所有父元素都沒有定位，以瀏覽器當(dāng)前屏幕為準(zhǔn)對(duì)齊(document文檔)蠢壹。
<img src="media/ab.png" />
父級(jí)有定位
絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位（絕對(duì)嗓违、固定或相對(duì)定位）的父元素（祖先）進(jìn)行定位。
<img src="media/ab1.png" />
子絕父相
這個(gè)“子絕父相”太重要了图贸，是我們學(xué)習(xí)定位的口訣蹂季，時(shí)時(shí)刻刻記住的。
這句話的意思是 子級(jí)是絕對(duì)定位的話疏日， 父級(jí)要用相對(duì)定位偿洁。
首先， 我們說下帜平， 絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位絕對(duì)塞淹、固定或相對(duì)定位）的父元素（祖先）進(jìn)行定位惩嘉。
就是說， 子級(jí)是絕對(duì)定位宾肺，父親只要是定位即可（不管父親是絕對(duì)定位還是相對(duì)定位，甚至是固定定位都可以）鹃唯，就是說爱榕， 子絕父絕，子絕父相都是正確的坡慌。
但是黔酥，在我們網(wǎng)頁布局的時(shí)候， 最常說的 子絕父相是怎么來的呢洪橘？ 請(qǐng)看如下圖：
<img src="media/zi.png" style="border: 1px dashed #3c3c3c;"/>
所以跪者，我們可以得出如下結(jié)論：
因?yàn)樽蛹?jí)是絕對(duì)定位，不會(huì)占有位置熄求， 可以放到父盒子里面的任何一個(gè)地方渣玲。
父盒子布局時(shí)，需要占有位置弟晚，因此父親只能是 相對(duì)定位.
這就是子絕父相的由來忘衍。
絕對(duì)定位的盒子水平/垂直居中
普通的盒子是左右margin 改為 auto就可逾苫， 但是對(duì)于絕對(duì)定位就無效了
定位的盒子也可以水平或者垂直居中，有一個(gè)算法枚钓。
首先left 50% 父盒子的一半大小
-
然后走自己外邊距負(fù)的一半值就可以了 margin-left铅搓。
?
固定定位fixed(認(rèn)死理型)
固定定位是絕對(duì)定位的一種特殊形式，類似于 正方形是一個(gè)特殊的 矩形搀捷。它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素星掰。當(dāng)position屬性的取值為fixed時(shí)，即可將元素的定位模式設(shè)置為固定定位嫩舟。
當(dāng)對(duì)元素設(shè)置固定定位后氢烘，它將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來定義自己的顯示位置家厌。不管瀏覽器滾動(dòng)條如何滾動(dòng)也不管瀏覽器窗口的大小如何變化播玖，該元素都會(huì)始終顯示在瀏覽器窗口的固定位置。
固定定位有兩點(diǎn)：
- 固定定位的元素跟父親沒有任何關(guān)系像街，只認(rèn)瀏覽器黎棠。
- 固定定位完全脫標(biāo)，不占有位置镰绎，不隨著滾動(dòng)條滾動(dòng)脓斩。
記憶法： 就類似于孫猴子， 無父無母畴栖，好不容易找到一個(gè)可靠的師傅（瀏覽器）随静，就聽的師傅的，別的都不聽吗讶。
<img src="media/sun.jpg" width="100">
ie6等低版本瀏覽器不支持固定定位燎猛。
疊放次序（z-index）
當(dāng)對(duì)多個(gè)元素同時(shí)設(shè)置定位時(shí)，定位元素之間有可能會(huì)發(fā)生重疊照皆。
<img src="media/zzz.png" />
在CSS中重绷，要想調(diào)整重疊定位元素的堆疊順序，可以對(duì)定位元素應(yīng)用z-index層疊等級(jí)屬性膜毁，其取值可為正整數(shù)昭卓、負(fù)整數(shù)和0。
比如： z-index: 2; font-weight: 700
注意：
z-index的默認(rèn)屬性值是0瘟滨，取值越大候醒，定位元素在層疊元素中越居上。
如果取值相同杂瘸，則根據(jù)書寫順序倒淫，后來居上。
后面數(shù)字一定不能加單位败玉。
只有相對(duì)定位敌土，絕對(duì)定位镜硕，固定定位有此屬性，其余標(biāo)準(zhǔn)流纯赎，浮動(dòng)谦疾，靜態(tài)定位都無此屬性，亦不可指定此屬性犬金。
四種定位總結(jié)
| 定位模式 | 是否脫標(biāo)占有位置 | 是否可以使用邊偏移 | 移動(dòng)位置基準(zhǔn) |
|---|---|---|---|
| 靜態(tài)static | 不脫標(biāo)，正常模式 | 不可以 | 正常模式 |
| 相對(duì)定位relative | 脫標(biāo)六剥，占有位置 | 可以 | 相對(duì)自身位置移動(dòng)（自戀型） |
| 絕對(duì)定位absolute | 完全脫標(biāo)晚顷，不占有位置 | 可以 | 相對(duì)于定位父級(jí)移動(dòng)位置（拼爹型） |
| 固定定位fixed | 完全脫標(biāo)，不占有位置 | 可以 | 相對(duì)于瀏覽器移動(dòng)位置（認(rèn)死理型） |
定位模式轉(zhuǎn)換
跟 浮動(dòng)一樣疗疟， 元素添加了 絕對(duì)定位和固定定位之后该默， 元素模式也會(huì)發(fā)生轉(zhuǎn)換， 都轉(zhuǎn)換為 行內(nèi)塊模式策彤，
行內(nèi)塊 的寬度和高度 跟內(nèi)容有關(guān)系
** 因此 比如 行內(nèi)元素 如果添加了 絕對(duì)定位或者 固定定位后 浮動(dòng)后栓袖，可以不用轉(zhuǎn)換模式，直接給高度和寬度就可以了店诗。**
CSS高級(jí)技巧
元素的顯示與隱藏
在CSS中有三個(gè)顯示和隱藏的單詞比較常見裹刮，我們要區(qū)分開，他們分別是 display visibility 和 overflow庞瘸。
他們的主要目的是讓一個(gè)元素在頁面中消失捧弃，但是不在文檔源碼中刪除。 最常見的是網(wǎng)站廣告擦囊，當(dāng)我們點(diǎn)擊類似關(guān)閉不見了违霞，但是我們重新刷新頁面，它們又會(huì)出現(xiàn)和你玩躲貓貓Ｋ渤 买鸽！
display 顯示
display 設(shè)置或檢索對(duì)象是否及如何顯示。
display : none 隱藏對(duì)象 與它相反的是 display:block 除了轉(zhuǎn)換為塊級(jí)元素之外贯被，同時(shí)還有顯示元素的意思眼五。
特點(diǎn)： 隱藏之后，不再保留位置刃榨。
visibility 可見性
設(shè)置或檢索是否顯示對(duì)象弹砚。
visible : 對(duì)象可視
hidden : 對(duì)象隱藏
特點(diǎn)： 隱藏之后，繼續(xù)保留原有位置枢希。（停職留薪）
overflow 溢出
檢索或設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定高度及寬度時(shí)如何管理內(nèi)容桌吃。
visible : 不剪切內(nèi)容也不添加滾動(dòng)條。
auto : 超出自動(dòng)顯示滾動(dòng)條苞轿，不超出不顯示滾動(dòng)條
hidden : 不顯示超過對(duì)象尺寸的內(nèi)容茅诱，超出的部分隱藏掉
scroll : 不管超出內(nèi)容否逗物，總是顯示滾動(dòng)條
CSS用戶界面樣式
所謂的界面樣式， 就是更改一些用戶操作樣式瑟俭， 比如 更改用戶的鼠標(biāo)樣式翎卓， 表單輪廓等。但是比如滾動(dòng)條的樣式改動(dòng)受到了很多瀏覽器的抵制摆寄，因此我們就放棄了失暴。 防止表單域拖拽
鼠標(biāo)樣式cursor
設(shè)置或檢索在對(duì)象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。
cursor : default 小白 | pointer 小手 | move 移動(dòng) | text 文本
鼠標(biāo)放我身上查看效果哦：
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移動(dòng)</li>
<li style="cursor:text">我是文本</li>
</ul>
盡量不要用hand 因?yàn)?火狐不支持 pointer ie6以上都支持的盡量用
輪廓 outline
是繪制于元素周圍的一條線微饥，位于邊框邊緣的外圍逗扒，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我們都不關(guān)心可以設(shè)置多少欠橘，我們平時(shí)都是去掉的矩肩。
最直接的寫法是 ： outline: 0; 或者 outline: none;
<input type="text" style="outline: 0;"/>
防止拖拽文本域resize
resize：none 這個(gè)單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動(dòng) 文本域。
右下角可以拖拽：
<textarea></textarea>
右下角不可以拖拽：
<textarea style="resize: none;"></textarea>
vertical-align 垂直對(duì)齊
以前我們講過讓帶有寬度的塊級(jí)元素居中對(duì)齊肃续，是margin: 0 auto;
以前我們還講過讓文字居中對(duì)齊黍檩，是 text-align: center;
但是我們從來沒有講過有垂直居中的屬性， 我們的媽媽一直很擔(dān)心我們的垂直居中怎么做始锚。
vertical-align 垂直對(duì)齊刽酱， 這個(gè)看上去很美好的一個(gè)屬性， 實(shí)際有著不可捉摸的脾氣疼蛾，否則我們也不會(huì)這么晚來講解肛跌。
<img src="media/xian.jpg" />
vertical-align : baseline |top |middle |bottom
設(shè)置或檢索對(duì)象內(nèi)容的垂直對(duì)其方式。
vertical-align 不影響塊級(jí)元素中的內(nèi)容對(duì)齊察郁，它只針對(duì)于 行內(nèi)元素或者行內(nèi)塊元素衍慎，特別是行內(nèi)塊元素， 通常用來控制圖片/表單與文字的對(duì)齊皮钠。
[圖片上傳失敗...(image-f983b5-1527494961605)]
圖片稳捆、表單和文字對(duì)齊
所以我們知道，我們可以通過vertical-align 控制圖片和文字的垂直關(guān)系了麦轰。 默認(rèn)的圖片會(huì)和文字基線對(duì)齊乔夯。
去除圖片底側(cè)空白縫隙
有個(gè)很重要特性你要記住： 圖片或者表單等行內(nèi)塊元素款侵，他的底線會(huì)和父級(jí)盒子的基線對(duì)齊末荐。這樣會(huì)造成一個(gè)問題，就是圖片底側(cè)會(huì)有一個(gè)空白縫隙新锈。
<img src="media/3.jpg" />
解決的方法就是：
- 給img vertical-align:middle | top等等甲脏。 讓圖片不要和基線對(duì)齊。<img src="media/1633.png" width="500" style="border: 1px dashed #ccc;" />
- 給img 添加 display：block; 轉(zhuǎn)換為塊級(jí)元素就不會(huì)存在問題了。<img src="media/sina1.png" width="500" style="border: 1px dashed #ccc;"/>
溢出的文字隱藏
white-space
white-space設(shè)置或檢索對(duì)象內(nèi)文本顯示方式块请。通常我們使用于強(qiáng)制一行顯示內(nèi)容
normal : 默認(rèn)處理方式
nowrap : 強(qiáng)制在同一行內(nèi)顯示所有文本娜氏，直到文本結(jié)束或者遭遇br標(biāo)簽對(duì)象才換行。
可以處理中文
text-overflow 文字溢出
text-overflow : clip | ellipsis
設(shè)置或檢索是否使用一個(gè)省略標(biāo)記（...）標(biāo)示對(duì)象內(nèi)文本的溢出
clip : 不顯示省略標(biāo)記（...）墩新，而是簡(jiǎn)單的裁切
ellipsis : 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）
注意一定要首先強(qiáng)制一行內(nèi)顯示贸弥，再次和overflow屬性 搭配使用
CSS精靈技術(shù)（sprite） 小妖精 雪碧
精靈技術(shù)產(chǎn)生的背景
<img src="media/sss.png" />
圖所示為網(wǎng)頁的請(qǐng)求原理圖，當(dāng)用戶訪問一個(gè)網(wǎng)站時(shí)海渊，需要向服務(wù)器發(fā)送請(qǐng)求绵疲，網(wǎng)頁上的每張圖像都要經(jīng)過一次請(qǐng)求才能展現(xiàn)給用戶。
然而臣疑，一個(gè)網(wǎng)頁中往往會(huì)應(yīng)用很多小的背景圖像作為修飾最岗，當(dāng)網(wǎng)頁中的圖像過多時(shí)，服務(wù)器就會(huì)頻繁地接受和發(fā)送請(qǐng)求朝捆，這將大大降低頁面的加載速度。為了有效地減少服務(wù)器接受和發(fā)送請(qǐng)求的次數(shù)懒豹，提高頁面的加載速度芙盘，出現(xiàn)了CSS精靈技術(shù)（也稱CSS Sprites、CSS雪碧）脸秽。
精靈技術(shù)本質(zhì)
簡(jiǎn)單地說儒老，CSS精靈是一種處理網(wǎng)頁背景圖像的方式。它將一個(gè)頁面涉及到的所有零星背景圖像都集中到一張大圖中去记餐，然后將大圖應(yīng)用于網(wǎng)頁驮樊，這樣，當(dāng)用戶訪問該頁面時(shí)片酝，只需向服務(wù)發(fā)送一次請(qǐng)求囚衔，網(wǎng)頁中的背景圖像即可全部展示出來。通常情況下雕沿，這個(gè)由很多小的背景圖像合成的大圖被稱為精靈圖（雪碧圖）练湿，如下圖所示為京東網(wǎng)站中的一個(gè)精靈圖。
<img src="media/jds.png" style="border: 1px dashed #ccc;" />
精靈技術(shù)的使用
CSS 精靈其實(shí)是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖）审轮，然而肥哎，各個(gè)網(wǎng)頁元素通常只需要精靈圖中不同位置的某個(gè)小圖，要想精確定位到精靈圖中的某個(gè)小圖疾渣，就需要使用CSS的background-image篡诽、background-repeat和background-position屬性進(jìn)行背景定位，其中最關(guān)鍵的是使用background-position屬性精確地定位榴捡。
制作精靈圖
CSS 精靈其實(shí)是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖）杈女，那我們要做的，就是把小圖拼合成一張大圖。
大部分情況下碧信，精靈圖都是網(wǎng)頁美工做赊琳。
我們精靈圖上放的都是小的裝飾性質(zhì)的背景圖片。 插入圖片不能往上放砰碴。
我們精靈圖的寬度取決于最寬的那個(gè)背景躏筏。
我們可以橫向擺放也可以縱向擺放，但是每個(gè)圖片之間呈枉，間隔至少隔開偶數(shù)像素合適趁尼。
在我們精靈圖的最低端，留一片空隙猖辫，方便我們以后添加其他精靈圖酥泞。
結(jié)束語： 小公司，背景圖片很少的情況啃憎，沒有必要使用精靈技術(shù)芝囤，維護(hù)成本太高。 如果是背景圖片比較多辛萍，可以建議使用精靈技術(shù)悯姊。
滑動(dòng)門
先來體會(huì)下現(xiàn)實(shí)中的滑動(dòng)門,或者你可以叫做推拉門：
<img src="media/h.gif" />
滑動(dòng)門出現(xiàn)的背景
制作網(wǎng)頁時(shí)，為了美觀，常常需要為網(wǎng)頁元素設(shè)置特殊形狀的背景，比如微信導(dǎo)航欄铛纬，有凸起和凹下去的感覺澈驼，最大的問題是里面的字?jǐn)?shù)不一樣多，咋辦？
<img src="media/wxx.jpg" />
為了使各種特殊形狀的背景能夠自適應(yīng)元素中文本內(nèi)容的多少，出現(xiàn)了CSS滑動(dòng)門技術(shù)。它從新的角度構(gòu)建頁面垃僚，使各種特殊形狀的背景能夠自由拉伸滑動(dòng)，以適應(yīng)元素內(nèi)部的文本內(nèi)容店印，可用性更強(qiáng)冈在。 最常見于各種導(dǎo)航欄的滑動(dòng)門。
核心技術(shù)
核心技術(shù)就是利用CSS精靈（主要是背景位置）和盒子padding撐開寬度, 以便能適應(yīng)不同字?jǐn)?shù)的導(dǎo)航欄按摘。
一般的經(jīng)典布局都是這樣的：
<li>
<a href="#">
<span>導(dǎo)航欄內(nèi)容</span>
</a>
</li>
總結(jié)：
- a 設(shè)置 背景左側(cè)包券，padding撐開合適寬度。
- span 設(shè)置背景右側(cè)炫贤， padding撐開合適寬度 剩下由文字繼續(xù)撐開寬度溅固。
- 之所以a包含span就是因?yàn)?整個(gè)導(dǎo)航都是可以點(diǎn)擊的。
web字體
字體格式
不同瀏覽器所支持的字體格式是不一樣的兰珍，我們有必要了解一下有關(guān)字體格式的知識(shí)侍郭。
1、TureType(.ttf)格式
.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式亮元，支持這種字體的瀏覽器有IE9+猛计、Firefox3.5+、Chrome4+爆捞、Safari3+奉瘤、Opera10+、iOS Mobile煮甥、Safari4.2+盗温；
2、OpenType(.otf)格式
.otf字體被認(rèn)為是一種原始的字體格式成肘，其內(nèi)置在TureType的基礎(chǔ)上卖局，支持這種字體的瀏覽器有Firefox3.5+、Chrome4.0+双霍、Safari3.1+砚偶、Opera10.0+、iOS Mobile洒闸、Safari4.2+蟹演；
3、Web Open Font Format(.woff)格式
woff字體是Web字體中最佳格式顷蟀，他是一個(gè)開放的TrueType/OpenType的壓縮版本，同時(shí)也支持元數(shù)據(jù)包的分離骡技，支持這種字體的瀏覽器有IE9+鸣个、Firefox3.5+、Chrome6+布朦、Safari3.6+囤萤、Opera11.1+；
4是趴、Embedded Open Type(.eot)格式
.eot字體是IE專用字體涛舍，可以從TrueType創(chuàng)建此格式字體，支持這種字體的瀏覽器有IE4+唆途；
5富雅、SVG(.svg)格式
.svg字體是基于SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+肛搬、Safari3.1+没佑、Opera10.0+、iOS Mobile Safari3.2+温赔；
了解了上面的知識(shí)后蛤奢，我們就需要為不同的瀏覽器準(zhǔn)備不同格式的字體，通常我們會(huì)通過字體生成工具幫我們生成各種格式的字體，因此無需過于在意字體格式間的區(qū)別差異啤贩。
字體圖標(biāo)
圖片是有諸多優(yōu)點(diǎn)的待秃，但是缺點(diǎn)很明顯，比如圖片不但增加了總文件的大小痹屹，還增加了很多額外的"http請(qǐng)求"章郁，這都會(huì)大大降低網(wǎng)頁的性能的。更重要的是圖片不能很好的進(jìn)行“縮放”痢掠，因?yàn)閳D片放大和縮小會(huì)失真驱犹。 我們后面會(huì)學(xué)習(xí)移動(dòng)端響應(yīng)式，很多情況下希望我們的圖標(biāo)是可以縮放的足画。此時(shí)雄驹，一個(gè)非常重要的技術(shù)出現(xiàn)了，額不是出現(xiàn)了淹辞，是以前就有医舆，是被從新"寵幸"啦。象缀。 這就是字體圖標(biāo)（iconfont).
字體圖標(biāo)優(yōu)點(diǎn)
可以做出跟圖片一樣可以做的事情,改變透明度蔬将、旋轉(zhuǎn)度，等..
但是本質(zhì)其實(shí)是文字央星，可以很隨意的改變顏色霞怀、產(chǎn)生陰影、透明效果等等...
本身體積更小莉给，但攜帶的信息并沒有削減毙石。
幾乎支持所有的瀏覽器
移動(dòng)端設(shè)備必備良藥...
字體圖標(biāo)使用流程
總體來說，字體圖標(biāo)按照如下流程：
<img src="media/fontt.png" />
設(shè)計(jì)字體圖標(biāo)
假如圖標(biāo)是我們公司單獨(dú)設(shè)計(jì)颓遏，那就需要第一步了徐矩，這個(gè)屬于UI設(shè)計(jì)人員的工作， 他們?cè)?illustrator 或 Sketch 這類矢量圖形軟件里創(chuàng)建 icon圖標(biāo)叁幢， 比如下圖：
<img src="media/03.jpg" />
之后保存為svg格式滤灯，然后給我們前端人員就好了。
其實(shí)第一步曼玩，我們不需要關(guān)心鳞骤，只需要給我們這些圖標(biāo)就可以了，如果圖標(biāo)是大眾的黍判，網(wǎng)上本來就有的弟孟，可以直接跳過第一步，進(jìn)入第三步样悟。
上傳生成字體包
當(dāng)UI設(shè)計(jì)人員給我們svg文件的時(shí)候拂募，我們需要轉(zhuǎn)換成我們頁面能使用的字體文件庭猩， 而且需要生成的是兼容性的適合各個(gè)瀏覽器的。
? 推薦網(wǎng)站： http://icomoon.io
icomoon字庫
IcoMoon成立于2011年陈症，推出的第一個(gè)自定義圖標(biāo)字體生成器蔼水，它允許用戶選擇他們所需要的圖標(biāo)，使它們成一字型录肯。 內(nèi)容種類繁多趴腋，非常全面，唯一的遺憾是國外服務(wù)器论咏，打開網(wǎng)速較慢优炬。
推薦網(wǎng)站： http://www.iconfont.cn/
阿里icon font字庫
這個(gè)是阿里媽媽M2UX的一個(gè)icon font字體圖標(biāo)字庫，包含了淘寶圖標(biāo)庫和阿里媽媽圖標(biāo)庫厅贪〈阑ぃ可以使用AI制作圖標(biāo)上傳生成。 一個(gè)字养涮，免費(fèi)葵硕，免費(fèi)！贯吓！
fontello
在線定制你自己的icon font字體圖標(biāo)字庫懈凹，也可以直接從GitHub下載整個(gè)圖標(biāo)集，該項(xiàng)目也是開源的悄谐。
Font-Awesome
http://fortawesome.github.io/Font-Awesome/
這是我最喜歡的字庫之一了介评，更新比較快。目前已經(jīng)有369個(gè)圖標(biāo)了爬舰。
Glyphicon Halflings
這個(gè)字體圖標(biāo)可以在Bootstrap下免費(fèi)使用威沫。自帶了200多個(gè)圖標(biāo)。
Icons8
提供PNG免費(fèi)下載洼专，像素大能到500PX
[圖片上傳失敗...(image-a314ad-1527494961605)]
下載兼容字體包
剛才上傳完畢， 網(wǎng)站會(huì)給我們把UI做的svg圖片轉(zhuǎn)換為我們的字體格式孵构， 然后下載下來就好了
當(dāng)然屁商，我們不需要自己專門的圖標(biāo)，是想網(wǎng)上找?guī)讉€(gè)圖標(biāo)使用颈墅，以上2步可以直接省略了蜡镶， 直接到剛才的網(wǎng)站上找喜歡的下載使用吧。
<img src="media/fontt1.png" />
<img src="media/fontt2.png" />
字體引入到HTML
得到壓縮包之后恤筛，最后一步官还，是最重要的一步了， 就是字體文件已經(jīng)有了毒坛，我們需要引入到我們頁面中望伦。
-
首先把 以下4個(gè)文件放入到 fonts文件夾里面林说。 通俗的做法
[圖片上傳失敗...(image-20689-1527494961606)]
第一步：在樣式里面聲明字體： 告訴別人我們自己定義的字體
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; }第二步：給盒子使用字體
span { font-family: "icomoon"; }第三步：盒子里面添加結(jié)構(gòu)
span::before { content: "\e900"; } 或者 <span>?</span>追加新圖標(biāo)到原來庫里面
如果工作中，原來的字體圖標(biāo)不夠用了屯伞，我們需要添加新的字體圖標(biāo)腿箩，但是原來的不能刪除，繼續(xù)使用劣摇，此時(shí)我們需要這樣做
把壓縮包里面的selection.json 從新上傳珠移，然后，選中自己想要新的圖標(biāo)末融，從新下載壓縮包钧惧，替換原來文件即可。
<img src="media/fontt5.png" />
京東項(xiàng)目(一)
京東項(xiàng)目介紹
項(xiàng)目名稱：京東網(wǎng)
項(xiàng)目描述：京東首頁公共部分的頭部和尾部制作勾习，京東首頁中間部分浓瞪。
<img src="media/jd.png" />
項(xiàng)目背景
現(xiàn)階段電商類網(wǎng)站很流行，很多同學(xué)畢業(yè)之后會(huì)進(jìn)入電商類企業(yè)工作语卤，同時(shí)電商類網(wǎng)站需要的技術(shù)也是較為復(fù)雜的追逮，這里用京東電商網(wǎng)站復(fù)習(xí)、總結(jié)粹舵、提高前面所學(xué)布局技術(shù)钮孵。其實(shí)，最主要的原因還是眼滤，為啥寫京東巴席？ 因?yàn)閯?qiáng)東，賺了我們的錢诅需，搶了我們的女神漾唉， 我們也要學(xué)劉強(qiáng)東，賺別人的錢堰塌，搶別人..額赵刑，自己的女神。场刑。般此。
設(shè)計(jì)目標(biāo)
- 保證瀏覽器 ie7及以上, 火狐, 360, safari，chrome等牵现。誰讓我再測(cè)ie6铐懊，就跟誰急。瞎疼。
- 熟悉CSS+DIV布局科乎，頁面的搭建工作
- 了解常用電商類網(wǎng)站的布局模式
- 為后期京東移動(dòng)端做鋪墊
幾點(diǎn)思考
(1). 開發(fā)工具 sublime 、fireworks（ps）贼急、各種瀏覽器(ie6.7 要測(cè)看心情)
(2). CSS Reset 類庫,為跨瀏覽器兼容做準(zhǔn)備(也可以直接運(yùn)用jd網(wǎng)站的初始化)
normalize.css 只是一個(gè)很小的CSS文件茅茂，但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性捏萍。相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的玉吁、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案照弥。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap、HTML5 Boilerplate进副、GOV.UK这揣、Rdio、CSS Tricks 以及許許多多其他框架影斑、工具和網(wǎng)站上给赞。 你值得擁有。矫户。
- 保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
- 一般化的樣式：為大部分HTML元素提供
- 修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
- 優(yōu)化CSS可用性：用一些小技巧
- 解釋代碼：用注釋和詳細(xì)的文檔來
(3). 技術(shù)棧
HTML 結(jié)構(gòu) + CSS 布局 (因?yàn)槲覀兙蜁?huì)這些片迅。。皆辽。嘻嘻)
(4). 低版本瀏覽器 單獨(dú)制作一個(gè)跳轉(zhuǎn)頁面 (都是孩子柑蛇，也舍不得打，舍不得扔)
https://h5.m.jd.com/dev/3dm8aE4LDBNMkDfcCaRxLnVQ7rqo/index.html
<img src="media/di.png" width="600" />
目錄說明
要實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離的設(shè)計(jì)思想驱闷。 根目錄下有這4個(gè)文件（目錄）耻台。
| 名稱 | 說明 |
|---|---|
| css | 用于存放CSS文件 |
| images | 用于存放圖片 |
| index | 京東首頁 HTML |
| js | 用于后期存放javascript文件 |
運(yùn)用知識(shí)點(diǎn)
引入ico圖標(biāo)
<img src="media/ico.png" style="border: 1px dashed #ccc; padding:3px;" />
代碼： <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
注意：
她(它)不是iconfont字體哦 也不是圖片。
位置是放到 head 標(biāo)簽中間空另。
后面的type="image/x-icon" 屬性可以省略盆耽。（我相信你也愿意省略。）
-
為了兼容性扼菠，請(qǐng)將favicon.ico 這個(gè)圖標(biāo)放到根目錄下摄杂。（我們就不要任性了，聽話放位置循榆，省很多麻煩主卫。胰耗。你好岖赋，我也好）
?
轉(zhuǎn)換ico圖標(biāo)
我們可以自己做的圖片赖阻，轉(zhuǎn)換為 ico圖標(biāo)，以便放到我們站點(diǎn)里面浦楣。 http://www.bitbug.net/
網(wǎng)站優(yōu)化三大標(biāo)簽
SEO是由英文Search Engine Optimization縮寫而來， 中文意譯為“搜索引擎優(yōu)化”咪辱！SEO是指通過對(duì)網(wǎng)站進(jìn)行站內(nèi)優(yōu)化振劳、網(wǎng)站結(jié)構(gòu)調(diào)整、網(wǎng)站內(nèi)容建設(shè)油狂、網(wǎng)站代碼優(yōu)化等)和站外優(yōu)化历恐，從而提高網(wǎng)站的關(guān)鍵詞排名以及公司產(chǎn)品的曝光度寸癌。 簡(jiǎn)單的說就是，把產(chǎn)品做好弱贼，搜索引擎就會(huì)介紹客戶來蒸苇。
我們現(xiàn)在階段主要進(jìn)行站內(nèi)優(yōu)化。網(wǎng)站優(yōu)化吮旅，我們應(yīng)該要懂溪烤。。庇勃。
<img src="media/san.png" />
網(wǎng)頁title 標(biāo)題
title具有不可替代性檬嘀，是我們的內(nèi)頁第一個(gè)重要標(biāo)簽，是搜索引擎了解網(wǎng)頁的入口责嚷，和對(duì)網(wǎng)頁主題歸屬的最佳判斷點(diǎn)鸳兽。
<img src="media/title.png" width="500" />
建議：
首頁標(biāo)題：網(wǎng)站名（產(chǎn)品名）- 網(wǎng)站的介紹
例如：
京東(JD.COM)-綜合網(wǎng)購首選-正品低價(jià)、品質(zhì)保障罕拂、配送及時(shí)揍异、輕松購物！
小米商城 - 小米5s爆班、紅米Note 4衷掷、小米MIX、小米筆記本官方網(wǎng)站
Description 網(wǎng)站說明
對(duì)于關(guān)鍵詞的作用明顯降低蛋济，但由于很多搜索引擎棍鳖，仍然大量采用網(wǎng)頁的MATA標(biāo)簽中描述部分作為搜索結(jié)果的“內(nèi)容摘要”。 就是簡(jiǎn)要說明我們網(wǎng)站的主要做什么的碗旅。
我們提倡渡处，Description作為網(wǎng)站的總體業(yè)務(wù)和主題概括，多采用“我們是…”“我們提供…”“×××網(wǎng)作為…”“電話：010…”之類語句祟辟。
京東網(wǎng)：
<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購物商城,銷售家電医瘫、數(shù)碼通訊、電腦旧困、家居百貨醇份、服裝服飾、母嬰吼具、圖書僚纷、食品等數(shù)萬個(gè)品牌優(yōu)質(zhì)商品.便捷、誠信的服務(wù)拗盒，為您提供愉悅的網(wǎng)上購物體驗(yàn)!" />
注意點(diǎn)：
- 描述中出現(xiàn)關(guān)鍵詞怖竭，與正文內(nèi)容相關(guān)，這部分內(nèi)容是給人看的陡蝇，所以要寫的很詳細(xì)痊臭，讓人感興趣哮肚， 吸引用戶點(diǎn)擊。
- 同樣遵循簡(jiǎn)短原則广匙，字符數(shù)含空格在內(nèi)不要超過 120 個(gè)漢字允趟。
- 補(bǔ)充在 title 和 keywords 中未能充分表述的說明.
- 用英文逗號(hào) 關(guān)鍵詞1,關(guān)鍵詞2
<meta name="description" content="小米商城直營小米公司旗下所有產(chǎn)品，囊括小米手機(jī)系列小米MIX鸦致、小米Note 2潮剪，紅米手機(jī)系列紅米Note 4、紅米4蹋凝，智能硬件鲁纠，配件及小米生活周邊，同時(shí)提供小米客戶服務(wù)及售后支持鳍寂。" />
Keywords 關(guān)鍵字
Keywords是頁面關(guān)鍵詞改含，是搜索引擎關(guān)注點(diǎn)之一。Keywords應(yīng)該限制在6～8個(gè)關(guān)鍵詞左右迄汛，電商類網(wǎng)站可以多 少許捍壤。
京東網(wǎng)：
<meta name="Keywords" content="網(wǎng)上購物,網(wǎng)上商城,手機(jī),筆記本,電腦,MP3,CD,VCD,DV,相機(jī),數(shù)碼,配件,手表,存儲(chǔ)卡,京東" />
小米網(wǎng)：
<meta name="keywords" content="小米,小米6,紅米Note4,小米MIX,小米商城" />
頂部（快捷菜單）所用知識(shí)點(diǎn)
| 知識(shí)點(diǎn) | 說明 |
|---|---|
| 通欄的盒子 | 不用給寬度 默認(rèn)為 100% ?但是加了浮動(dòng)和定位的盒子需要 添加 100% |
| 盒子居中對(duì)齊 | margin: auto; 注意必須有寬度的塊級(jí)元素，文字水平居中對(duì)齊是 text-align:center; |
| 行高會(huì)繼承 | 文字性質(zhì)的鞍爱，比如 顏色鹃觉、文字大小、字體睹逃、行高等會(huì)繼承父級(jí)元素 |
| 浮動(dòng)元素盗扇、固定定位，絕對(duì)定位會(huì)模式轉(zhuǎn)換 | 具有行內(nèi)塊特性沉填，比如一行放多個(gè)疗隶，有高度和寬度，如果沒有指定寬度翼闹，則會(huì)根據(jù)內(nèi)容多少撐開斑鼻。 |
logo 和搜索 header 區(qū)域所用知識(shí)點(diǎn)
網(wǎng)頁布局穩(wěn)定性
<img src="media/x.png" />
寬度剩余法：
<img src="media/w.png" />
| 知識(shí)點(diǎn) | 說明 |
|---|---|
| 浮動(dòng)元素特性 | 1. 浮動(dòng)可以讓多個(gè)元素同一行顯示 2. 浮動(dòng)的元素是頂部對(duì)齊 |
| logo優(yōu)化 | text-indent: -20000px; 隱藏文字， 背景圖片 |
| 清除浮動(dòng) | 清除浮動(dòng)的目的就是為了解決父親高度為0的問題 |
| 鼠標(biāo)樣式 | cursor: pointer; 小手 cursor: move; 四角箭頭 cursor: text; 插入光標(biāo) cursor: default; 小白 |
| 不允許換行 | white-space: nowrap; |
nav導(dǎo)航欄所用知識(shí)點(diǎn)
| 名稱 | 說明 |
|---|---|
| 邊框底側(cè) | border-bottom: 2px solid #ccc; |
| 定位重點(diǎn) | 絕對(duì)定位不占位置 相對(duì)定位占有位置 |
| 標(biāo)簽語義化dl | dl也是塊級(jí)元素 dt 是 定義標(biāo)題 dd 是定義描述猎荠，dd是圍繞這dt來描述的坚弱，也就是說，dd算是dt 的解釋說明詳細(xì)分解关摇。 |
| 標(biāo)題標(biāo)簽h | 盡量少用h1荒叶，可以多用h2和h3等標(biāo)簽 |
頁面底部所用知識(shí)點(diǎn)
| 名稱 | 說明 |
|---|---|
| 絕對(duì)定位的盒子居中對(duì)齊 | 盒子 left 50% 然后通過 margin 負(fù)值自己的寬度一半（固定定位也是如此） |
固定定位的盒子靠近版心右側(cè)對(duì)齊
跟絕對(duì)定位的盒子居中對(duì)齊原理差不多。
left 50% 然后 margin-left 版心寬度一半输虱。
<img src="media/guding.png" width="500" />
學(xué)習(xí)目標(biāo):
掌握京東中間部分制作
理解BFC使用
了解優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)
-
了解CSS壓縮和驗(yàn)證工具
typora-copy-images-to: media
京東項(xiàng)目(二)
nav導(dǎo)航欄所用知識(shí)點(diǎn)
| 名稱 | 說明 |
|---|---|
| 邊框底側(cè) | border-bottom: 2px solid #ccc; |
| 定位重點(diǎn) | 絕對(duì)定位不占位置 相對(duì)定位占有位置 |
| 標(biāo)簽語義化dl | dl也是塊級(jí)元素 dt 是 定義標(biāo)題 dd 是定義描述些楣，dd是圍繞這dt來描述的，也就是說，dd算是dt 的解釋說明詳細(xì)分解戈毒。 |
| 標(biāo)題標(biāo)簽h | 盡量少用h1，可以多用h2和h3等標(biāo)簽 |
固定定位的盒子靠近版心右側(cè)對(duì)齊
跟絕對(duì)定位的盒子居中對(duì)齊原理差不多横堡。
left 50% 然后 margin-left 版心寬度一半埋市。
<img src="media/guding.png" width="500" />
焦點(diǎn)圖部分所用知識(shí)點(diǎn)
| 名稱 | 說明 |
|---|---|
| 圓角矩形 | border-radius: 左上角 右上角 右下角 左下角。 |
負(fù)值自己的寬度一半（固定定位也是如此）
背景半透明
1.強(qiáng)烈推薦： background: rgba(r,g,b,alpha);
? r,g,b 是紅綠藍(lán)的顏色命贴， alpha 是透明度的意思道宅，取值范圍是 0~1 之間。
2.了解ie低版本瀏覽器 半透明
filter:Alpha(opacity=50) 胸蛛； // opacity值為0 到 100
但是 此屬性是盒子半透明污茵，不是背景半透明哦，因?yàn)槔锩娴膬?nèi)容也一起半透明了
因此葬项，低版本的 ie6.7瀏覽器泞当，我們不需要透明了，直接采用優(yōu)雅降級(jí)的做法民珍。
background: gary;
background: rgba(0,0,0,.2);
寫上兩句 背景襟士， 低版本ie只執(zhí)行g(shù)ray， 其他瀏覽器執(zhí)行 半透明下面這一句嚷量。
CSS W3C 統(tǒng)一驗(yàn)證工具
CssStats 是一個(gè)在線的 CSS 代碼分析工具
網(wǎng)址是： http://www.cssstats.com/
如果你想要更全面的陋桂，這個(gè)神奇，你值得擁有：
W3C 統(tǒng)一驗(yàn)證工具： http://validator.w3.org/unicorn/ ☆☆☆☆☆
因?yàn)樗梢詸z測(cè)本地文件哦５堋嗜历！
http://tool.chinaz.com/Tools/CssFormat.aspx css 代碼壓縮
HTML5新標(biāo)簽與特性
兼容性問題 （ie9 以上的版本）
<img src="media/html.jpg" />
文檔類型設(shè)定
- document
- HTML: sublime 輸入 html:4s
- XHTML: sublime 輸入 html:xt
- HTML5 sublime 輸入 html:5 <!DOCTYPE html>
字符設(shè)定
- <meta http-equiv="charset" content="utf-8">：HTML與XHTML中建議這樣去寫
- <meta charset="utf-8">：HTML5的標(biāo)簽中建議這樣去寫
常用新標(biāo)簽
w3c 手冊(cè)中文官網(wǎng) : http://w3school.com.cn/
header：定義文檔的頁眉 頭部
nav：定義導(dǎo)航鏈接的部分
footer：定義文檔或節(jié)的頁腳 底部
article：定義文章。
section：定義文檔中的節(jié)（section抖所、區(qū)段）
-
aside：定義其所處內(nèi)容之外的內(nèi)容 側(cè)邊
<header> 語義 :定義頁面的頭部 頁眉</header> <nav> 語義 :定義導(dǎo)航欄 </nav> <footer> 語義: 定義 頁面底部 頁腳</footer> <article> 語義: 定義文章</article> <section> 語義： 定義區(qū)域</section> <aside> 語義： 定義其所處內(nèi)容之外的內(nèi)容 側(cè)邊</aside>?
-
datalist 標(biāo)簽定義選項(xiàng)列表梨州。請(qǐng)與 input 元素配合使用該元素
<input type="text" value="請(qǐng)輸入明星" list="star"/> <datalist id="star"> <option value="劉德華">劉德華</option> <option value="劉若英">劉若英</option> <option value="劉曉慶">劉曉慶</option> <option value="戚薇">戚薇</option> <option value="戚繼光">戚繼光</option> </datalist>?
-
fieldset 元素可將表單內(nèi)的相關(guān)元素分組，打包 legend 搭配使用
<fieldset> <legend>用戶登錄</legend> 標(biāo)題 用戶名: <input type="text"><br /><br /> 密 碼: <input type="password"> </fieldset>?
新增的input type屬性值：
| **類型****** | **使用示例****** | **含義****** |
|---|---|---|
| **email****** | <input type="email"> | 輸入郵箱格式 |
| **tel****** | <input type="tel"> | 輸入手機(jī)號(hào)碼格式 |
| **url****** | <input type="url"> | 輸入url格式 |
| **number****** | <input type="number"> | 輸入數(shù)字格式 |
| **search****** | <input type="search"> | 搜索框（體現(xiàn)語義化） |
| **range****** | <input type="range"> | 自由拖動(dòng)滑塊 |
| **time****** | <input type="time"> | 小時(shí)分鐘 |
| **date****** | <input type="date"> | 年月日 |
| **datetime****** | <input type="datetime"> | 時(shí)間 |
| **month****** | <input type="month"> | 月年 |
| **week****** | <input type="week"> | 星期 年 |
常用新屬性
| **屬性****** | **用法****** | **含義****** |
|---|---|---|
| **placeholder****** | <input type="text" placeholder="請(qǐng)輸入用戶名"> | 占位符 當(dāng)用戶輸入的時(shí)候 里面的文字消失 刪除所有文字部蛇，自動(dòng)返回 |
| **autofocus****** | <input type="text" autofocus> | 規(guī)定當(dāng)頁面加載時(shí) input 元素應(yīng)該自動(dòng)獲得焦點(diǎn) |
| **multiple****** | <input type="file" multiple> | 多文件上傳 |
| **autocomplete****** | <input type="text" autocomplete="off"> | 規(guī)定表單是否應(yīng)該啟用自動(dòng)完成功能 有2個(gè)值摊唇，一個(gè)是on 一個(gè)是off on 代表記錄已經(jīng)輸入的值 1.autocomplete 首先需要提交按鈕 2.這個(gè)表單您必須給他名字 |
| **required****** | <input type="text" required> | 必填項(xiàng) 內(nèi)容不能為空 |
| **accesskey****** | <input type="text" accesskey="s"> | 規(guī)定激活（使元素獲得焦點(diǎn)）元素的快捷鍵 采用 alt + s的形式 |
綜合案例
<form action="">
<fieldset>
<legend>學(xué)生檔案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="請(qǐng)輸入用戶名"> <br>
<label for="userPhone">手機(jī)號(hào)碼:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<label for="email">郵箱地址:</label>
<input type="email" required name="email" id="email"><br>
<label for="collage">所屬學(xué)院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="請(qǐng)選擇"><br>
<datalist id="cList">
<option value="前端與移動(dòng)開發(fā)學(xué)院"></option>
<option value="java學(xué)院"></option>
<option value="c++學(xué)院"></option>
</datalist><br>
<label for="score">入學(xué)成績(jī):</label>
<input type="number" max="100" min="0" value="0" id="score"><br>
<form action="">
<fieldset>
<legend>學(xué)生檔案思密達(dá)</legend>
<label>姓名: <input type="text" placeholder="請(qǐng)輸入學(xué)生名字"/></label> <br /><br />
<label>手機(jī)號(hào): <input type="tel" /></label> <br /><br />
<label>郵箱: <input type="email" /></label> <br /><br />
<label>所屬學(xué)院: <input type="text" placeholder="請(qǐng)選擇學(xué)院" list="xueyuan"/>
<datalist id="xueyuan">
<option>java學(xué)院</option>
<option>前端學(xué)院</option>
<option>php學(xué)院</option>
<option>設(shè)計(jì)學(xué)院</option>
</datalist>
<br /><br />
<label>出生日期: <input type="date" /></label> <br /><br />
<label>成績(jī): <input type="number" /></label> <br /><br />
<label>畢業(yè)時(shí)間: <input type="date" /></label> <br /><br />
<input type="submit" /> <input type="reset" />
</fieldset>
</form>
<label for="inTime">入學(xué)日期:</label>
<input type="date" id="inTime" name="inTime"><br>
<label for="leaveTime">畢業(yè)日期:</label>
<input type="date" id="leaveTime" name="leaveTime"><br>
<input type="submit">
</fieldset>
</form>
多媒體標(biāo)簽
- embed：標(biāo)簽定義嵌入的內(nèi)容
- audio：播放音頻
- video：播放視頻
多媒體 embed（會(huì)使用）
embed可以用來插入各種多媒體，格式可以是 Midi涯鲁、Wav巷查、AIFF、AU抹腿、MP3等等岛请。url為音頻或視頻文件及其路徑，可以是相對(duì)路徑或絕對(duì)路徑警绩。
因?yàn)榧嫒菪詥栴}崇败，我們這里只講解 插入網(wǎng)絡(luò)視頻， 后面H5會(huì)講解 audio 和video 視頻多媒體。
<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
?
<img src="media/embed.png" />
優(yōu)酷后室，土豆缩膝，愛奇藝，騰訊岸霹、樂視等等
- 先上傳
- 在分享
多媒體 audio
HTML5通過<audio>標(biāo)簽來解決音頻播放的問題疾层。
使用相當(dāng)簡(jiǎn)單，如下圖所示
[圖片上傳失敗...(image-3e292e-1527494961606)]
并且可以通過附加屬性可以更友好控制音頻的播放贡避，如：
autoplay 自動(dòng)播放
controls 是否顯不默認(rèn)播放控件
loop 循環(huán)播放 如果這個(gè)屬性不寫 默認(rèn)播放一次 loop 或者 loop = “l(fā)oop” 表示無限循環(huán)
由于版權(quán)等原因痛黎，不同的瀏覽器可支持播放的格式是不一樣的，如下圖供參考
[圖片上傳失敗...(image-49a501-1527494961606)]
多瀏覽器支持的方案刮吧，如下圖
<source> 標(biāo)簽允許您規(guī)定可替換的視頻/音頻文件供瀏覽器根據(jù)它對(duì)媒體類型或者編解碼器的支持進(jìn)行選擇
[圖片上傳失敗...(image-772458-1527494961606)]
多媒體 video
HTML5通過<audio>標(biāo)簽來解決音頻播放的問題湖饱。
同音頻播放一樣，<video>使用也相當(dāng)簡(jiǎn)單杀捻，如下圖
[圖片上傳失敗...(image-68a993-1527494961606)]
同樣井厌，通過附加屬性可以更友好的控制視頻的播放
autoplay 自動(dòng)播放
controls 是否顯示默認(rèn)播放控件
loop 循環(huán)播放
width 設(shè)置播放窗口寬度
height 設(shè)置播放窗口的高度
由于版權(quán)等原因，不同的瀏覽器可支持播放的格式是不一樣的致讥，如下圖供參考
[圖片上傳失敗...(image-8a5ef1-1527494961606)]
**多瀏覽器支持的方案旗笔，如下圖******
[圖片上傳失敗...(image-1c1c3d-1527494961606)]
CSS3 新增選擇器
結(jié)構(gòu)(位置)偽類選擇器（CSS3)
- :first-child :選取屬于其父元素的首個(gè)子元素的指定選擇器
- :last-child :選取屬于其父元素的最后一個(gè)子元素的指定選擇器
- :nth-child(n) ： 匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類型
- :nth-last-child(n) ：選擇器匹配屬于其元素的第 N 個(gè)子元素的每個(gè)元素拄踪，不論元素的類型蝇恶，從最后一個(gè)子元素開始計(jì)數(shù)。
n 可以是數(shù)字惶桐、關(guān)鍵詞或公式 - ?
li:first-child { /* 選擇第一個(gè)孩子 */
color: pink;
}
li:last-child { /* 最后一個(gè)孩子 */
color: purple;
}
li:nth-child(4) { /* 選擇第4個(gè)孩子 n 代表 第幾個(gè)的意思 */
color: skyblue;
}
屬性選擇器
選取標(biāo)簽帶有某些特殊屬性的選擇器 我們成為屬性選擇器
/* 獲取到 擁有 該屬性的元素 */
div[class^=font] { /* class^=font 表示 font 開始位置就行了 */
color: pink;
}
div[class$=footer] { /* class$=footer 表示 footer 結(jié)束位置就行了 */
color: skyblue;
}
div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */
color: green;
}
<div class="font12">屬性選擇器</div>
<div class="font12">屬性選擇器</div>
<div class="font24">屬性選擇器</div>
<div class="font24">屬性選擇器</div>
<div class="font24">屬性選擇器</div>
<div class="24font">屬性選擇器123</div>
<div class="sub-footer">屬性選擇器footer</div>
<div class="jd-footer">屬性選擇器footer</div>
<div class="news-tao-nav">屬性選擇器</div>
<div class="news-tao-header">屬性選擇器</div>
<div class="tao-header">屬性選擇器</div>
偽元素選擇器（CSS3)
- E::first-letter文本的第一個(gè)單詞或字（如中文撮弧、日文、韓文等）
- E::first-line 文本第一行姚糊；
- E::selection 可改變選中文本的樣式贿衍；
p::first-letter {
font-size: 20px;
color: hotpink;
}
/* 首行特殊樣式 */
p::first-line {
color: skyblue;
}
p::selection {
/* font-size: 50px; */
color: orange;
}
4、E::before和E::after
在E元素內(nèi)部的開始位置和結(jié)束位創(chuàng)建一個(gè)元素救恨，該元素為行內(nèi)元素贸辈，且必須要結(jié)合content屬性使用。
div::befor {
content:"開始";
}
div::after {
content:"結(jié)束";
}
E:after肠槽、E:before 在舊版本里是偽元素擎淤，CSS3的規(guī)范里“:”用來表示偽類，“::”用來表示偽元素秸仙，但是在高版本瀏覽器下E:after嘴拢、E:before會(huì)被自動(dòng)識(shí)別為E::after、E::before寂纪，這樣做的目的是用來做兼容處理席吴。
":" 與 "::" 區(qū)別在于區(qū)分偽類和偽元素
之所以被稱為偽元素赌结，是因?yàn)樗麄儾皇钦嬲捻撁嬖兀琱tml沒有對(duì)應(yīng)的元素孝冒，但是其所有用法和表現(xiàn)行為與真正的頁面元素一樣柬姚，可以對(duì)其使用諸如頁面元素一樣的css樣式，表面上看上去貌似是頁面的某些元素來展現(xiàn)庄涡，實(shí)際上是css樣式展現(xiàn)的行為伤靠，因此被稱為偽元素。是偽元素在html代碼機(jī)構(gòu)中的展現(xiàn)啼染，可以看出無法偽元素的結(jié)構(gòu)無法審查
注意
偽元素:before和:after添加的內(nèi)容默認(rèn)是inline元素**；這個(gè)兩個(gè)偽元素的content屬性焕梅，表示偽元素的內(nèi)容,設(shè)置:before和:after時(shí)必須設(shè)置其content屬性迹鹅，否則偽元素就不起作用。
CSS3盒模型
CSS3中可以通過box-sizing 來指定盒模型贞言，即可指定為content-box斜棚、border-box，這樣我們計(jì)算盒子大小的方式就發(fā)生了改變该窗。
可以分成兩種情況：
1弟蚀、box-sizing: content-box 盒子大小為 width + padding + border content-box:此值為其默認(rèn)值，其讓元素維持W3C的標(biāo)準(zhǔn)Box Mode
2酗失、box-sizing: border-box 盒子大小為 width 就是說 padding 和 border 是包含到width里面的
注：上面的標(biāo)注的width指的是CSS屬性里設(shè)置的width: length义钉，content的值是會(huì)自動(dòng)調(diào)整的。
div:first-child {
width: 200px;
height: 200px;
background-color: pink;
box-sizing: content-box; /* 就是以前的標(biāo)準(zhǔn)盒模型 w3c */
padding: 10px;
border: 15px solid red;
/* 盒子大小為 width + padding + border content-box:此值為其默認(rèn)值规肴，其讓元素維持W3C的標(biāo)準(zhǔn)Box Mode */
}
div:last-child {
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
box-sizing: border-box; /* padding border 不撐開盒子 */
border: 15px solid red;
/* margin: 10px; */
/* 盒子大小為 width 就是說 padding 和 border 是包含到width里面的 */
}
學(xué)成在線綜合案例
過渡(CSS3)
過渡（transition)是CSS3中具有顛覆性的特征之一捶闸，我們可以在不使用 Flash 動(dòng)畫或 JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果拖刃。
幀動(dòng)畫：通過一幀一幀的畫面按照固定順序和速度播放删壮。如電影膠片
[圖片上傳失敗...(image-f478b0-1527494961606)]
<img src="media/zhen.gif" />
在CSS3里使用transition可以實(shí)現(xiàn)補(bǔ)間動(dòng)畫（過渡效果），并且當(dāng)前元素只要有“屬性”發(fā)生變化時(shí)即存在兩種狀態(tài)(我們用A和B代指）兑牡，就可以實(shí)現(xiàn)平滑的過渡央碟，為了方便演示采用hover切換兩種狀態(tài)，但是并不僅僅局限于hover狀態(tài)來實(shí)現(xiàn)過渡均函。
語法格式:
transition: 要過渡的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開始;
如果有多組屬性變化亿虽，還是用逗號(hào)隔開。
| 屬性 | 描述 | CSS |
|---|---|---|
| transition | 簡(jiǎn)寫屬性苞也，用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性经柴。 | 3 |
| transition-property | 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。 | 3 |
| transition-duration | 定義過渡效果花費(fèi)的時(shí)間墩朦。默認(rèn)是 0坯认。 | 3 |
| transition-timing-function | 規(guī)定過渡效果的時(shí)間曲線。默認(rèn)是 "ease"。 | 3 |
| transition-delay | 規(guī)定過渡效果何時(shí)開始牛哺。默認(rèn)是 0陋气。 | 3 |
如果想要所有的屬性都變化過渡， 寫一個(gè)all 就可以
transition-duration 花費(fèi)時(shí)間 單位是 秒 s 比如 0.5s 這個(gè)s單位必須寫 ms 毫秒
運(yùn)動(dòng)曲線 默認(rèn)是 ease
何時(shí)開始 默認(rèn)是 0s 立馬開始
運(yùn)動(dòng)曲線示意圖：
[圖片上傳失敗...(image-2ba49-1527494961606)]
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 要過渡的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開始; */
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
/* transtion 過渡的意思 這句話寫到div里面而不是 hover里面 */
}
div:hover { /* 鼠標(biāo)經(jīng)過盒子引润，我們的寬度變?yōu)?00 */
width: 600px;
height: 300px
}
transition: all 0.6s; /* 所有屬性都變化用all 就可以了 后面?zhèn)z個(gè)屬性可以省略 */
2D變形(CSS3) transform
transform是CSS3中具有顛覆性的特征之一返咱，可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)嵌牺、傾斜蒙保、縮放，甚至支持矩陣方式奴曙，配合過渡和即將學(xué)習(xí)的動(dòng)畫知識(shí)别凹，可以取代大量之前只能靠Flash才可以實(shí)現(xiàn)的效果。
變形轉(zhuǎn)換 transform transform 變換 變形的意思 《 transformers 變形金剛》
移動(dòng) translate(x, y)
translate 移動(dòng)平移的意思
[圖片上傳失敗...(image-d751fe-1527494961606)]
translate(50px,50px);
使用translate方法來將文字或圖像在水平方向和垂直方向上分別垂直移動(dòng)50像素洽糟。
可以改變?cè)氐奈恢寐疲瑇、y可為負(fù)值坤溃；
translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)（也就是X軸和Y軸同時(shí)移動(dòng)）
translateX(x)僅水平方向移動(dòng)（X軸移動(dòng)）
translateY(Y)僅垂直方向移動(dòng)（Y軸移動(dòng)）
.box {
width: 499.9999px;
height: 400px;
background: pink;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%); /* 走的自己的一半 */
}
讓定位的盒子水平居中
縮放 scale(x, y)
[圖片上傳失敗...(image-8a7409-1527494961606)]
transform:scale(0.8,1);
可以對(duì)元素進(jìn)行水平和垂直方向的縮放拍霜。該語句使用scale方法使該元素在水平方向上縮小了20%，垂直方向上不縮放薪介。
scale(X,Y)使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放）
scaleX(x)元素僅水平方向縮放（X軸縮放）
scaleY(y)元素僅垂直方向縮放（Y軸縮放）
scale()的取值默認(rèn)的值為1祠饺，當(dāng)值設(shè)置為0.01到0.99之間的任何值，作用使一個(gè)元素縮兄吠裆；而任何大于或等于1.01的值，作用是讓元素放大
旋轉(zhuǎn) rotate(deg)
可以對(duì)元素進(jìn)行旋轉(zhuǎn)烂完，正值為順時(shí)針试疙，負(fù)值為逆時(shí)針；
[圖片上傳失敗...(image-40da17-1527494961606)]
transform:rotate(45deg);
注意單位是 deg 度數(shù)
transform-origin可以調(diào)整元素轉(zhuǎn)換變形的原點(diǎn)
[圖片上傳失敗...(image-b84721-1527494961606)]
div{transform-origin: left top;transform: rotate(45deg); } /* 改變?cè)卦c(diǎn)到左上角抠蚣，然后進(jìn)行順時(shí)旋轉(zhuǎn)45度 */
如果是4個(gè)角祝旷，可以用 left top這些，如果想要精確的位置嘶窄， 可以用 px 像素怀跛。
div{transform-origin: 10px 10px;transform: rotate(45deg); } /* 改變?cè)卦c(diǎn)到x 為10 y 為10，然后進(jìn)行順時(shí)旋轉(zhuǎn)45度 */
案例旋轉(zhuǎn)楚喬傳
div {
width: 250px;
height: 170px;
border: 1px solid pink;
margin: 200px auto;
position: relative;
}
div img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.6s;
transform-origin: top right;
}
div:hover img:nth-child(1) { /* 鼠標(biāo)經(jīng)過div 第一張圖片旋轉(zhuǎn) */
transform: rotate(60deg);
}
div:hover img:nth-child(2) {
transform: rotate(120deg);
}
div:hover img:nth-child(3) {
transform: rotate(180deg);
}
div:hover img:nth-child(4) {
transform: rotate(240deg);
}
div:hover img:nth-child(5) {
transform: rotate(300deg);
}
div:hover img:nth-child(6) {
transform: rotate(360deg);
}
傾斜 skew(deg, deg)
[圖片上傳失敗...(image-85750-1527494961606)]
transform:skew(30deg,0deg);
該實(shí)例通過skew方法把元素水平方向上傾斜30度柄冲，處置方向保持不變吻谋。
可以使元素按一定的角度進(jìn)行傾斜，可為負(fù)值现横，第二個(gè)參數(shù)不寫默認(rèn)為0漓拾。
3D變形(CSS3) transform
2d x y
3d x y z
左手坐標(biāo)系
伸出左手阁最，讓拇指和食指成“L”形，大拇指向右骇两，食指向上速种，中指指向前方。這樣我們就建立了一個(gè)左手坐標(biāo)系低千，拇指配阵、食指和中指分別代表X、Y示血、Z軸的正方向棋傍。如下圖
[圖片上傳失敗...(image-29c3e-1527494961606)]
CSS3中的3D坐標(biāo)系與上述的3D坐標(biāo)系是有一定區(qū)別的，相當(dāng)于其繞著X軸旋轉(zhuǎn)了180度难审，如下圖
[圖片上傳失敗...(image-c6134c-1527494961606)]
簡(jiǎn)單記住他們的坐標(biāo)：
x左邊是負(fù)的瘫拣，右邊是正的
y 上面是負(fù)的， 下面是正的
z 里面是負(fù)的剔宪， 外面是正的
rotateX()
就是沿著 x 立體旋轉(zhuǎn).
[圖片上傳失敗...(image-d72799-1527494961606)]
img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}
rotateY()
沿著y軸進(jìn)行旋轉(zhuǎn)
[圖片上傳失敗...(image-fb35bd-1527494961606)]
img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}
rotateZ()?
沿著z軸進(jìn)行旋轉(zhuǎn)
img {
transition:all .25s ease-in 0s;
}
img:hover {
/* transform:rotateX(180deg); */
/* transform:rotateY(180deg); */
/* transform:rotateZ(180deg); */
/* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}
透視(perspective)
電腦顯示屏是一個(gè)2D平面，圖像之所以具有立體感（3D效果）壹无，其實(shí)只是一種視覺呈現(xiàn)葱绒，通過透視可以實(shí)現(xiàn)此目的。
透視可以將一個(gè)2D平面斗锭，在轉(zhuǎn)換的過程當(dāng)中地淀，呈現(xiàn)3D效果。
- 透視原理： 近大遠(yuǎn)小 岖是。
- 瀏覽器透視：把近大遠(yuǎn)小的所有圖像帮毁，透視在屏幕上。
- perspective：視距豺撑，表示視點(diǎn)距離屏幕的長短烈疚。視點(diǎn)，用于模擬透視效果時(shí)人眼的位置
注：并非任何情況下需要透視效果聪轿，根據(jù)開發(fā)需要進(jìn)行設(shè)置爷肝。
perspective 一般作為一個(gè)屬性，設(shè)置給父元素陆错，作用于所有3D轉(zhuǎn)換的子元素
理解透視距離原理：
[圖片上傳失敗...(image-7654c9-1527494961606)]
translateX(x)
僅水平方向移動(dòng)**（X軸移動(dòng)）
[圖片上傳失敗...(image-caaf25-1527494961606)]
主要目的實(shí)現(xiàn)移動(dòng)效果
translateY(y)
僅垂直方向移動(dòng)（Y軸移動(dòng)）
[圖片上傳失敗...(image-2d772b-1527494961606)]
translateZ(z)
transformZ的直觀表現(xiàn)形式就是大小變化灯抛，實(shí)質(zhì)是XY平面相對(duì)于視點(diǎn)的遠(yuǎn)近變化（說遠(yuǎn)近就一定會(huì)說到離什么參照物遠(yuǎn)或近，在這里參照物就是perspective屬性）音瓷。比如設(shè)置了perspective為200px;那么transformZ的值越接近200对嚼，就是離的越近，看上去也就越大绳慎，超過200就看不到了纵竖，因?yàn)橄喈?dāng)于跑到后腦勺去了漠烧，我相信你正常情況下，是看不到自己的后腦勺的磨确。
translate3d(x,y,z)
[注意]其中沽甥，x和y可以是長度值，也可以是百分比乏奥，百分比是相對(duì)于其本身元素水平方向的寬度和垂直方向的高度和摆舟；z只能設(shè)置長度值
開門案例
body {
}
.door {
width: 300px;
height: 300px;
margin: 100px auto;
border: 1px solid gray;
perspective: 1000px;
background: url('images/dog.gif') no-repeat cover;
position: relative;
}
.door > div {
box-sizing: border-box;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
height: 100%;
background-color: brown;
transform-origin: left center;
transition: 1s;
position: relative;
}
.left::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 50%;
right: 0px;
transform: translateY(-10px);
border: 1px solid whitesmoke;
}
.right {
width: 50%;
height: 100%;
float: left;
background-color: brown;
transform-origin: right center;
transition: 1s;
position: relative;
}
.right::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 50%;
left: 0px;
transform: translateY(-10px);
border: 1px solid whitesmoke;
}
.door:hover .left {
transform: rotateY(-130deg);
}
.door:hover .right {
transform: rotateY(130deg);
}
backface-visibility
backface-visibility 屬性定義當(dāng)元素不面向屏幕時(shí)是否可見。
翻轉(zhuǎn)盒子案例
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden; /* 不是正面對(duì)象屏幕邓了，就隱藏 */
}
div:hover img {
transform: rotateY(180deg);
}
動(dòng)畫(CSS3) animation
動(dòng)畫是CSS3中具有顛覆性的特征之一恨诱，可通過設(shè)置多個(gè)節(jié)點(diǎn)來精確控制一個(gè)或一組動(dòng)畫，常用來實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果骗炉。
語法格式：
animation:動(dòng)畫名稱 動(dòng)畫時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開始 播放次數(shù) 是否反方向;
[圖片上傳失敗...(image-104df9-1527494961606)]
關(guān)于幾個(gè)值照宝，除了名字，動(dòng)畫時(shí)間句葵，延時(shí)有嚴(yán)格順序要求其它隨意r
@keyframes 動(dòng)畫名稱 {
from{ 開始位置 } 0%
to{ 結(jié)束 } 100%
}
animation-iteration-count:infinite; 無限循環(huán)播放
animation-play-state:paused; 暫停動(dòng)畫"
小汽車案例
body {
background: white;
}
img {
width: 200px;
}
.animation {
animation-name: goback;
animation-duration: 5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
@keyframes goback {
0%{}
49%{
transform: translateX(1000px);
}
55%{
transform: translateX(1000px) rotateY(180deg);
}
95%{
transform: translateX(0) rotateY(180deg);
}
100%{
transform: translateX(0) rotateY(0deg);
}
}
伸縮布局(CSS3)
CSS3在布局方面做了非常大的改進(jìn)厕鹃，使得我們對(duì)塊級(jí)元素的布局排列變得十分靈活，適應(yīng)性非常強(qiáng)乍丈，其強(qiáng)大的伸縮性剂碴，在響應(yīng)式開中可以發(fā)揮極大的作用。
主軸：Flex容器的主軸主要用來配置Flex項(xiàng)目轻专，默認(rèn)是水平方向
側(cè)軸：與主軸垂直的軸稱作側(cè)軸忆矛，默認(rèn)是垂直方向的
方向：默認(rèn)主軸從左向右，側(cè)軸默認(rèn)從上到下
主軸和側(cè)軸并不是固定不變的请垛，通過flex-direction可以互換催训。
[圖片上傳失敗...(image-b6a099-1527494961606)]
Flex布局的語法規(guī)范經(jīng)過幾年發(fā)生了很大的變化，也給Flexbox的使用帶來一定的局限性宗收，因?yàn)檎Z法規(guī)范版本眾多漫拭，瀏覽器支持不一致，致使Flexbox布局使用不多
**2混稽、各屬性詳解******
1.flex子項(xiàng)目在主軸的縮放比例嫂侍，不指定flex屬性，則不參與伸縮分配
min-width 最小值 min-width: 280px 最小寬度 不能小于 280
max-width: 1280px 最大寬度 不能大于 1280
2.flex-direction調(diào)整主軸方向（默認(rèn)為水平方向）
flex-direction: column 垂直排列
flex-direction: row 水平排列
http://m.ctrip.com/html5/ 攜程網(wǎng)手機(jī)端地址
3荚坞、justify-content調(diào)整主軸對(duì)齊（水平對(duì)齊）
子盒子如何在父盒子里面水平對(duì)齊
| 值 | 描述 | 白話文 |
|---|---|---|
| flex-start | 默認(rèn)值挑宠。項(xiàng)目位于容器的開頭。 | 讓子元素從父容器的開頭開始排序但是盒子順序不變 |
| flex-end | 項(xiàng)目位于容器的結(jié)尾颓影。 | 讓子元素從父容器的后面開始排序但是盒子順序不變 |
| center | 項(xiàng)目位于容器的中心各淀。 | 讓子元素在父容器中間顯示 |
| space-between | 項(xiàng)目位于各行之間留有空白的容器內(nèi)。 | 左右的盒子貼近父盒子诡挂，中間的平均分布空白間距 |
| space-around | 項(xiàng)目位于各行之前碎浇、之間临谱、之后都留有空白的容器內(nèi)。 | 相當(dāng)于給每個(gè)盒子添加了左右margin外邊距 |
4奴璃、align-items調(diào)整側(cè)軸對(duì)齊（垂直對(duì)齊）
子盒子如何在父盒子里面垂直對(duì)齊（單行）
| 值 | 描述 | 白話文 |
|---|---|---|
| stretch | 默認(rèn)值悉默。項(xiàng)目被拉伸以適應(yīng)容器。 | 讓子元素的高度拉伸適用父容器（子元素不給高度的前提下) |
| center | 項(xiàng)目位于容器的中心苟穆。 | 垂直居中 |
| flex-start | 項(xiàng)目位于容器的開頭抄课。 | 垂直對(duì)齊開始位置 上對(duì)齊 |
| flex-end | 項(xiàng)目位于容器的結(jié)尾。 | 垂直對(duì)齊結(jié)束位置 底對(duì)齊 |
5雳旅、flex-wrap控制是否換行
當(dāng)我們子盒子內(nèi)容寬度多于父盒子的時(shí)候如何處理
| 值 | 描述 |
|---|---|
| nowrap | 默認(rèn)值跟磨。規(guī)定靈活的項(xiàng)目不拆行或不拆列。 不換行攒盈，則 收縮（壓縮） 顯示 強(qiáng)制一行內(nèi)顯示 |
| wrap | 規(guī)定靈活的項(xiàng)目在必要的時(shí)候拆行或拆列抵拘。 |
| wrap-reverse | 規(guī)定靈活的項(xiàng)目在必要的時(shí)候拆行或拆列，但是以相反的順序型豁。 |
6僵蛛、flex-flow是flex-direction、flex-wrap的簡(jiǎn)寫形式
flex-flow: flex-direction flex-wrap;
白話記： flex-flow: 排列方向 換不換行;
兩個(gè)中間用空格
例如：
display: flex;
/* flex-direction: row;
flex-wrap: wrap; 這兩句話等價(jià)于下面的這句話*/
flex-flow: column wrap; /* 兩者的綜合 */
7迎变、align-content堆棧（由flex-wrap產(chǎn)生的獨(dú)立行）多行垂直對(duì)齊方式齊
align-content是針對(duì)flex容器里面多軸(多行)的情況,align-items是針對(duì)一行的情況進(jìn)行排列充尉。
必須對(duì)父元素設(shè)置自由盒屬性display:flex;，并且設(shè)置排列方式為橫向排列flex-direction:row;并且設(shè)置換行氏豌，flex-wrap:wrap;這樣這個(gè)屬性的設(shè)置才會(huì)起作用喉酌。
| 值 | 描述 | 測(cè)試 |
|---|---|---|
| stretch | 默認(rèn)值热凹。項(xiàng)目被拉伸以適應(yīng)容器泵喘。 | |
| center | 項(xiàng)目位于容器的中心。 | |
| flex-start | 項(xiàng)目位于容器的開頭般妙。 | |
| flex-end | 項(xiàng)目位于容器的結(jié)尾纪铺。 | |
| space-between | 項(xiàng)目位于各行之間留有空白的容器內(nèi)。 | |
| space-around | 項(xiàng)目位于各行之前碟渺、之間鲜锚、之后都留有空白的容器內(nèi)。 |
8苫拍、order控制子項(xiàng)目的排列順序芜繁，正序方式排序，從小到大
用css 來控制盒子的前后順序绒极。 用order 就可以
用整數(shù)值來定義排列順序骏令，數(shù)值小的排在前面÷⑻幔可以為負(fù)值榔袋。 默認(rèn)值是 0
order: 1;
此知識(shí)點(diǎn)重在理解周拐，要明確找出主軸、側(cè)軸凰兑、方向妥粟，各屬性對(duì)應(yīng)的屬性值
文字陰影(CSS3)
以后我們可以給我們的文字添加陰影效果了 Shadow 影子
text-shadow:水平位置 垂直位置 模糊距離 陰影顏色;
[圖片上傳失敗...(image-ab1375-1527494961606)]
- 前兩項(xiàng)是必須寫的。 后兩項(xiàng)可以選寫吏够。
[圖片上傳失敗...(image-db5b36-1527494961607)]
BFC(塊級(jí)格式化上下文)
BFC(Block formatting context)
直譯為"塊級(jí)格式化上下文"勾给。
元素的顯示模式
我們前面講過 元素的顯示模式 display。
分為 塊級(jí)元素 行內(nèi)元素 行內(nèi)塊元素 稿饰，其實(shí)锦秒，它還有很多其他顯示模式。
<img src="media/dis.png" style="border: 1px dashed #ccc; padding: 5px;" />
那些元素會(huì)具有BFC的條件
不是所有的元素模式都能產(chǎn)生BFC喉镰，w3c 規(guī)范：
display 屬性為 block, list-item, table 的元素旅择，會(huì)產(chǎn)生BFC.
大家有么有發(fā)現(xiàn)這個(gè)三個(gè)都是用來布局最為合理的元素，因?yàn)樗麄兙褪怯脕砜梢暬季帧?/p>
注意其他的侣姆，display屬性生真，比如 line 等等，他們創(chuàng)建的是 IFC 捺宗，我們暫且不研究柱蟀。
這個(gè)BFC 有著具體的布局特性：
<img src="media/box.gif" />
有寬度和高度 ， 有 外邊距margin 有內(nèi)邊距padding 有邊框 border蚜厉。
就好比长已，你有了練習(xí)武術(shù)的體格了。 有潛力昼牛，有資質(zhì)术瓮。
<img src="media/gu.jpeg" width="400" />
什么情況下可以讓元素產(chǎn)生BFC
以上盒子具有BFC條件了，就是說有資質(zhì)了贰健，但是怎樣觸發(fā)才會(huì)產(chǎn)生BFC胞四，從而創(chuàng)造這個(gè)封閉的環(huán)境呢？
在好比伶椿，你光有資質(zhì)還不行辜伟，你需要一定額外效果才能出發(fā)的武學(xué)潛力，要么你掉到懸崖下面脊另，撿到了一本九陰真經(jīng)导狡，要么你學(xué)習(xí)葵花寶典，欲練此功必先....
<img src="media/kuihua.png" />
同樣偎痛，要給這些元素添加如下屬性就可以觸發(fā)BFC旱捧。
-float屬性不為none
-position為absolute或fixed
-display為inline-block, table-cell, table-caption, flex, inline-flex
-overflow不為visible。
BFC元素所具有的特性
BFC布局規(guī)則特性：
1.在BFC中看彼，盒子從頂端開始垂直地一個(gè)接一個(gè)地排列.
2.盒子垂直方向的距離由margin決定廊佩。屬于同一個(gè)BFC的兩個(gè)相鄰盒子的margin會(huì)發(fā)生重疊
3.在BFC中囚聚，每一個(gè)盒子的左外邊緣（margin-left）會(huì)觸碰到容器的左邊緣(border-left)（對(duì)于從右到左的格式來說，則觸碰到右邊緣）标锄。
- BFC的區(qū)域不會(huì)與浮動(dòng)盒子產(chǎn)生交集顽铸，而是緊貼浮動(dòng)邊緣。
- 計(jì)算BFC的高度時(shí)料皇，自然也會(huì)檢測(cè)浮動(dòng)或者定位的盒子高度谓松。
它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與践剂， 它規(guī)定了內(nèi)部的Block-level Box如何布局鬼譬，并且與這個(gè)區(qū)域外部毫不相干。
白話文： 孩子在家里愿意怎么折騰都行逊脯，但是出了家門口优质，你就的乖乖的，不能影響外面的任何人军洼。
<img src="media/xiong.jpeg" width="400" />
BFC的主要用途
BFC能用來做什么巩螃？
(1) 清除元素內(nèi)部浮動(dòng)
只要把父元素設(shè)為BFC就可以清理子元素的浮動(dòng)了，最常見的用法就是在父元素上設(shè)置overflow: hidden樣式匕争，對(duì)于IE6加上zoom:1就可以了避乏。
主要用到
計(jì)算BFC的高度時(shí)，自然也會(huì)檢測(cè)浮動(dòng)或者定位的盒子高度甘桑。
<img src="media/fu.jpg" />
(2) 解決外邊距合并問題
外邊距合并的問題拍皮。
主要用到
盒子垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰盒子的margin會(huì)發(fā)生重疊
屬于同一個(gè)BFC的兩個(gè)相鄰盒子的margin會(huì)發(fā)生重疊跑杭，那么我們創(chuàng)建不屬于同一個(gè)BFC铆帽，就不會(huì)發(fā)生margin重疊了。
<img src="media/ma.png" />
(3) 制作右側(cè)自適應(yīng)的盒子問題
主要用到
普通流體元素BFC后艘蹋，為了和浮動(dòng)元素不產(chǎn)生任何交集锄贼，順著浮動(dòng)邊緣形成自己的封閉上下文
<img src="media/you.png" />
BFC 總結(jié)
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器票灰，容器里面的子元素不會(huì)影響到外面的元素女阀。反之也如此。包括浮動(dòng)屑迂，和外邊距合并等等浸策，因此，有了這個(gè)特性惹盼，我們布局的時(shí)候就不會(huì)出現(xiàn)意外情況了庸汗。
優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)
什么是漸進(jìn)增強(qiáng)（progressive enhancement）、優(yōu)雅降級(jí)（graceful degradation）呢手报？
漸進(jìn)增強(qiáng) progressive enhancement：
針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面蚯舱，保證最基本的功能改化，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)枉昏。
類似 爬山陈肛，由低出往高處爬
<img src="media/pa.png" width="400" />
<b>優(yōu)雅降級(jí) graceful degradation：</b>
一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
類似蹦極，由高處往低處下落
<img src="media/xia.jpg" />
區(qū)別：漸進(jìn)增強(qiáng)是向上兼容嚎于，優(yōu)雅降級(jí)是向下兼容顺饮。
個(gè)人建議： 現(xiàn)在互聯(lián)網(wǎng)發(fā)展很快， 連微軟公司都拋棄了ie瀏覽器蚕捉，轉(zhuǎn)而支持 edge這樣的高版本瀏覽器，我們很多情況下沒有必要再時(shí)刻想著低版本瀏覽器了，而是一開始就構(gòu)建完整的效果啃匿，根據(jù)實(shí)際情況，修補(bǔ)低版本瀏覽器問題蛆楞。
瀏覽器前綴
| 瀏覽器前綴 | 瀏覽器 |
|---|---|
| -webkit- | Google Chrome, Safari, Android Browser |
| -moz- | Firefox |
| -o- | Opera |
| -ms- | Internet Explorer, Edge |
| -khtml- | Konqueror |
后面我們會(huì)有 常用的解決H5和C3 的兼容解決文件立宜， 我們這里暫且不涉及。
背景漸變
在線性漸變過程中臊岸，顏色沿著一條直線過渡：從左側(cè)到右側(cè)橙数、從右側(cè)到左側(cè)、從頂部到底部帅戒、從底部到頂部或著沿任何任意軸灯帮。如果你曾使用過制作圖件，比如說Photoshop逻住，你對(duì)線性漸變并不會(huì)陌生钟哥。
兼容性問題很嚴(yán)重，我們這里之講解線性漸變
語法格式：
background:-webkit-linear-gradient(漸變的起始位置瞎访， 起始顏色腻贰， 結(jié)束顏色)；
background:-webkit-linear-gradient(漸變的起始位置扒秸， 顏色 位置播演， 顏色位置....)；
背景縮放(CSS3)
通過background-size設(shè)置背景圖片的尺寸伴奥，就像我們?cè)O(shè)置img的尺寸一樣写烤，在移動(dòng)Web開發(fā)中做屏幕適配應(yīng)用非常廣泛。
其參數(shù)設(shè)置如下：
a) 可以設(shè)置長度單位(px)或百分比（設(shè)置百分比時(shí)拾徙，參照盒子的寬高）
b) 設(shè)置為cover時(shí)洲炊，會(huì)自動(dòng)調(diào)整縮放比例，保證圖片始終填充滿背景區(qū)域，如有溢出部分則會(huì)被隱藏暂衡。我們平時(shí)用的cover 最多
c) 設(shè)置為contain會(huì)自動(dòng)調(diào)整縮放比例询微，保證圖片始終完整顯示在背景區(qū)域。
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */
多背景(CSS3)
以逗號(hào)分隔可以設(shè)置多背景狂巢，可用于自適應(yīng)布局 做法就是 用逗號(hào)隔開就好了拓提。
- 一個(gè)元素可以設(shè)置多重背景圖像。
- 每組屬性間使用逗號(hào)分隔隧膘。
- 如果設(shè)置的多重背景圖之間存在著交集（即存在著重疊關(guān)系）代态，前面的背景圖會(huì)覆蓋在后面的背景圖之上。
- 為了避免背景色將圖像蓋住疹吃，背景色通常都定義在最后一組上蹦疑，
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px ,
url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;
