關(guān)注公粽號(hào)“留白零壹”，有任何不懂的技術(shù)問(wèn)題都可隨時(shí)咨詢！
https://www.bilibili.com/video/BV1qL411u7eE?spm_id_from=333.999.0.0
一、一個(gè)200*200的div在不同分辨率屏幕上下左右居中，用css實(shí)現(xiàn)
div
{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-left:-100px;
height:-100px;
z-index:1000;
}
二、寫(xiě)一個(gè)左中右布局占滿屏幕，其中左右兩塊是固定寬度200 ，中間自適應(yīng)寬，要求先加載中間塊，請(qǐng)寫(xiě)出結(jié)構(gòu)及樣式：
<body>
<h3>實(shí)現(xiàn)三列寬度自適應(yīng)布局</h3>
<div id = "left">我是左邊</div>
<div id = "right">我是右邊</div>
<div id = "center">我是中間</div>
</body>
html,body{ margin: 0px;width: 100%; }
h3{height: 100px;margin:20px 0 0;}
#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}
#left{left:0px;}
#right{right: 0px;}
#center{margin:2px 210px ;background-color: #eee;height: 200px; }
三、闡述清楚浮動(dòng)的幾種方式（常見(jiàn)問(wèn)題）
1、父級(jí)div定義 height
原理：父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無(wú)法自動(dòng)獲取到高度的問(wèn)題。
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、容易掌握
缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問(wèn)題
2、父級(jí)div定義 overflow:hidden
原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:hidden時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好
4、結(jié)尾處加空div標(biāo)簽 clear:both
原理：添加一個(gè)空div，利用css提高的clear:both清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問(wèn)題
缺點(diǎn)：不少初學(xué)者不理解原理；如果頁(yè)面浮動(dòng)布局多，就要增加很多空div，讓人感覺(jué)很不好
5、解釋css sprites ，如何使用？
CSS Sprites其實(shí)就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。
CSS Sprites為一些大型的網(wǎng)站節(jié)約了帶寬，讓提高了用戶的加載速度和用戶體驗(yàn)，不需要加載更多的圖片
6、如何用原生js給一個(gè)按鈕綁定兩個(gè)onclick事件？
Var btn=document.getElementById(‘btn’);
//事件監(jiān)聽(tīng) 綁定多個(gè)事件
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
}
7、拖拽會(huì)用到哪些事件
dragstart:拖拽開(kāi)始時(shí)在被拖拽元素上觸發(fā)此事件,監(jiān)聽(tīng)器需要設(shè)置拖拽所需數(shù)據(jù),從操作系統(tǒng)拖拽文件到瀏覽器時(shí)不觸發(fā)此事件.
dragenter:拖拽鼠標(biāo)進(jìn)入元素時(shí)在該元素上觸發(fā),用于給拖放元素設(shè)置視覺(jué)反饋,如高亮
dragover:拖拽時(shí)鼠標(biāo)在目標(biāo)元素上移動(dòng)時(shí)觸發(fā).監(jiān)聽(tīng)器通過(guò)阻止瀏覽器默認(rèn)行為設(shè)置元素為可拖放元素.
dragleave:拖拽時(shí)鼠標(biāo)移出目標(biāo)元素時(shí)在目標(biāo)元素上觸發(fā).此時(shí)監(jiān)聽(tīng)器可以取消掉前面設(shè)置的視覺(jué)效果.
drag:拖拽期間在被拖拽元素上連續(xù)觸發(fā)
drop:鼠標(biāo)在拖放目標(biāo)上釋放時(shí),在拖放目標(biāo)上觸發(fā).此時(shí)監(jiān)聽(tīng)器需要收集數(shù)據(jù)并且執(zhí)行所需操作.如果是從操作系統(tǒng)拖放文件到瀏覽器,需要取消瀏覽器默認(rèn)行為.
dragend:鼠標(biāo)在拖放目標(biāo)上釋放時(shí),在拖拽元素上觸發(fā).將元素從瀏覽器拖放到操作系統(tǒng)時(shí)不會(huì)觸發(fā)此事件.
8、請(qǐng)列舉jquery中的選擇器：
9、Javascript中的定時(shí)器有哪些？他們的區(qū)別及用法是什么？
setTimeout 只執(zhí)行一次
setInterval 會(huì)一直重復(fù)執(zhí)行
四、請(qǐng)描述一下 cookies sessionStorage和localstorage區(qū)別
相同點(diǎn)：都存儲(chǔ)在客戶端
不同點(diǎn)：1、存儲(chǔ)大小
cookie數(shù)據(jù)大小不能超過(guò)4k。
sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。
2、有效時(shí)間
localStorage 存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)；
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除。
cookie 設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉
3、 數(shù)據(jù)與服務(wù)器之間的交互方式
cookie的數(shù)據(jù)會(huì)自動(dòng)的傳遞到服務(wù)器，服務(wù)器端也可以寫(xiě)cookie到客戶端
sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
五、計(jì)算一個(gè)數(shù)組arr所有元素的和
var arr1=[1,2,3,4,5,6,7,8,9];
var sum1=0;
for (var i=0;i<=arr1.length;i++) {
if (typeof arr1[i]=="number") {
sum1+=arr1[i];
}
}
document.write(sum1);
//====================================
function sum2(arr){
var all=0;
for (var i=0;i<arr.length;i++) {
if (typeof arr[i]=="number") {
all+=arr[i];
}
}
return all;
}
document.write(sum2([1,2,3,4]));
https://www.bilibili.com/video/BV1qL411u7eE?spm_id_from=333.999.0.0
關(guān)注公粽號(hào)“留白零壹”，有任何不懂的技術(shù)問(wèn)題都可隨時(shí)咨詢！
六、編寫(xiě)一個(gè)方法去掉數(shù)組里面 重復(fù)的內(nèi)容 var arr=[1,2,3,4,5,1,2,3]
一個(gè)數(shù)組去重的簡(jiǎn)單實(shí)現(xiàn)
var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];
//定義一個(gè)新的數(shù)組
var s = [];
//遍歷數(shù)組
for(var i = 0;i<arr.length;i++){
if(s.indexOf(arr[i]) == -1){ //判斷在s數(shù)組中是否存在，不存在則push到s數(shù)組中
s.push(arr[i]);
}
}
console.log(s);
//輸出結(jié)果：["abc", "abcd", "sss", "2", "d", "t", "ss", "f", "22"]
方法二：用sort() 然后相鄰比較也可以實(shí)現(xiàn)
七、document.write和innerHTML的區(qū)別：
document.write是直接寫(xiě)入到頁(yè)面的內(nèi)容流，如果在寫(xiě)之前沒(méi)有調(diào)用document.open, 瀏覽器會(huì)自動(dòng)調(diào)用open。每次寫(xiě)完關(guān)閉之后重新調(diào)用該函數(shù)，會(huì)導(dǎo)致頁(yè)面被重寫(xiě)。
innerHTML則是DOM頁(yè)面元素的一個(gè)屬性，代表該元素的html內(nèi)容。你可以精確到某一個(gè)具體的元素來(lái)進(jìn)行更改。如果想修改document的內(nèi)容，則需要修改document.documentElement.innerElement。
innerHTML將內(nèi)容寫(xiě)入某個(gè)DOM節(jié)點(diǎn)，不會(huì)導(dǎo)致頁(yè)面全部重繪
innerHTML很多情況下都優(yōu)于document.write，其原因在于其允許更精確的控制要刷新頁(yè)面的那一個(gè)部分。
八、ajax的步驟
什么是ajax?
ajax(異步j(luò)avascript xml) 能夠刷新局部網(wǎng)頁(yè)數(shù)據(jù)而不是重新加載整個(gè)網(wǎng)頁(yè)。
如何使用ajax?
第一步、創(chuàng)建xmlhttprequest對(duì)象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest對(duì)象用來(lái)和服務(wù)器交換數(shù)據(jù)。
var xhttp;
if (window.XMLHttpRequest) {
//現(xiàn)代主流瀏覽器
xhttp = new XMLHttpRequest();
} else {
// 針對(duì)瀏覽器，比如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
第二步、使用xmlhttprequest對(duì)象的open（）和send（）方法發(fā)送資源請(qǐng)求給服務(wù)器。
第三步、使用xmlhttprequest對(duì)象的responseText或responseXML屬性獲得服務(wù)器的響應(yīng)。
第四步、onreadystatechange函數(shù)，當(dāng)發(fā)送請(qǐng)求到服務(wù)器，我們想要服務(wù)器響應(yīng)執(zhí)行一些功能就需要使用onreadystatechange函數(shù)，每次xmlhttprequest對(duì)象的readyState發(fā)生改變都會(huì)觸發(fā)onreadystatechange函數(shù)
九、xml和json的區(qū)別，請(qǐng)用四個(gè)詞語(yǔ)來(lái)形容
JSON相對(duì)于XML來(lái)講，數(shù)據(jù)的體積小，傳遞的速度更快些
JSON與JavaScript的交互更加方便，更容易解析處理，更好的數(shù)據(jù)交互
XML對(duì)數(shù)據(jù)描述性比較好；
JSON的速度要遠(yuǎn)遠(yuǎn)快于XML
十、清楚浮動(dòng)的方法？(多次出現(xiàn)在面試題)
1、父級(jí)div定義 height
原理：父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無(wú)法自動(dòng)獲取到高度的問(wèn)題。
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、容易掌握
缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問(wèn)題
2、結(jié)尾處加空div標(biāo)簽 clear:both
原理：添加一個(gè)空div，利用css提高的clear:both清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問(wèn)題
缺點(diǎn)：不少初學(xué)者不理解原理；如果頁(yè)面浮動(dòng)布局多，就要增加很多空div，讓人感覺(jué)很不好
3、父級(jí)div定義 偽類:after 和 zoom
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點(diǎn)類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動(dòng)問(wèn)題
優(yōu)點(diǎn)：瀏覽器支持好、不容易出現(xiàn)怪問(wèn)題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）
缺點(diǎn)：代碼多、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持
4、父級(jí)div定義 overflow:hidden
原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:hidden時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好
缺點(diǎn)：不能和position配合使用，因?yàn)槌龅某叽绲臅?huì)被隱藏
十一、box-sizing常用的屬性有哪些？分別有什么作用？
屬性值
box-sizing：content-box
box-sizing：border-box
box-sizing：inherit
content-box
這是box-sizing的默認(rèn)屬性值
是CSS2.1中規(guī)定的寬度高度的顯示行為
在CSS中定義的寬度和高度就對(duì)應(yīng)到元素的內(nèi)容框
在CSS中定義的寬度和高度之外繪制元素的內(nèi)邊距和邊框
border-box
在CSS中微元素設(shè)定的寬度和高度就決定了元素的邊框盒
即為元素在設(shè)置內(nèi)邊距和邊框是在已經(jīng)設(shè)定好的寬度和高度之內(nèi)進(jìn)行繪制
CSS中設(shè)定的寬度和高度減去邊框和內(nèi)間距才能得到元素內(nèi)容所占的實(shí)際寬度和高度
(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框(元素默認(rèn)效果)。
border-box:元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
https://www.bilibili.com/video/BV1qL411u7eE?spm_id_from=333.999.0.0
關(guān)注公粽號(hào)“留白零壹”，有任何不懂的技術(shù)問(wèn)題都可隨時(shí)咨詢！
