1扰藕、行內(nèi)元素有哪些?塊級元素有哪些盗誊?他們的區(qū)別是什么逝钥?
行內(nèi)元素主要有:a b br i span input select
塊級元素主要有:div p h1 h2 h3 h4 form ul
行內(nèi)元素和塊級元素之間是可以通過display相互轉(zhuǎn)換的。
行內(nèi)元素特點:
1糕再、和其他元素都在一行上量没;
2、元素的高度突想、寬度殴蹄、行高及頂部和底部邊距不可設置究抓;
3、元素的寬度就是它包含的文字或圖片的寬度袭灯,不可改變刺下。
塊級元素特點:
1、每個塊級元素都從新的一行開始稽荧,并且其后的元素也另起一行橘茉。
2、元素的高度姨丈、寬度畅卓、行高以及頂和底邊距都可設置。
3构挤、元素寬度在不設置的情況下髓介,是它本身父容器的100%,除非設定一個寬度筋现。
2、CSS3新增的偽類有哪些箱歧?
CSS3 主要新增了兩大類選擇器矾飞,分別是結(jié)構(gòu)偽類選擇器和UI偽類選擇器。
結(jié)構(gòu)偽類選擇器:
:root
呀邢、:empty
洒沦、only-child
、only-of-type
:nth-child(n)
价淌、:nth-last-child(n)
申眼、:last-child
:nth-type(n)
、:nth-last-of-type(n)
蝉衣、:first-of-type
括尸、:last-of-type
UI偽類選擇器:
:enabled
、:disabled
病毡、checked
3濒翻、CSS3的優(yōu)先級如何計算?
下面列表中啦膜,選擇器類型的優(yōu)先級是遞增的:
1有送、類型選擇器和** 偽元素**
2、類選擇器僧家,屬性選擇器雀摘,偽類
3、ID選擇器
4八拱、!important規(guī)則阵赠。
sp1:通配符涯塔,關(guān)系選擇符(+, >, ~, ' ') 和 否定偽類:not()) 對優(yōu)先級沒有影響。(但是豌注,在 :not() 內(nèi)部聲明的選擇器是會影響優(yōu)先級)伤塌。
sp2:給元素添加的內(nèi)聯(lián)樣式 (例如, style="font-weight:bold") 總會覆蓋外部樣式表的任何樣式 ,因此可看作是具有最高的優(yōu)先級轧铁。.
4每聪、HTTP狀態(tài)碼都有哪些含義?(至少寫5個)
根據(jù)RFC規(guī)范齿风,HTTP狀態(tài)碼主要分五大類药薯,分別是1xx,2xx救斑,3xx童本,4xx,5xx脸候。
1xx:這一類型的狀態(tài)碼穷娱,代表請求已被接受,需要繼續(xù)處理运沦。這類響應是臨時響應泵额,只包含狀態(tài)行和某些可選的響應頭信息,并以空行結(jié)束携添。由于HTTP/1.0協(xié)議中沒有定義任何1xx狀態(tài)碼嫁盲,所以除非在某些試驗條件下,服務器禁止向此類客戶端發(fā)送1xx響應烈掠。
2xx:這一類型的狀態(tài)碼羞秤,代表請求已成功被服務器接收、理解左敌、并接受瘾蛋。
3xx:這類狀態(tài)碼代表需要客戶端采取進一步的操作才能完成請求。通常母谎,這些狀態(tài)碼用來重定向瘦黑,后續(xù)的請求地址(重定向目標)在本次響應的Location域中指明。
4xx:這類的狀態(tài)碼代表了客戶端看起來可能發(fā)生了錯誤奇唤,妨礙了服務器的處理幸斥。
5xx:表示服務器無法完成明顯有效的請求。這類狀態(tài)碼代表了服務器在處理請求的過程中有錯誤或者異常狀態(tài)發(fā)生咬扇,也有可能是服務器意識到以當前的軟硬件資源無法完成對請求的處理甲葬。
常見狀態(tài)碼:
200:OK(請求成功。)
302:Found(要求客戶端執(zhí)行臨時重定向懈贺。)
403:Forbidden(服務器已經(jīng)理解請求经窖,但是拒絕執(zhí)行它)
404:Not Found(請求失敗坡垫,請求所希望得到的資源未被在服務器上發(fā)現(xiàn),但允許用戶的后續(xù)請求)
502:Bad Gateway(作為網(wǎng)關(guān)或者代理服務器工作的服務器嘗試執(zhí)行請求時画侣,從上游服務器接收到無效的響應冰悠。)
5、js的基本數(shù)據(jù)類型都哪些配乱?
Undefined溉卓、Null、Boolean搬泥、Number桑寨、String、Symbol(ES6新增)忿檩、BigInt(ES10新增)
6尉尾、什么是JavaScript閉包?
閉包是函數(shù)和聲明該函數(shù)的詞法環(huán)境的組合燥透。我的理解是沙咏,只要是函數(shù)的返回值是函數(shù),或者函數(shù)的參數(shù)是一個回調(diào)函數(shù)班套,都可以理解這是一個閉包
7芭碍、Ajax和jsonp的區(qū)別?
具體區(qū)別參考文章:https://blog.csdn.net/qq_37604843/article/details/78654964
8孽尽、JavaScript面向?qū)ο笾欣^承如何實現(xiàn)?
JavaScript面向?qū)ο笾欣^承的實現(xiàn)方式有五種忧勿,分別是:
利用原型鏈杉女、利用構(gòu)造函數(shù)、組合繼承鸳吸、原型式繼承熏挎、寄生組合式繼承。
9晌砾、請實現(xiàn)坎拐,鼠標點擊任意標簽,alert標簽的名稱养匈。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>這是p標簽</p>
<div>這是div標簽</div>
<span>這是span標簽</span>
<a href="#">這是a標簽</a>
</body>
<script>
var el = document.getElementsByTagName('body');
el[0].onclick = function (event) {
evt = event || window.event;
var selected = evt.target || evt.srcElement;
alert(selected.tagName);
}
</script>
</html>
10哼勇、請使用css控制3個div,實現(xiàn)以下布局呕乎。(總高度310px积担,左100px,右200px猬仁,左側(cè)上面高度150px)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
width: 310px;
height: 310px;
background-color: #ddd;
position: relative;
}
.container > div {
position: absolute;
}
.left {
width: 100px;
height: 150px;
left: 0;
background-color: #9400ff;
}
.right {
width: 200px;
height: 100%;
right: 0;
background-color: #94ff00;
}
.bottom {
bottom: 0;
background-color: #0094ff;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
</body>
</html>
11帝璧、實現(xiàn)點擊下面按鈕出現(xiàn)提示框先誉,在點擊其他地方提示框消失。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#msg {
width: 180px;
border: 1px solid #0094ff;
height: 150px;
display: none;
background: #893844;
position: absolute;
}
#btn {
width: 182px;
height: 35px;
line-height: 35px;
background: #0094ff;
position: absolute;
top: 350px;
left: 300px;
}
</style>
</head>
<body>
<div id="msg">盒子</div>
<div id="btn">點擊按鈕顯示盒子</div>
</body>
<script>
document.onclick = function (e) {
e = e || event;
var btn = document.getElementById("btn");
var msg = document.getElementById("msg");
var target = e.target || e.srcElement;
if (target !== btn && target !== msg) {
msg.style.display = "none";
btn.innerText = "點擊按鈕顯示盒子";
} else {
msg.style.top = (btn.offsetTop - 160) + "px";
msg.style.left = btn.offsetLeft + "px";
msg.style.display = "block";
btn.innerText = "點擊空白處隱藏盒子";
}
}
</script>
</html>
12的烁、請詳細說你對vue聲明周期的理解褐耳。
具體詳見文章(寫的非常好):https://segmentfault.com/a/1190000008010666
13、編寫冒泡排序 var arr = [1,3,5,6,8,7,9,2]
function bubblingSort(arr){
var temp;
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr.length-i-1;j++){
if(arr[j]>arr[j+1]){
temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
};
return arr;
}
var arr = [1,3,5,6,8,7,9,2];
var s=bubblingSort(arr);
console.log(s);
14渴庆、vue中data铃芦,methods、computed把曼、watch之間的區(qū)別杨帽。
沒有實例做支撐很難一句話說清楚,具體參考文章:https://blog.csdn.net/smartdt/article/details/75557369
15嗤军、vuex有哪幾種屬性注盈?
vuex有State、Mutation叙赚、Action老客、Getter、Module五種屬性震叮。