面試准備
一、技術棧准備
jQuery 源碼（核心架構、事件委托、插件機制）—— 看相關的博客文章
Vue React Angular
node.js
前端工程方面 ( sass/less gulp grunt webpack npm browserify )
二、自我介紹准備
簡歷
- 基本信息，學歷
- 工作經歷，時間-公司-崗位-職責-技術棧-業績
- 開源項目
自我陳述
- 把握面試的溝通方向
- 豁達、自信的適度發揮
一面 / 二面
- 頁面布局
- CSS盒模型
- DOM事件
- HTTP協議
- 面向對象
- 原型鏈
- 通信
- 安全
- 算法
一、頁面布局
- 浮動
- 絕對定位
- flex-box
- display: table-cell
- grid布局
基本
<style> html *{ padding: 0; margin: 0; } .layout article div{ min-height: 100px; } </style>
1. 浮動方案
<section class="layout float"> <style media="screen"> .layout.float .left{ float: left; width: 300px; background-color: red; } .layout.float .right{ float: right; width: 300px; background-color: blue; } .layout.float .center{ background-color: yellow; } </style> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>浮動解決方案</h1> 中間部分自適應 </div> </article> </section>
2. 絕對定位
<section class="layout absolute"> <style media="screen"> .layout.absolute .left-center-right > div{ position: absolute; } .layout.absolute .left{ left: 0; width: 300px; background-color: red; } .layout.absolute .center{ left: 300px; right: 300px; background-color: yellow; } .layout.absolute .right{ right: 0; width:300px; background-color: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>絕對定位解決方案</h1> 中間部分自適應 </div> </article> </section>
3. flex-box
<section class="layout flexbox"> <style media="screen"> .layout.flexbox .left-center-right{ display: flex; } .layout.flexbox .left{ width: 300px; background-color: red; } .layout.flexbox .center{ flex: 1; background-color: yellow; } .layout.flexbox .right{ width: 300px; background-color: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>flexbox解決方案</h1> 中間部分自適應 </div> <div class="right"></div> </article> </section>
4. 表格布局
<section class="layout table"> <style media="screen"> .layout.table .left-center-right{ width: 100%; display: table; height: 100px; } .layout.table .left-center-right > div{ display: table-cell; } .layout.table .left{ width: 300px; background-color: red; } .layout.table .center{ background-color: yellow; } .layout.table .right{ width: 300px; background-color: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>表格布局解決方案</h1> 中間部分自適應 </div> <div class="right"></div> </article> </section>
5.網格布局
<section class="layout grid"> <style media="screen"> .layout.grid .left-center-right{ display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 300px auto 300px; } .layout.grid .left{ background-color: red; } .layout.grid .center{ background-color: yellow; } .layout.grid .right{ background-color: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>網格布局解決方案</h1> 中間部分自適應 </div> <div class="right"></div> </article> </section>
拓展：
每個解決方案的優缺點？
浮動：
- 脫離了文檔流，容易帶來問題
- 兼容性好
絕對定位
- 快捷
- 脫離文檔流，下面子元素也要脫離
flex
- 好用，解決上述問題
- PC IE8不支持
表格
- 代碼簡單，兼容性好
- 單元格會同時增高
網格
- 新技術
- 老版本兼容問題
假設去掉高度，考慮縱向，那個方案適用？
flex 和 表格布局 會自動撐開，其他會超出不適用。
上下寬度固定，中間自適應
基本
<style> html * { margin: 0; padding: 0; } .top-center-bottom > div{ width: 100%; } html,body{ height: 100%; } </style>
1.浮動方法
<style media="screen"> div{ box-sizing: border-box; } .layout{ height: 100%; } .top-center-bottom{ height: 100%; } .top{ float: left; height: 100px; background-color: red; } .center{ height: 100%; padding-top: 100px; padding-bottom: 100px; background-color: yellow; } .bottom{ float: left; margin-top: -100px; height: 100px; background-color: blue; } </style> <div class="layout"> <div class="top-center-bottom"> <div class="top"></div> <div class="center"> <p>中間為自適應</p> <p>中間為自適應</p> <p>中間為自適應</p> </div> <div class="bottom"></div> </div> </div>
2. 絕對定位方法
<div class="layout"> <div class="top-center-bottom"> <style media="screen"> .top-center-bottom > div{ position: absolute; } .top{ height: 100px; background-color: red; top: 0; } .center{ top: 100px; bottom:100px; background-color: yellow; } .bottom{ bottom: 0; height: 100px; background-color: blue; } </style> <div class="top"></div> <div class="center"> <p>中間為自適應</p> <p>中間為自適應</p> <p>中間為自適應</p> <p>中間為自適應</p> </div> <div class="bottom"></div> </div> </div>
3. flex布局
<style media="screen"> .layout{ height: 100%; } .top-center-bottom{ height: 100%; display: flex; flex-direction: column; } .top{ height: 100px; background-color: red; } .center{ flex: 1; background-color: yellow; } .bottom{ height: 100px; background-color: blue; } </style> <div class="layout"> <div class="top-center-bottom"> <div class="top"></div> <div class="center"> <p>中間為自適應</p> <p>中間為自適應</p> <p>中間為自適應</p> </div> <div class="bottom"></div> </div> </div>
4. table布局
<style media="screen"> .layout{ height: 100%; } .top-center-bottom{ width: 100%; height: 100%; display: table; } .top-center-bottom > div{ display: table-row; vertical-align: middle; } .top{ height: 100px; background-color: red; } .center{ background-color: yellow; } .bottom{ height: 100px; background-color: blue; } </style> <div class="layout"> <div class="top-center-bottom"> <div class="top"></div> <div class="center"> <p>中間為自適應</p> <p>中間為自適應</p> <p>中間為自適應</p> </div> <div class="bottom"></div> </div> </div>
5. 網格布局
<style media="screen"> .layout{ height: 100%; } .top-center-bottom{ width: 100%; height: 100%; display: grid; grid-template-rows: 100px auto 100px; grid-template-columns: 100%; } .top{ background-color: red; } .center{ background-color: yellow; } .bottom{ background-color: blue; } </style> <div class="layout"> <div class="top-center-bottom"> <div class="top"></div> <div class="center"> <p>中間為自適應</p> <p>中間為自適應</p> <p>中間為自適應</p> </div> <div class="bottom"></div> </div> </div>
兩欄布局同理，更簡單。
二、CSS 盒模型
- 談談你對CSS盒模型的認識
- 基本概念： 標准模型+IE模型、區別
- CSS如何設置這兩種模型
- JS如何設置獲取合模型對應的寬高
- 根據盒模型解釋邊距重疊
- BFC（邊距重疊解決方案）
CSS盒模型
標准模型 的寬度就是content寬度，不含padding, border
IE模型 寬度計算包含 padding, border
box-sizing: content-box
box-sizing: border-box
dom.style.width / height —— 只能取內聯樣式的寬高 （style標簽內和外聯的無法取到）
dom.currentStyle.width / height —— 瀏覽器最終渲染以后的寬高 （只支持IE）
window.getComputedStyle( dom ).width / height —— 瀏覽器最終渲染以后的寬高 （firefox, chrome）
兼容寫法：
function getStyle( obj, attr) { if( obj.currentStyle ) { return obj.currentStyle[attr]; } else{ return getComputedStyle( obj, true )[attr]; }
dom.getBoundingClientRect().width / height —— 計算一個元素的絕對位置
邊距重疊
<section id="sec"> <style media="screen"> #sec{ background-color: red; overflow: hidden; } .child{ height: 100px; background-color: yellow; margin-top: 10px; } </style> <article class="child"></article> </section>
為什么加了 overflow: hidden; 高度就變成110px 了？
答：創建了BFC，塊級格式化上下文
BFC原理：
- BFC元素垂直方向發生重疊
- BFC元素浮動的BOX重疊
- BFC是獨立容器，內外元素不會影響
- BFC高度計算時，浮動元素也參與計算
創建BFC：
- float 值不為 none;
- position 值不為 static 或 relative
- display 值為table
- overflow 值為 auto 或 hidden
BFC 使用場景：
BFC垂直方向邊距重疊 與 消除重疊
<!-- BFC垂直方向邊距重疊 與 消除重疊--> <section id="margin"> <style> #margin{ background-color: pink; overflow: hidden; } #margin p{ margin: 10px auto 25px; background-color: red; } </style> <p>1</p>
<!-- 在外層包裹了DIV消除重疊-->
<div style="overflow:hidden;"> <p>2</p> </div> <p>3</p> </section>
BFC 消除float 重疊
<!-- BFC不與float 重疊 --> <section id="layout"> <style> #layout{ background-color: red; } #layout .left{ float: left; width: 100px; height: 100px; background-color: pink; } #layout .right{ height: 110px; background-color: #ccc; /* 重點 */ overflow: auto; } </style> <div class="left"></div> <div class="right"></div> </section>
BFC 清除浮動
<!-- BFC清除浮動 --> <section id="float"> <style> #float{ background-color: red; /* overflow: hidden; */ /* float: left; */ overflow: auto; } #float .float{ float: left; font-size: 30px; } </style> <div class="float">我是浮動元素</div> </section>
總結：BFC元素在計算高度的時候，會考慮內部元素 float ，子元素float 也不影響父元素的高度計算。