一砂缩、查閱文檔
推薦的網(wǎng)站：
1居扒、http://www.w3school.com.cn/
2怕篷、https://developer.mozilla.org/zh-CN/

二湖饱、Chrome調(diào)試工具
Chrome瀏覽器提供了一個(gè)非常好的調(diào)試工具室谚，可以用來調(diào)試HTML結(jié)構(gòu)和CSS樣式。
1石挂、Ctrl+滾輪 可以放大開發(fā)者工具代碼大小博助。
2、左邊是HTML元素結(jié)構(gòu)痹愚，右邊是CSS樣式富岳。
3、右邊CSS樣式可以改動(dòng)數(shù)值（左右箭頭或者直接輸入）和查看顏色拯腮。
4窖式、Ctrl+0 復(fù)原瀏覽器大小。
5动壤、如果點(diǎn)擊元素萝喘，發(fā)現(xiàn)右側(cè)沒有樣式引入，極有可能是類名或者樣式引入錯(cuò)誤。
6蜒灰、如果有樣式弦蹂，但是樣式前面有黃色感嘆號(hào)，則是樣式屬性書寫錯(cuò)誤强窖。

三、推薦安裝的插件
1削祈、Chinese language Pack for VS Code 中文語言包翅溺。
2、Open in Browser 右擊選擇瀏覽器打開HTML文件髓抑。
3咙崎、JS-CSS-HTML Formatter 每次保存，都會(huì)自動(dòng)格式化js css html代碼吨拍。
4褪猛、Auto Rename Tag 自動(dòng)重命名配對(duì)的HTML/XML標(biāo)簽。
5羹饰、CSS PeeK 追蹤至樣式伊滋。

四、CSS基礎(chǔ)選擇器
1队秩、標(biāo)簽選擇器笑旺，作用：可以選出所有相同的標(biāo)簽，比如p馍资。特點(diǎn)：不能差異化選擇筒主。使用情況：較多。用法：p {color : red;} 鸟蟹。
2乌妙、類選擇器，作用：可以選出1個(gè)或者多個(gè)標(biāo)簽建钥。特點(diǎn)：可以根據(jù)需求選擇藤韵。使用情況：非常多。用法：.nav {color : red;} 锦针。
3荠察、id簽選擇器，作用：一次只能選擇一個(gè)標(biāo)簽奈搜。特點(diǎn)：id屬性只能在每個(gè)HTML文檔中出現(xiàn)一次悉盆。使用情況：一般和js搭配。用法：#nav {color : red;} 馋吗。
4焕盟、通用符選擇器，作用：選擇所有的標(biāo)簽。特點(diǎn)：選擇的太多脚翘，有部分不需要灼卢。使用情況：特殊情況使用。用法：* {color : red;} 来农。
注意：每個(gè)基礎(chǔ)選擇器都有使用場(chǎng)景鞋真，都需要掌握。如果是修改樣式沃于，類選擇器是使用最多的涩咖。

五、Emmet語法
1繁莹、快速生成HTML結(jié)果語法
(1)檩互、生成標(biāo)簽直接輸入標(biāo)簽名，按tab鍵即可咨演。比如div 然后tab鍵闸昨，就可以生成<div></div> 。
(2)薄风、如果想生成多個(gè)相同標(biāo)簽饵较，加上就可以了。比如div 就可以快速生成3個(gè)div 村刨。
(3)告抄、如果有父子關(guān)系的標(biāo)簽，可以用>嵌牺。比如 ul>li就可以了打洼。
(4)、如果有兄弟關(guān)系的標(biāo)簽逆粹，用+就可以了募疮。比如div+p 。
(5)僻弹、如果生成帶有類名或者id名字的阿浓，直接寫 .demo 或者 #two，tab鍵就可以了 蹋绽。
(6)芭毙、如果生成的div類名是有順序的，可以用自增符號(hào) $ 卸耘。
(7)退敦、如果想要在生成的標(biāo)簽內(nèi)部寫內(nèi)容，可以用 {} 表示 蚣抗。
2侈百、快速生成CSS樣式語法，CSS基本采取簡(jiǎn)寫形式即可
(1)、比如 w200 按tab鍵 可以生成 width: 200px;
(2)钝域、比如 lh26 按tab鍵 可以生成 line-height: 26px;

