一、列举CSS中常用的伪类样式
伪类
:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()
伪元素
::first-letter, ::first-line, ::before, ::after
伪类：CSS常用伪类使用详解_Allenyhy的博客-CSDN博客_伪类怎么使用
二、超链接访问过后 hover 样式就不出现的问题是什么？如何解决？
被点击访问后的超链接样式不在具有hover和active了，解决方法是改变CSS属性的排列顺序：L-V-H-A（link, visited, hover, active）
三、简单描述 position 几种定位的区别
1.static(静态，默认值) 2.relative(相对) 3.absolute(绝对) 4.fixed(固定)
position的8种定位方式_web_xyk的专栏-CSDN博客_position定位
省流：
父元素设置relative，子元素设置absoute，fixed相对于浏览器固定位置
默认static 当前文档流
relative 当前文档流，可以left和right
absolute 基于父级元素定位，如果没有就body
四、简单描述 display 的取值及区别
display:none, inline, inline-block, flex, table, list等
java中display中的属性_全面解析display属性_墨剑心的博客-CSDN博客
display:none与visibility:hidden的区别
display与visiblilty都是设置元素的显式方法，使用display: none;的元素在隐藏后不会占用原来的页面空间。 其他元素可以占用用这个位置。
使用visibility：hidden的元素隐藏后占用原来的空间，只是对用户来说是透明的，会影响其他元素的位置。
使用visibility属性设置元素的隐藏属性，并不能减少打开网页的速度，因为这个元素总是会随着页面一起下载。而通过display属性设置的却不一样，该元素相当于在页面中不存在，因此能够缩短页面加载时间。
五、rgba()和 opacity 的透明效果有什么不同
opacity：是属性，元素透明，可以被继承，取值0-1
rgba：是函数，计算后是个属性值，背景透明，不继承，取值0-1
六、说说如何实现页面元素不可见
CSS
display:none
height:overflow
visibility:hidden
opacity:0
transform:scale(0)
js
removeChild
七、CSS 实现子元素在父元素水平垂直居中
1、子元素：行内元素或行内块元素
设置父元素：
text-align
line-height+height
子元素vertical-align(table)（垂直居中）
2、子元素：块
postion:top+left+margin
兼容性好，css2
但是元素的宽高必须已知
css
transform:translate(-50%, -50%)
3、display:flex
八、说一下 transition 和 margin 的百分比根据什么计算
transform:translate(-50%)：基于当前元素
margin：基于父元素
九、请用 css3 描述幻灯片实现的思路
深入理解CSS过渡transition - 小火柴的蓝色理想 - 博客园
CSS变形transform(2d) - 小火柴的蓝色理想 - 博客园
用css3制作幻灯片效果_--Rainman的博客-CSDN博客_css幻灯片效果
十、如何判断某个值为数组类型
省流：
instanceof Array -> 但是instanceof Object也会返回true
Array.isArray(polyfill)【额外看看一文搞清楚前端 polyfill - 知乎】【Polyfill简介_E_li_na的博客-CSDN博客_polyfill_7_2_5】
Object.prototype.toString.call([])=== '[object Array]'
[].constructor === Array
[].__proto__ === Array.prototype
十一、编写 ajax 请求代码(不使用第三方函数库)
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://139.9.209.237/herowebapi/power/list', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var res = JSON.parse(xhr.responseText);
if (res.Code != 100) {
return;
}
tbody.innerHTML = '';
res.Data.forEach(function(item) {
var opt = document.createElement('option');
opt.innerText = item.Name;
opt.value = item.Id;
ddlPower.appendChild(opt);
})
console.log(res);
}
}
xhr.send();
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://139.9.209.237/herowebapi/member/login', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var res = JSON.parse(xhr.responseText);
console.log('res', res);
console.log(res.Code);
if (res.Code == 100) {
isLogin = true;
divLogin.style.display = 'none';
divUser.style.display = 'block';
nickName = res.Data.NickName;
var lblUserName = document.querySelector('#lblUserName');
lblUserName.innerText = nickName;
var close = document.querySelector('#close');
close.onclick = function() {
isLogin = false;
divLogin.style.display = 'block';
divUser.style.display = 'none';
}
} else {
alert('登录失败!');
}
}
}
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(`email=${email}&password=${pass}`);第二种：fetch（简单但是性能差）