應屆畢業生的前端「乾貨」（一）

時間 2019-11-25

標籤應屆畢業生前端乾貨简体版

原文原文鏈接

相信不少軟件工程專業的學生，在面臨就業的這個階段中，都處在一個很尷尬的位置：有必定基礎，但沒有實打實的工做經驗，這就致使在學習時沒法找到適合本身的定位。css

網絡上現有的教學視頻，大可能是針對工做了必定年限的程序員開設的高階課程，對咱們來講顯然不合適，還有一些是零基礎的入門視頻，內容又太過簡單，學校早已作過系統的講解，就算當時學的不是太好，也不肯一次又一次的重複聽那些熟悉的內容，畢竟工做的壓力時刻懸在頭。html

對於現階段的咱們來講，須要的是有針對性的講解和訓練，內容脫離最原始的基礎概念（固然我不是說基礎不重要），而逐步涉及那些高階程序員們以爲很簡單的常識，但大多數小白其實都不清楚的技術和技巧，還有實用且必要的面試技巧，對於某些不善言辭的程序員來講，這一點尤其重要！前端

總而言之，就是乾貨！程序員

針對本身的所學查漏補缺，我認爲最好的方式是能找一個隨時爲本身解答疑惑的老師，或是編程大牛，畢竟咱們遇到的某些問題只有本身才能解釋清楚，看網上的視頻課程很難準確涉及到。面試

下面，筆者將分享一些有關前端的「乾貨」，僅做爲隨堂筆記整理下來，某些地方可能只有本身能看懂，望勿怪！算法

1、面試要點

1、面試要自信！編程

面試要自信！後端

面試要自信！瀏覽器

（重要的事情說三遍）網絡

展露自信會爲你贏得更大的成功概率，畢竟，自信的人總有獨特的人格魅力，不是嗎？建議面試前拍拍本身的臉頰，深吸幾口氣，甩甩頭，振奮精神後再推門不遲，何況，面試官不是家長，也不是班主任，沒必要畏畏縮縮。

二、誠信面試

公司聘用員工，須要的是能帶來價值的高質量員工，所以人品也是衡量面試者的一大要點，所以弄虛做假沒有半點好處，對於吃技術飯的軟件行業，虛假簡歷，面試做弊，誇大其詞，進入工做後很快就會暴露出本身的不足，丟人丟臉丟工做！

三、掌握面試節奏

常見的前端面試題一共就那麼幾種類型，也沒有後端那麼複雜的算法邏輯運算，因此很容易反客爲主，總結下來大概有如下幾點：

①　侃侃而談：面試官一般都會問，你在以往的開發中遇到過什麼問題，是怎麼解決的，這是一道開放題，你能夠在此以前專門對某一問題作專門研究，不須要它的難度有多高，但必定要嘗試多種解決方式，在面試時就能夠拿出來逐一列舉，並對比優缺點，最後給出推薦方案，這樣一共三十分鐘的面試，一個問題就能用掉近十分鐘，把節奏掌握在本身熟悉的領域之中。
注意：這裏必定要在平時多積累，多儲備，若只是空談，很容易被認爲是話癆，打上虛有其表的標籤。

②　料敵於先：俗話說「實話最哄人」，有時意識到面試官問的這個問題本身並不擅長，必定要提早說明，好比首先回答「這個技術須要用到jsbridge，它是Android和JavaScript相互調用的橋樑」，而後後面緊跟一句「可是它的具體原理我並非很清楚」之類的話，堵住面試官的嘴，這樣作，總比面試官提出問題後你答不上來要好得多。
注意：仍是要品勢多積累，如果提問時你連使用jsbridge都不知道，那就GG了。

四、多說專業名詞

能說專業術語儘可能別說人話，固然僅限於專業術語，別瞎扯其餘，好比「個人hobby是編程，公司的style也let我very舒服...」這樣聽着想吐的內容。
下面列舉一些不是很常見的詞彙（部分）：

FE：Front End 前端

PM：Product Manager 項目經理

UE: User Experience 用戶體驗師

Service：後端

mock數據：模擬後臺數據（適用於沒有後端接口時，調試前端界面）

Showcase測試：測試到開發的電腦上進行，主要執行一下關鍵測試用例、流程用例，由開發操做，測試人員一塊兒查看。showcase不經過，則打回，郵件發出。

SEO:搜索引擎優化

BFC：塊狀格式化上下文，產生一塊獨立的區域，裏面的子元素不會影響外面的佈局

2、項目開發流程

區別一位面試者是否真的擁有實際開發經驗，下面是一個項目的完整開發流程。

1、PM提需求，出原型

2、UE定交互，UI出設計圖

3、需求評審（PM，FE，Service，設計，測試）估工時

4、開發階段（獨立完成各自的部分）

5、先後端聯調（mock數據）

6、showcase（測試）

7、提測

8、修復bug

9、上線

10、迴歸（迴歸測試）

3、基礎知識要點（只摘要點，非系統講解）

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: 子元素永遠比父元素高。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。