六讽坏、CSS復(fù)合選擇器
1、后代選擇器例证，作用：用來選擇后代元素路呜。特點(diǎn)：可以是子孫后代。使用情況：較多织咧。隔開符號(hào)及用法：符號(hào)是空格 .nav a
2拣宰、子代選擇器，作用：選擇最近一級(jí)元素烦感。特點(diǎn)：只選親兒子。使用情況：較少膛堤。隔開符號(hào)及用法：符號(hào)是大于 .nav>a
3手趣、并集選擇器，作用：選擇某些相同樣式的元素肥荔。特點(diǎn)：可以用于集體聲明绿渣。使用情況：較多。隔開符號(hào)及用法：符號(hào)是空格 .nav, .header
4燕耿、鏈接偽選擇器中符，作用：選擇不同狀態(tài)的鏈接。特點(diǎn)：跟鏈接相關(guān)誉帅。使用情況：較多淀散。隔開符號(hào)及用法：重點(diǎn)記住 a{} 和 a:hover 實(shí)際開發(fā)的寫法
5、:foucs選擇器蚜锨，作用：選擇獲得光標(biāo)的表單档插。特點(diǎn)：跟表單相關(guān)。使用情況：較少亚再。隔開符號(hào)及用法：input:focus

七郭膛、CSS元素顯示模式
1、塊元素
常見的塊元素有<h1> ~ <h6>氛悬、<p>则剃、<div>、<ul>如捅、<ol>棍现、<li>等，其中<div>標(biāo)簽是最典型的塊元素伪朽。
(1)轴咱、塊元素的特點(diǎn)：
1>、比較霸道，自己獨(dú)占一行
2>朴肺、高度窖剑、寬度、外邊距及內(nèi)邊距都可以控制
3>戈稿、寬度默認(rèn)是容器（父級(jí)）的100%
4>西土、是一個(gè)容器級(jí)盒子，里面可以放行內(nèi)或者快級(jí)元素
(2)鞍盗、注意：
1>需了、文字類的元素內(nèi)不能使用快級(jí)元素
2>、<p>標(biāo)簽主要用于存放文字般甲，因此<p>里面不能放塊級(jí)元素肋乍，特別是不能放<div>
3>、同理敷存，<h1> ~ <h6>等都是文字類塊級(jí)標(biāo)簽墓造，里面也不能放塊級(jí)元素
2、行內(nèi)元素
常見的行內(nèi)元素有<a>锚烦、<strong>觅闽、<b>、<em>涮俄、<I>蛉拙、<del>、<s>彻亲、<ins>孕锄、<u>、<span>等睹栖，其中<span>標(biāo)簽是最典型的行內(nèi)元素硫惕。有的地方也是將行內(nèi)元素稱為內(nèi)聯(lián)元素。
(1)野来、行內(nèi)的特點(diǎn)：
1>恼除、相鄰行內(nèi)元素在一行上，一行可以顯示多個(gè)
2>曼氛、高豁辉、寬直接設(shè)置是無效的
3>、默認(rèn)寬度就是他本身內(nèi)容的寬度
4>舀患、行內(nèi)元素只能容納文本或其他行內(nèi)元素
(2)注意：
1>徽级、鏈接里面不能再放鏈接
2>、特殊情況鏈接 <a> 里面可以放塊級(jí)元素聊浅，但是給 <a> 轉(zhuǎn)換一下快模式最安全
3餐抢、行內(nèi)快元素
在行內(nèi)元素中有幾個(gè)特殊的標(biāo)簽 <img/>现使、<input/>、<tb>旷痕，他們同時(shí)具有塊元素和行內(nèi)元素的特點(diǎn)碳锈。
(1)、行內(nèi)塊元素的特點(diǎn)：
1>欺抗、和相鄰行內(nèi)元素（行內(nèi)快）在一行上售碳，但是他們之間會(huì)有空白縫隙。一行可以顯示多個(gè)（行內(nèi)元素特點(diǎn)）
2>绞呈、默認(rèn)寬度就是他本身內(nèi)容的寬度（行內(nèi)元素特點(diǎn)）
3>贸人、寬度、行高佃声、外邊距以及內(nèi)邊距都可以控制（塊級(jí)元素特點(diǎn)）
4艺智、塊級(jí)、行內(nèi)圾亏、行內(nèi)塊元素對(duì)比：
(1)力惯、塊級(jí)元素，元素排列：一行只能放一個(gè)塊級(jí)元素召嘶。設(shè)置樣式：可以設(shè)置寬度高度。默認(rèn)寬度：容器的100%哮缺。包含：容器級(jí)可以包含任何標(biāo)簽
(2)弄跌、行內(nèi)元素，元素排列：一行可以放多個(gè)行內(nèi)元素尝苇。設(shè)置樣式：不可以直接設(shè)置寬度高度铛只。默認(rèn)寬度：他本身內(nèi)容的寬度。包含：容納文本或者其他行內(nèi)元素
(3)糠溜、行內(nèi)塊元素淳玩，元素排列：一行可以放多個(gè)行內(nèi)塊元素。設(shè)置樣式：可以設(shè)置寬度高度非竿。默認(rèn)寬度：他本身內(nèi)容的寬度
(4)蜕着、元素顯示模式轉(zhuǎn)換，比如增加鏈接<a>的觸發(fā)范圍红柱。 轉(zhuǎn)換為塊元素：display:block承匣；轉(zhuǎn)換為行內(nèi)元素：display:inline；轉(zhuǎn)換為行內(nèi)塊元素：display:inline-block

