一、查閱文檔
推薦的網(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ǔ)選擇器都有使用場景，都需要掌握。如果是修改樣式，類選擇器是使用最多的。

五、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基本采取簡寫形式即可
(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í)際情況，總是有更簡單的方法實(shí)現(xiàn)

九、傳統(tǒng)網(wǎng)頁布局的三種方式（簡單點(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)檢測高度。父級(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ū)），我們測量可得知。
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、偽元素選擇器