應屆畢業生的前端“幹貨”（一）
相信很多軟件工程專業的學生，在面臨就業的這個階段中，都處在一個很尷尬的位置：有一定基礎，但沒有實打實的工作經驗，這就導致在學習時無法找到適合自己的定位。
網絡上現有的教學視頻，大多是針對工作了一定年限的程序員開設的高階課程，對我們來說顯然不合適，還有一些是零基礎的入門視頻，內容又太過簡單，學校早已做過系統的講解，就算當時學的不是太好，也不願一次又一次的重復聽那些熟悉的內容，畢竟工作的壓力時刻懸在頭。
對於現階段的我們來說，需要的是有針對性的講解和訓練，內容脫離最原始的基礎概念（當然我不是說基礎不重要），而逐步涉及那些高階程序員們覺得很簡單的常識，但大多數小白其實都不清楚的技術和技巧，還有實用且必要的面試技巧，對於某些不善言辭的程序員來說，這一點尤為重要！
總而言之，就是幹貨！
針對自己的所學查漏補缺，我認為最好的方式是能找一個隨時為自己解答疑惑的老師，或是編程大牛，畢竟我們遇到的某些問題只有自己才能解釋清楚，看網上的視頻課程很難準確涉及到。
下面，筆者將分享一些有關前端的“幹貨”，僅作為隨堂筆記整理下來，某些地方可能只有自己能看懂，望勿怪！
一、面試要點
1、面試要自信！
面試要自信！
面試要自信！
（重要的事情說三遍）
展露自信會為你贏得更大的成功幾率，畢竟，自信的人總有獨特的人格魅力，不是嗎？建議面試前拍拍自己的臉頰，深吸幾口氣，甩甩頭，振奮精神後再推門不遲，況且，面試官不是家長，也不是班主任，不必畏畏縮縮。
2、誠信面試
公司聘用員工，需要的是能帶來價值的高質量員工，因此人品也是衡量面試者的一大要點，因此弄虛作假沒有半點好處，對於吃技術飯的軟件行業，虛假簡歷，面試作弊，誇大其詞，進入工作後很快就會暴露出自己的不足，丟人丟臉丟工作！
3、掌握面試節奏
常見的前端面試題一共就那麽幾種類型，也沒有後端那麽復雜的算法邏輯運算，所以很容易反客為主，總結下來大概有以下幾點：
① 侃侃而談：面試官通常都會問，你在以往的開發中遇到過什麽問題，是怎麽解決的，這是一道開放題，你可以在此之前專門對某一問題做專門研究，不需要它的難度有多高，但一定要嘗試多種解決方式，在面試時就可以拿出來逐一列舉，並對比優缺點，最後給出推薦方案，這樣一共三十分鐘的面試，一個問題就能用掉近十分鐘，把節奏掌握在自己熟悉的領域之中。
註意：這裏一定要在平時多積累，多儲備，若只是空談，很容易被認為是話癆，打上虛有其表的標簽。
② 料敵於先：俗話說“實話最哄人”，有時意識到面試官問的這個問題自己並不擅長，一定要提前說明，比如首先回答“這個技術需要用到jsbridge，它是
註意：還是要品勢多積累，若是提問時你連使用jsbridge都不知道，那就GG了。
4、多說專業名詞
能說專業術語盡量別說人話，當然僅限於專業術語，別瞎扯其他，比如“我的hobby是編程，公司的style也let我very舒服...”這樣聽著想吐的內容。
下面列舉一些不是很常見的詞匯（部分）：
FE：Front End 前端
PM：Product Manager 產品經理
UE: User Experience 用戶體驗師
Service：後端
mock數據：模擬後臺數據（適用於沒有後端接口時，調試前端界面）
Showcase測試：測試到開發的電腦上進行，主要執行一下關鍵測試用例、流程用例，由開發操作，測試人員一起查看。showcase不通過，則打回，郵件發出。
SEO:搜索引擎優化
BFC：塊狀格式化上下文，產生一塊獨立的區域，裏面的子元素不會影響外面的布局
二、項目開發流程
區別一位面試者是否真的擁有實際開發經驗，下面是一個項目的完整開發流程。
1、PM提需求，出原型
2、UE定交互，UI出設計圖
3、需求評審（PM，FE，Service，設計，測試） 估工時
4、開發階段（獨立完成各自的部分）
5、前後端聯調（mock數據）
6、showcase（測試）
7、提測
8、修復bug
9、上線
10、回歸（回歸測試）
三、基礎知識要點（只摘要點，非系統講解）
1．HTML 超文本標記語言
2．CSS 層疊樣式表（即多維立體）
3．<!Doctype> 標簽：Doctype告訴了瀏覽器以什麽規則去解析當前文檔。
4．<html>是文檔的根節點：很重要，也是很容易忽視的一個點，操作DOM對象時謹記。
5．<meta name=’decscription’ content=’’>有利於網頁SEO
6．<meta name=”viewport” content=””> 進行不同設備的適配
7．將Js在頁面內容後面，body之中引入，防止中斷頁面渲染，使白屏時間過長。
8．標簽語義化的主要好處：1.有利於SEO 2.有利於項目的維護與開發
9．a標簽：跳轉鏈接，當同時擁有href屬性和Onclick事件時，首先執行Js文件中的方法，阻止默認事件。
10．首屏樣式可以寫在style樣式裏，防止白屏時間過長
11．對於CSS的優先級問題
(1) ID 權值100；class 權值10；標簽 權值1；*>=0 權值可以相加。最終比大小
(2) 對於同一元素，有相同權值的多個樣式，按照樣式的先後順序決定（註意：這裏不是說調動的順序，而是指文檔解析時加載的順序，即在Head中誰寫在後面，誰顯示 ）
例：
<head> <meta charset="UTF-8"> <style type="text/css"> .classA{ background-color: red; } .classB{ background-color: green; } </style> </head> <body> <div class="classB classA"></div> </body>
就選先調用的是classB，後調用classA，但後者並不會覆蓋前者的樣式，因為文檔解析時，先讀到classA的樣式是紅色，然後又發現classB是綠色，因此覆蓋掉了前面的classA，最後顯示為綠色。
(3) !importent > 行內樣式（style） > #ID > .class > 標簽
(4) 內聯樣式和外聯樣式也是看誰寫在後面
(5) !importent 是最無敵的，無敵！
12．相關樣式
① A 標簽:text-decoration:none;
② 縮進：text-indent:1em;
③ 單行省略（必須有寬度）：
{
overflow:hidden; //超出部分隱藏
white-space:nowrap; //強制不換行
text-overflow:ellipsis //省略號
};
④ 設置背景圖片大小：
1) Background-size: 100%;
2) Background-size：cover 圖片寬高比不變，鋪滿整個容器的寬高，圖片多出來的部分會被裁減掉。
3) Background-size：contain 圖片寬高比不變，縮放至圖片自身能完全顯示出來，容器會有留白區域。
13．標簽分類：
① 常用塊狀元素：div p h1~h6 table ul ol form
獨占一行
支持寬高、margin、padding （四個方向）
默認寬度為父容器高度
② 行內元素： span a strong b em i
共享一行
不支持寬高 margin、padding只支持左右，不支持上下
默認寬度為內容
③ 行內塊元素：img
共享一行
支持寬高
默認寬度為內容
14．盒模型：由裏到外依次為：content padding border margin
(1) 標準盒模型：width=content
(2) IE盒模型：width=content+padding+border
(3) Padding:百分比
參照的是父元素的“寬度”！
可用於16:9的頭布局（即padding-bottom:56.25%;）
(4) Margin
① 重疊：兄弟節點在同一方向（豎直）設置margin和padding會發生重疊現象
1) 正正取最大值
2) 正負相加
3) 負負取最小值
② 拖拽：父子節點之間，子節點設置值margin（豎直方向），會拖累父節點，即在父節點上實現margin效果
解決拖拽：
1) overflow:hidden （觸發當前元素變成BFC）
2) 添加border-top
3) 添加padding-top
15．Auto Margin: 0 auto;——填充剩余空間
① block元素：不設置寬，默認占100% 自動填充。
設置了寬，破壞掉自動填充。
② 規則：對於設置了寬度的block元素的剩余空間：
一邊設定值，一邊設auto，那麽auto就是剩余空間
兩邊設auto，則兩邊共同平分剩余空間
③ 問題：margin: auto 0; 無法垂直居中
解決：改變文檔流變為垂直布局
writing-mode: vertical-lr //垂直方向自左向右書寫
16．浮動：
(1) 用法要求
① 每次用浮動後，都要清浮動（解決父容器高度塌陷問題——即設置浮動後，若父元素沒有具體高度，則不再顯示）
② 用浮動是盡量設置元素寬度
③ 一個元素設置浮動後，同級別元素也設置浮動
(2) 清浮動方法：
① 添加一個具有clear: both 屬性的元素
.clearfix:after {
content:’’;
dislay:block;
height:0;
visibility:hidden;
clear:both;
}
② 觸發BFC（overflow:hidden）
17．z-index:
子元素永遠比父元素高。
應屆畢業生的前端“幹貨”（一）