八锤悄、CSS布局總結(jié)
1韧骗、布局為啥用不同盒子，我只想用div零聚？
標(biāo)簽都是有含義的袍暴，合理的地方用合理的標(biāo)簽些侍。比如產(chǎn)品標(biāo)題就用h，大量文字就用p
2政模、為啥用那么多類名岗宣？
類名就是給每個(gè)盒子起一個(gè)名字，可以更好的找到每個(gè)盒子览徒，選取盒子更容易狈定，后期維護(hù)也方便
3、到底用margin還是padding习蓬？
大部分情況可以混用纽什，兩者各有優(yōu)缺點(diǎn)，但是根據(jù)實(shí)際情況躲叼，總是有更簡(jiǎn)單的方法實(shí)現(xiàn)

九芦缰、傳統(tǒng)網(wǎng)頁布局的三種方式（簡(jiǎn)單點(diǎn)說就是盒子如何進(jìn)行排列順序）
1、普通流（標(biāo)準(zhǔn)流）枫慷，就是標(biāo)簽按照規(guī)定好默認(rèn)方式排列
(1)让蕾、塊級(jí)元素會(huì)獨(dú)占一行，從上向下順序排列
常用元素：div或听、hr探孝、p、h1~h6誉裆、ul顿颅、ol、from足丢、table
(2)粱腻、行內(nèi)元素會(huì)按照順序，從左向右順序排列斩跌，碰到父元素邊緣則自動(dòng)換行
常用元素：span绍些、a、I耀鸦、em等
2柬批、浮動(dòng)
3、定位

