一荞下、自我介紹
二、html問(wèn)題
- html5的新特性:
1.用于繪畫的 canvas 元素
2.用于媒介回放的 video 和 audio 元素
3.對(duì)本地離線存儲(chǔ)的更好的支持
4.新的特殊內(nèi)容元素词渤，語(yǔ)義化標(biāo)簽：比如 article、footer串绩、header缺虐、nav、section
5.新的表單控件礁凡，比如 calendar高氮、date、time顷牌、email剪芍、url、search
- input和textarea的區(qū)別：
1.<input>是一個(gè)單行輸入框窟蓝，有value屬性（value屬性指定初始值）罪裹，但是它不能自動(dòng)換行；用來(lái)放置字?jǐn)?shù)較少的單行文字內(nèi)容
<input type="text" name="content" value="內(nèi)容在這里">
2.<textarea>是一個(gè)多行輸入框，沒(méi)有value屬性状共，但是它能自動(dòng)換行套耕；一般讓用戶可以輸入多行文字,輸入的文字信息量相比較大
<textarea id="content" name="content" style="width: 90%; height: 300px; margin-top:5px;" >"內(nèi)容在這里"</textarea>
其中name="content"這個(gè)字段一定要和數(shù)據(jù)庫(kù)中的字段對(duì)應(yīng)，不然內(nèi)容插不到數(shù)據(jù)庫(kù)中口芍。
-
用一個(gè)div模擬textarea的實(shí)現(xiàn)
//html <div contenteditable="true"> .....此處省略..... </div> //css div{ width: 400px; min-height: 100px; //設(shè)置最小高度 max-height: 300px;//設(shè)置最大高度箍铲，超出就出現(xiàn)滾動(dòng)條 _height: 100px; //IE6 margin-left: auto; margin-right: auto; padding: 3px; outline: 0; border: 1px solid #a0b3d6; font-size: 12px; word-wrap: break-word; overflow-x: hidden; overflow-y: auto; //超過(guò)最大高度就出現(xiàn)滾動(dòng)條 _overflow-y: visible; } 移動(dòng)設(shè)備忽略將頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼的方法
<meta name = "format-detection" content = "telephone=no">
三、css問(wèn)題
左右布局鬓椭，左邊定寬，右邊自適應(yīng)关划，不少于三種方式
BFC IFC的理解
BFC直譯為"塊級(jí)格式化上下文"小染，就是頁(yè)面上的一個(gè)隔離的渲染區(qū)域，容器里面的子元素不會(huì)在布局上影響到外面的元素
如何產(chǎn)生BFC:
float的值不為none贮折。
overflow的值不為visible裤翩。
position的值不為relative和static。
display的值為table-cell, table-caption, inline-block中的任何一個(gè)调榄。
有什么用：比如常見(jiàn)的多欄布局踊赠，結(jié)合塊級(jí)別元素浮動(dòng)，里面的元素則是在一個(gè)相對(duì)隔離的環(huán)境里運(yùn)行每庆。
IFC(Inline Formatting Contexts)直譯為"內(nèi)聯(lián)格式化上下文",
水平居中：當(dāng)一個(gè)塊要在環(huán)境中水平居中時(shí)筐带，設(shè)置其為inline-block則會(huì)在外層產(chǎn)生IFC，通過(guò)text-align則可以使其水平居中缤灵。
垂直居中：創(chuàng)建一個(gè)IFC伦籍，用其中一個(gè)元素?fù)伍_(kāi)父元素的高度，然后設(shè)置其vertical-align:middle腮出，其他行內(nèi)元素則可以在此父元素下垂直居中帖鸦。
- 柵格的理解
1、為什么使用bootstrap胚嘲？
如果能指出瀏覽器支持情況作儿、移動(dòng)優(yōu)先、響應(yīng)式布局馋劈、簡(jiǎn)單易寫攻锰、統(tǒng)一編碼風(fēng)格的話，那基本算過(guò)了侣滩。
2口注、什么是bootstrap柵格系統(tǒng)？
聽(tīng)到12字樣就算過(guò)了君珠，如果自己會(huì)解釋為什么是12格寝志，而不是14、16格，那就說(shuō)明對(duì)柵格系統(tǒng)有很深的了解材部。
3.為什么是12列
因?yàn)?2是1毫缆，2，3乐导，4苦丁，6的最小公倍數(shù)，所以12列柵格系統(tǒng)相對(duì)較靈活物臂，支持將一行分成1列旺拉，2列，3列棵磷，4列蛾狗，6列。
- CSS3用過(guò)哪些新特性
- CSS3的選擇器
1）E:last-child 匹配父元素的最后一個(gè)子元素E仪媒。
2）E:nth-child(n)匹配父元素的第n個(gè)子元素E沉桌。
3）E:nth-last-child(n) CSS3 匹配父元素的倒數(shù)第n個(gè)子元素E。
2.@Font-face 特性
Font-face 可以用來(lái)加載字體樣式算吩，而且它還能夠加載服務(wù)器端的字體文件留凭，讓客戶端顯示客戶端所沒(méi)有安裝的字體。
@font-face {
font-family: BorderWeb;
src:url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src:url(RUNICMT0.eot);
}
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
- 圓角：border-radius: 15px;
- 陰影：text-shadow
- 漸變：-webkit-gradien
- 彈性盒子模型：flex-box
.container{
display:flex;
justify-content:center;
align-items: center;
}
- css3動(dòng)畫特效：
1)Transition 對(duì)象變換時(shí)的過(guò)渡效果
2)Transforms 2D轉(zhuǎn)換效果
3)Animation動(dòng)畫特效
- 媒體查詢
- 水平居中有哪些實(shí)現(xiàn)方法
1.行內(nèi)元素的水平居中： text-align:center;
2.塊狀元素的水平居中 ： margin:0 auto;
3.多個(gè)塊狀元素的水平居中 ：傳統(tǒng)的方法是將要水平排列的塊狀元素設(shè)為display:inline-block偎巢，然后在父級(jí)元素上設(shè)置text-align:center
4.未知高度蔼夜，flexbox水平居中：display:flex; justify-content:center;
- 已知高度寬度元素的水平垂直居中
1.利用絕對(duì)定位，將元素的top和left屬性都設(shè)為50%艘狭，再利用margin邊距挎扰，將元素回拉它本身高寬的一半，實(shí)現(xiàn)垂直居中巢音。核心CSS代碼如下：
#container{
position:relative;
}
#center{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
}
2.絕對(duì)定位與margin:這種方法也是利用絕對(duì)定位與margin遵倦，但是無(wú)需知道被垂直居中元素的高和寬。核心代碼如下
#container{
position:relative;
}
#center{
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
- 1像素邊框問(wèn)題:
1.border-image 圖片 實(shí)現(xiàn) (騰訊)這篇文章是騰訊github上的解決方案
border-image來(lái)實(shí)現(xiàn)的 鏈接走起 《使用border-image實(shí)現(xiàn)類似iOS7的1px底邊》官撼，缺點(diǎn)是梧躺，你需要制作圖片，圓角的時(shí)候會(huì)出現(xiàn)模糊傲绣。
.border-image-1px {
border-width: 1px 0px;
-webkit-border-image: url("data:image/png;base64,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") 2 0 stretch;
}
2.background-image 漸變實(shí)現(xiàn):除啦用圖片掠哥，難道純粹的css就不能實(shí)現(xiàn)嗎？我的確不想使用圖片秃诵，感覺(jué)制作起來(lái)很麻煩续搀，其實(shí)百度糯米團(tuán)首頁(yè)就是這么做的但是這種方法有個(gè)缺點(diǎn)，就是不能實(shí)現(xiàn)圓角
.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
linear-gradient(270deg, red, red 50%, transparent 50%),
linear-gradient(0deg, red, red 50%, transparent 50%),
linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
}
3.viewport+rem實(shí)現(xiàn):這篇文章的解決方案是使用
viewport+rem+js來(lái)實(shí)現(xiàn)的 鏈接走起 《移動(dòng)端1像素邊框問(wèn)題的解決方案》菠净，里邊還引入了張?chǎng)涡翊笊竦奈恼?《設(shè)備像素比devicePixelRatio簡(jiǎn)單介紹》禁舷，優(yōu)點(diǎn)是可以直接設(shè)置1px就行了彪杉，剩下的就交給js了，而且圓角什么的都沒(méi)問(wèn)題牵咙。
<span style="font-size:18px;"><html>
<head>
<title>1px question</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style>
html {
font-size: 1px;
}
* {
padding: 0;
margin: 0;
}
.bds_b {
border-bottom: 1px solid #ccc;
}
.a,
.b {
margin-top: 1rem;
padding: 1rem;
font-size: 1.4rem;
}
.a {
width: 30rem;
}
.b {
background: #f5f5f5;
width: 20rem;
}
</style>
<script>
var viewport = document.querySelector("meta[name=viewport]");
//下面是根據(jù)設(shè)備像素設(shè)置viewport
if (window.devicePixelRatio == 1) {
viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
}
if (window.devicePixelRatio == 2) {
viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');
}
if (window.devicePixelRatio == 3) {
viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
}
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;
</script>
</head>
<body>
<div class="bds_b a">下面的底邊寬度是虛擬1像素的</div>
<div class="b">上面的邊框?qū)挾仁翘摂M1像素的</div>
</body>
</html></span>
4.box-shadow 實(shí)現(xiàn):利用陰影我們也可以實(shí)現(xiàn)派近，那么我們來(lái)看看陰影，優(yōu)點(diǎn)是圓角不是問(wèn)題洁桌，缺點(diǎn)是顏色不好控制渴丸。
div{
-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
}
四、js問(wèn)題
- 圖片懶加載
vue-lazyload插件
圖片懶加載的原理：
1.首先我們把這段js封裝到自執(zhí)行函數(shù)里面另凌，也就是:
(function(){})()
2.聲明所需參數(shù):
var imgList = [],delay,time,offset;
3.監(jiān)聽(tīng)scroll事件谱轨，執(zhí)行節(jié)流函數(shù)
function imgLoad(selector){
_selector = selector || '.imgLazyLoad';
let nodes = document.querySelectorAll(selector);
imgList = Array.apply(null,nodes);
window.addEventListener('scroll',_delay,false)
};
4.聲明節(jié)流函數(shù)
function _delay(){//函數(shù)節(jié)流
clearTimeout(delay);
delay = setTimeout(() => {
_loadImg();
},time)
};
- 下劃線函數(shù)：加下劃線函數(shù)命名沒(méi)有特殊功能，只是一種約定成俗的做法途茫，表明這是一個(gè)私有函數(shù)（并沒(méi)有強(qiáng)制規(guī)定使用碟嘴，看團(tuán)隊(duì)習(xí)慣斟酌使用）
函數(shù)節(jié)流目的：在類似scroll、resize事件中執(zhí)行大量DOM操作或者計(jì)算時(shí)囊卜，就會(huì)出現(xiàn)再次觸發(fā)事件而上一次事件中的DOM操作和計(jì)算還沒(méi)完成的情況，結(jié)果瀏覽器掉幀了错沃，導(dǎo)致性能下降栅组，影響用戶體驗(yàn)。
想了解更多相關(guān)知識(shí)點(diǎn)枢析，請(qǐng)點(diǎn)擊瀏覽器瀏覽器scroll優(yōu)化
函數(shù)節(jié)流原理：每次執(zhí)行_delay函數(shù)先清除上一次setTimeout生成的引用玉掸，阻止上一次的函數(shù)調(diào)用（如果還沒(méi)執(zhí)行的話），然后創(chuàng)建一個(gè)新的setTimeout醒叁，在time保存的時(shí)間間隔后調(diào)用函數(shù)
5.加載圖片
function _loadImg(){//執(zhí)行圖片加載
for(let i = 0,len =imgList.length; i < len; i++){
if(_isShow(imgList[i])){
imgList[i].src = imgList[i].getAttribute('data-src');
imgList.splice(i,1);
}
}
};
6.判斷圖片是否顯示
function _isShow(el){
let coords = el.getBoundingClientRect();
return (coords.left >= 0 && coords.left >= 0 && coords.top) <=(document.documentElement.clientHeight || window.innerHeight) + parseInt(offset);
};
何時(shí)顯示圖片?
當(dāng)圖片出現(xiàn)在屏幕可視局域時(shí)顯示~
怎么判斷圖片出現(xiàn)在圖片可視區(qū)域司浪？
通過(guò)調(diào)用元素的getBoundingClientRect方法獲得一個(gè)包含了一組用于描述邊框的相對(duì)于視口的左上角位置而言的只讀屬性——left、top把沼、right和bottom啊易，在和瀏覽器視口相應(yīng)寬高進(jìn)行對(duì)比即可判斷元素是否出現(xiàn)在可視區(qū)域中，offset是偏差值饮睬，可以進(jìn)行顯示偏差設(shè)置
-
頁(yè)面加載的進(jìn)度條怎么實(shí)現(xiàn)的：如下圖租谈，在頁(yè)面加載的時(shí)候，上方紅色的進(jìn)度條
image
1.定義一個(gè)id為progress的div捆愁，給它寫動(dòng)畫
body{
margin:0; //它沒(méi)有貼在頁(yè)面的邊緣割去，所以還需要將body的margin去掉
}
#progress{
height:2px;
background:red;
transition:opacity 500ms linear // 線條消失時(shí)太突兀了，我們需要讓它漸漸消失掉昼丑，需要用到CSS的transation屬性呻逆。
}
@-webkit-keyframes pulse{ //定義首尾關(guān)鍵幀動(dòng)畫
0%(width:0;)
100%(width:100%;)
}
然后對(duì)元素應(yīng)用動(dòng)畫，設(shè)定動(dòng)畫時(shí)間為3秒：
#progress{
-webkit-animation:pulse 3s;
}
<script>
$({property: 0}).animate({property:100}),{
duration:3000,
step:function () {
var percentage = Math.round(this.property);
$('#progress').css('width',percentage+"%");
if (percentage == 100){
$("#progress").addclass("done"); //完成菩帝，隱藏進(jìn)度條
}
}
}
</script>
- 手寫事件模型及事件代理/委托
DOM：addEventListener咖城、removeEventListener茬腿、dispatchEvent
IE-DOM：attachEvent、detachEvent酒繁、fireEvent
jQuery：on滓彰、off、trigger
事件的三個(gè)階段：捕獲州袒，目標(biāo)揭绑，冒泡階段，低版本IE不支持捕獲階段
IE和W3C標(biāo)準(zhǔn) 綁定事件的區(qū)別郎哭？參數(shù)分別是什么他匪？以及IE事件對(duì)象中的e有什么區(qū)別：
標(biāo)準(zhǔn)：
/*
參數(shù)：
eventName:事件的名字
function:事件處理函數(shù)
Boolean:捕獲或者冒泡,默認(rèn)是false冒泡
*/
/*事件對(duì)象e作為參數(shù)傳入*/
addEventListener(eventName,function(e){
},false);
ie8以下：
/*
參數(shù)：
onEvnet:是事件處理程序的名字，而不是事件名夸研，就是說(shuō)在事件名前加上on
function:事件處理函數(shù)
*/
/*
e=window.event邦蜜，事件event是window的一個(gè)屬性
*/
attachEvent(onEventName,function(){
var e=window.event;
})
事件代理的原理及優(yōu)缺點(diǎn):
原理：靠事件冒泡實(shí)現(xiàn)的
優(yōu)點(diǎn)：
大量減少內(nèi)存占用，減少事件注冊(cè)
新增子對(duì)象時(shí)無(wú)需再次對(duì)其綁定事件亥至，對(duì)于動(dòng)態(tài)內(nèi)容不符尤其適用
缺點(diǎn)：
適用于表格/列表等重復(fù)性dom元素,事件代理用不好可能出現(xiàn)事件誤判悼沈，即本不應(yīng)該觸發(fā)事件的元素被綁定了事件
手寫原生js實(shí)現(xiàn)事件代理
要求：兼容瀏覽器
考點(diǎn)：事件對(duì)象e，IE下事件對(duì)應(yīng)的屬性名姐扮。
重點(diǎn)是要說(shuō)到target,currentTarget以及IE下的srcElement和this絮供。
五.http問(wèn)題（http狀態(tài)碼，get, post,輸入一個(gè)url茶敏，enter之后發(fā)生了什么）
5.項(xiàng)目問(wèn)題（怎么處理移動(dòng)端兼容性問(wèn)題壤靶，性能優(yōu)化問(wèn)題，用過(guò)哪些vue的插件惊搏，兼容es6嗎）
6.需要問(wèn)面試官的問(wèn)題:
滴滴的技術(shù)棧贮乳，對(duì)高級(jí)前端工程師的理解
