1、行内元素有哪些?块级元素有哪些?他们的区别是什么?
行内元素主要有:a b br i span input select
块级元素主要有:div p h1 h2 h3 h4 form ul
行内元素和块级元素之间是可以通过display相互转换的。
行内元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%,除非设定一个宽度。
2、CSS3新增的伪类有哪些?
CSS3 主要新增了两大类选择器,分别是结构伪类选择器和UI伪类选择器。
结构伪类选择器:
: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的优先级如何计算?
下面列表中,选择器类型的优先级是递增的:
1、类型选择器和** 伪元素**
2、类选择器,属性选择器,伪类
3、ID选择器
4、!important规则。
sp1:通配符,关系选择符(+, >, ~, ' ') 和 否定伪类:not()) 对优先级没有影响。(但是,在 :not() 内部声明的选择器是会影响优先级)。
sp2:给元素添加的内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式 ,因此可看作是具有最高的优先级。.
4、HTTP状态码都有哪些含义?(至少写5个)
根据RFC规范,HTTP状态码主要分五大类,分别是1xx,2xx,3xx,4xx,5xx。
1xx:这一类型的状态码,代表请求已被接受,需要继续处理。这类响应是临时响应,只包含状态行和某些可选的响应头信息,并以空行结束。由于HTTP/1.0协议中没有定义任何1xx状态码,所以除非在某些试验条件下,服务器禁止向此类客户端发送1xx响应。
2xx:这一类型的状态码,代表请求已成功被服务器接收、理解、并接受。
3xx:这类状态码代表需要客户端采取进一步的操作才能完成请求。通常,这些状态码用来重定向,后续的请求地址(重定向目标)在本次响应的Location域中指明。
4xx:这类的状态码代表了客户端看起来可能发生了错误,妨碍了服务器的处理。
5xx:表示服务器无法完成明显有效的请求。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生,也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。
常见状态码:
200:OK(请求成功。)
302:Found(要求客户端执行临时重定向。)
403:Forbidden(服务器已经理解请求,但是拒绝执行它)
404:Not Found(请求失败,请求所希望得到的资源未被在服务器上发现,但允许用户的后续请求)
502:Bad Gateway(作为网关或者代理服务器工作的服务器尝试执行请求时,从上游服务器接收到无效的响应。)
5、js的基本数据类型都哪些?
Undefined、Null、Boolean、Number、String、Symbol(ES6新增)、BigInt(ES10新增)
6、什么是JavaScript闭包?
闭包是函数和声明该函数的词法环境的组合。我的理解是,只要是函数的返回值是函数,或者函数的参数是一个回调函数,都可以理解这是一个闭包
7、Ajax和jsonp的区别?
具体区别参考文章:https://blog.csdn.net/qq_37604843/article/details/78654964
8、JavaScript面向对象中继承如何实现?
JavaScript面向对象中继承的实现方式有五种,分别是:
利用原型链、利用构造函数、组合继承、原型式继承、寄生组合式继承。
9、请实现,鼠标点击任意标签,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,实现以下布局。(总高度310px,左100px,右200px,左侧上面高度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、实现点击下面按钮出现提示框,在点击其他地方提示框消失。
<!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之间的区别。
没有实例做支撑很难一句话说清楚,具体参考文章:https://blog.csdn.net/smartdt/article/details/75557369
15、vuex有哪几种属性?
vuex有State、Mutation、Action、Getter、Module五种属性。