Web前端技術由html厉斟、css和 javascript三大部分構成，是一個龐大而復雜的技術體系阅畴，其復雜程度不低于任何一門后端語言定页。而我們在學習它的時候往往是先從某一個點切入，然后不斷地接觸和學習新的知識點酗电，因此對于初學者很難理清楚整個體系的脈絡結構魄藕。本文將對Web前端知識體系進行簡單的梳理，對應的每個知識點點到為止撵术，不作詳細介紹背率。目的是幫助大家審查自己的知識結構是否完善，如有遺漏或不正確的地方，希望共勉寝姿。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CSS
1交排、CSS選擇器
CSS選擇器即通過某種規(guī)則來匹配相應的標簽，并為其設置CSS樣式饵筑，常用的有類選擇器埃篓、標簽選擇器、ID選擇器根资、后代選擇器架专、群組選擇器、偽類選擇器(before/after)玄帕、兄弟選擇器(+~)部脚、屬性選擇器等等。
2裤纹、CSS Reset
HTML
標簽在不設置任何樣式的情況下委刘，也會有一個默認的CSS樣式，而不同內(nèi)核瀏覽器對于這個默認值的設置則不盡相同鹰椒，這樣可能會導致同一套代碼在不同瀏覽器上的顯示效果不一致锡移，而出現(xiàn)兼容性問題。因此漆际，在初始化時罩抗，需要對常用標簽的樣式進行初始化，使其默認樣式統(tǒng)一灿椅，這就是CSS
Reset ，即CSS樣式重置钞支，比如：*{margin:0,padding:0} 就是最簡單CSS Reset茫蛹， 關于CSS重置請參考：Neat.css
小編為（新【加企鵝裙】手）想學前端（【9五】福）或者正在學前端的小伙伴們（【6七】利）準備了（獲【6六】取）一些資料烁挟，是小編整理的（方【60四】式）一份零基礎教程婴洼。作為新手福利送給大家。
3撼嗓、盒子布局
盒子模型是CSS比較重要的一個概念柬采，也是CSS 布局的基石。
常見的盒子模型有塊級盒子(block)和行內(nèi)盒子(inline-block)且警，與盒子相關的幾個屬性有：margin粉捻、border、padding和content
等斑芜，這些屬性的作用是設置盒子與盒子之間的關系以及盒子與內(nèi)容之間的關系肩刃。其中，只有普通文檔流中塊級盒子的垂直外邊距才會發(fā)生合并，而行內(nèi)盒子盈包、浮動盒子或絕對定位之間的外邊距不會合并沸呐。另外，box-sizing
屬性的設置會影響盒子width和height的計算呢燥。
4崭添、浮動布局
設置元素的 float 屬性值為 left 或
right，就能使該元素脫離普通文檔流叛氨，向左或向右浮動呼渣。一般在做宮格布局時會用到，如果子元素全部設置為浮動力试，則父元素是塌陷的徙邻，這時就需要清除浮動，清除浮動的方法也很多畸裳，常用的方法是在元素末尾加空元素設置clear:both缰犁，
更高級一點的就給父容器設置before/after來模擬一個空元素，還可以直接設置overflow屬性為auto/hidden來清除浮動怖糊。除浮動可以實現(xiàn)宮格布局帅容，行內(nèi)盒子(inline-block)和table也可以實現(xiàn)同樣的效果。
5伍伤、定位布局
設置元素的position屬性值為 relative/absolute/fixed并徘，就可以使該元素脫離文檔流，并以某種參照坐標進行偏移扰魂。其中麦乞，releave
是相對定位，它以自己原來的位置進行偏移劝评，偏移后姐直，原來的空間不會被其他元素占用；absolute
是絕對定位蒋畜，它以離自己最近的定位父容器作為參照進行偏移声畏；為了對某個元素進行定位，常用的方式就是設置父容器的poistion:relative姻成，因為相對定位元素在不設置
top 和 left 值時插龄，不會對元素位置產(chǎn)生影響；fixed
即固定定位科展，它則以瀏覽器窗口為參照物均牢，PC網(wǎng)頁底部懸停的banner一般都可以通過fixed定位來實現(xiàn)，但fixed屬性在移動端有兼容性問題才睹，因此不推薦使用膨处，可替代的方案是：絕對定位+內(nèi)部滾動见秤。
6、彈性布局
彈性布局即Flex布局真椿，定義了flex的容器一個可伸縮容器鹃答，首先容器本身會根據(jù)容器中的元素動態(tài)設置自身大小突硝；然后當Flex容器被應用一個大小時（width和height）测摔，將會自動調(diào)整容器中的元素適應新大小。Flex容器也可以設置伸縮比例和固定寬度解恰，還可以設置容器中元素的排列方向（橫向和縱向）和是否支持元素的自動換行锋八。有了這個神器，做頁面布局的可以方便很多了护盈。注意挟纱，設為Flex布局以后，子元素的float腐宋、clear和vertical-align
屬性將失效紊服。
7、CSS3 動畫
CSS3中規(guī)范引入了兩種動畫胸竞，分別是 transition 和 animation欺嗤，transition
可以讓元素的CSS屬性值的變化在一段時間內(nèi)平滑的過渡，形成動畫效果卫枝，為了使元素的變換更加豐富多彩煎饼，CSS3還引入了transfrom
屬性，它可以通過對元素進行 平移(translate)校赤、旋轉(rotate)吆玖、放大縮小(scale)、傾斜(skew)
等操作马篮，來實現(xiàn)2D和3D變換效果沾乘。transiton 還有一個結束事件
transitionEnd，該事件是在CSS完成過渡后觸發(fā)积蔚，如果過渡在完成之前被移除，則不會觸發(fā)transitionEnd 烦周。
animation 需要設置一個@keyframes尽爆，來定義元素以哪種形式進行變換，
然后再通過動畫函數(shù)讓這種變換平滑的進行读慎，從而達到動畫效果漱贱，動畫可以被設置為永久循環(huán)演示。設置?animation-play-state:paused
可以暫停動畫夭委，設置?animation-fill-mode:forwards
可以讓動畫完成后定格在最后一幀幅狮。另外，還可以通過JS監(jiān)聽animation的開始、結束和重復播放時的狀態(tài)崇摄，分別對應三個事件擎值，即
animationStart、animationEnd逐抑、animationIteration 鸠儿。注意，當播放次數(shù)設置為1時厕氨，不會觸發(fā)
animationIteration 进每。
和 transition相比，animation 設置動畫效果更靈活更豐富命斧，還有一個區(qū)別是：transition
只能通過主動改變元素的css值才能觸發(fā)動畫效果田晚，而animation一旦被應用，就開始執(zhí)行動畫国葬。另外贤徒，HTML5 還新增了一個動畫API，即
requestAnimationFrame胃惜，它通過JS來調(diào)用泞莉，并按照屏幕的繪制頻率來改變元素的CSS屬性，從而達到動畫效果船殉。
8鲫趁、BFC
BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面元素利虫。比如：內(nèi)部滾動就是一個BFC挨厚，當一個父容器的overflow-y設置為auto時，并且子容器的長度大于父容器時糠惫，就會出現(xiàn)內(nèi)部滾動疫剃，無論內(nèi)部的元素怎么滾動，都不會影響父容器以外的布局硼讽，這個父容器的渲染區(qū)域就叫BFC巢价。滿足下列條件之一就可觸發(fā)BFC：
根元素，即HTML元素
float的值不為none
overflow的值不為visible
display的值為inline-block固阁、table-cell壤躲、table-caption
position的值為absolute或fixed
9、Sprite备燃，Iconfont碉克，@font-face
對于大型站點，為了減少http請求的次數(shù)并齐，一般會將常用的小圖標排到一個大圖中漏麦，頁面加載時只需請求一次網(wǎng)絡客税，
然后在css中通過設置background-position來控制顯示所需要的小圖標，這就是Sprite圖撕贞。
Iconfont更耻，即字體圖標，就是將常用的圖標轉化為字體資源存在文件中麻掸，通過在CSS中引用該字體文件酥夭，然后可以直接用控制字體的css屬性來設置圖標的樣式，字體圖標的好處是節(jié)省網(wǎng)絡請求脊奋、其大小不受屏幕分辨率的影響熬北，并且可以任意修改圖標的顏色。
@font-face是CSS3中的一個模塊诚隙，通過@font-face可以定義一種全新的字體讶隐，然后就可以通過css屬性font-family來使用這個字體了，即使操作系統(tǒng)沒有安裝這種字體久又，網(wǎng)頁上也會正常顯示出來巫延。
10、CSS Hack
早期地消，不同內(nèi)核瀏覽器對CSS屬性的解析存在著差異炉峰，導致顯示效果不一致，比如 margin
屬性在ie6中顯示的距離會比其他瀏覽器中顯示的距離寬2倍脉执，也就是說margin-left:20px;在ie6中距左側元素的實際顯示距離是40px疼阔，而在非ie6的瀏覽器上顯示正常。因此半夷，如果要想讓所有瀏覽器中都顯示是20px的寬度婆廊，就需要在CSS樣式中加入一些特殊的符號，讓不同的瀏覽器識別不同的符號巫橄，以達到應用不同的CSS樣式的目的淘邻，這種方式就是css
hack， 對于ie6中的margin應用hack就會變成這樣：.el {margin-left:20px;_margin-left:10px}
兼容各大瀏覽器的 css hack 如下：