十袖订、浮動(dòng)
1萝快、為什么需要浮動(dòng)
有很多布局效果，標(biāo)準(zhǔn)流沒有辦法實(shí)現(xiàn)著角，此時(shí)就可以利用浮動(dòng)完成布局揪漩。因?yàn)楦?dòng)可以改變?cè)貥?biāo)簽?zāi)J(rèn)的排列方式。
浮動(dòng)最典型的應(yīng)用：可以讓多個(gè)塊級(jí)元素一行內(nèi)排列顯示吏口。
網(wǎng)頁布局第一準(zhǔn)則：多個(gè)塊級(jí)元素縱向排列找標(biāo)準(zhǔn)流奄容，多個(gè)塊級(jí)元素橫向排列找浮動(dòng)冰更。
2、什么是浮動(dòng)
float屬性用于創(chuàng)建浮動(dòng)型框昂勒，將其移動(dòng)到一邊蜀细，直到左邊緣或右邊有觸及包含快活另一個(gè)浮動(dòng)框的邊緣。
3戈盈、浮動(dòng)的特性
(1)奠衔、浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)流。
(2)塘娶、浮動(dòng)的元素會(huì)一行內(nèi)顯示并且元素頂部對(duì)其归斤。
(3)、浮動(dòng)的元素會(huì)具有行內(nèi)塊元素的特性刁岸。
4脏里、浮動(dòng)布局注意點(diǎn)
(1)、浮動(dòng)和標(biāo)注流的父盒子搭配虹曙。先用標(biāo)準(zhǔn)流的父元素排列上下位置迫横，之后內(nèi)部子元素采取浮動(dòng)排列左右位置。
(2)酝碳、一個(gè)元素浮動(dòng)了矾踱，理論上其余的兄弟元素也要浮動(dòng)。浮動(dòng)的盒子只會(huì)影響浮動(dòng)盒子后面的標(biāo)準(zhǔn)流疏哗，不會(huì)影響前面的標(biāo)注流介返。
5、清楚浮動(dòng)的本質(zhì)
(1)沃斤、清楚浮動(dòng)的本質(zhì)是清楚浮動(dòng)元素造成的影響。
(2)刃宵、如果父盒子本身有高度衡瓶，則不需要清除浮動(dòng)。
(3)牲证、清除浮動(dòng)后哮针，父級(jí)就會(huì)根據(jù)浮動(dòng)的子盒子自動(dòng)檢測(cè)高度。父級(jí)有了高度坦袍，就不會(huì)影響下面的標(biāo)準(zhǔn)流了十厢。
6、清楚浮動(dòng)方法
(1)捂齐、額外標(biāo)簽也稱為隔離法蛮放，是W3C推薦的做法。
(2)奠宜、父級(jí)添加overflow屬性包颁。
(3)瞻想、父級(jí)添加after偽元素。
(4)娩嚼、父級(jí)添加雙偽元素蘑险。

十一、CSS屬性書寫順序
1岳悟、布局定位屬性：display/position/float/clear/visibility/overflow
2佃迄、自身屬性：width/height/margin/padding/border/background
3、文本屬性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
4贵少、其他屬性(CSS3)：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…

十二呵俏、為了提高網(wǎng)頁制作的效率，布局時(shí)通常有以下的整體思路：
1春瞬、必須確定頁面的版心（可視區(qū)）柴信，我們測(cè)量可得知。
2宽气、分析頁面中的行模塊随常，以及每個(gè)行模塊中的列模塊。其實(shí)頁面布局第一準(zhǔn)則萄涯。
3绪氛、一行中的列模塊經(jīng)常浮動(dòng)布局，先確定每個(gè)列的大小涝影，之后確定列的位置枣察。頁面布局第二準(zhǔn)則。
4燃逻、制作HTML結(jié)構(gòu)序目。遵循先有結(jié)構(gòu)，后有樣式的原則伯襟。結(jié)構(gòu)永遠(yuǎn)最重要猿涨。

十三、定位
1姆怪、定位：將一個(gè)盒子定在某一個(gè)位置叛赚，所以定位也是在擺放盒子，按照定位的方式移動(dòng)盒子稽揭。定位 = 定位模式 + 邊移量俺附。
2、相對(duì)定位relative
相對(duì)定位是元素在移動(dòng)的時(shí)候溪掀，是相對(duì)于它原來的位置來說的事镣。
(1)、它是相對(duì)于自己原來的位置來移動(dòng)的揪胃。
(2)蛮浑、原來在標(biāo)準(zhǔn)流的位置繼續(xù)占有唠叛，后面的盒子仍然以標(biāo)準(zhǔn)流的方式對(duì)待它。（不脫標(biāo)沮稚，繼續(xù)保留原來位置）
(3)艺沼、相對(duì)定位并沒有脫標(biāo)。它最典型的應(yīng)用是給絕對(duì)定位當(dāng)?shù)摹?br> 3蕴掏、絕對(duì)定位 absolute
絕對(duì)定位是元素在移動(dòng)的時(shí)候障般，是相對(duì)于它祖先元素來說的。
(1)盛杰、如果沒有祖先元素或者祖先元素沒有定位挽荡，，則以瀏覽器為準(zhǔn)定位（Document文檔）即供。
(2)定拟、如果祖先元素有定位（相對(duì)、絕對(duì)逗嫡、固定定位）青自，則以最近一級(jí)的有定位元素為參考點(diǎn)移動(dòng)。
(3)驱证、絕對(duì)定位不在占有原先的位置延窜。
4、定位區(qū)別總結(jié)
(1)抹锄、static靜態(tài)定位逆瑞，是否脫標(biāo)：沒有；移動(dòng)位置：不能使用邊移伙单；是否常用：很少获高。
(2)、relative相對(duì)定位吻育，是否脫標(biāo)：否（占有位置）念秧；移動(dòng)位置：相對(duì)于自身位置移動(dòng)；是否常用：常用扫沼。
(3)、absolute絕對(duì)定位庄吼，是否脫標(biāo)：是（不占有位置）缎除；移動(dòng)位置：帶有定位的父級(jí)；是否常用：常用总寻。
(4)器罐、fixed固定定位，是否脫標(biāo)：是（不占有位置）渐行；移動(dòng)位置：瀏覽器可視區(qū)轰坊；是否常用：常用铸董。
(5)、sticky粘性定位肴沫，是否脫標(biāo)：否（占有位置）粟害；移動(dòng)位置：瀏覽器可視區(qū)；是否常用：當(dāng)前階段少颤芬。
5悲幅、定位的擴(kuò)展
(1)、定位的特殊特性站蝠，絕對(duì)定位和固定定位也和浮動(dòng)類似汰具。
1>、行內(nèi)元素添加絕對(duì)或者固定定位菱魔，可以直接設(shè)置高度和寬度留荔。
2>澜倦、塊級(jí)元素添加絕對(duì)或者固定定位，如果不給高度和寬度既荚，默認(rèn)大小就是內(nèi)容的大小栋艳。
(2)吸占、脫標(biāo)的盒子不會(huì)觸發(fā)外邊距塌陷。
浮動(dòng)元素兼蕊、絕對(duì)定位（固定定位）元素都不會(huì)觸發(fā)外邊距合并的問題孙技。
(3)排作、絕對(duì)定位（固定定位）會(huì)完全壓住盒子妄痪。
1>、浮動(dòng)元素不同裳瘪，只會(huì)壓住他下面標(biāo)準(zhǔn)流的盒子，但不會(huì)壓住下面標(biāo)準(zhǔn)流盒子里面的文字黄伊、圖片皆怕。但是絕對(duì)定位（固定定位）會(huì)壓住下面標(biāo)準(zhǔn)流所有的內(nèi)容。
2>憋活、浮動(dòng)之所以不會(huì)壓住盒子虱黄，因?yàn)楦?dòng)產(chǎn)生的目的最初是為了做文字環(huán)繞的效果，文字會(huì)圍繞浮動(dòng)元素辜梳。

十四泳叠、字體圖標(biāo)的下載
1危纫、icomoon 字庫，http://icomoon.io
2契耿、阿里iconfont 字庫搪桂，http://iconfont.cn/

十五踢械、CSS3新增選擇器
1魄藕、屬性選擇器
2泼疑、結(jié)構(gòu)偽類選擇器
3、偽元素選擇器