面试题-HTML篇
- title和alt有什么区别？
1.alt: 图片加载失败时，显示在网页上的替代文字
2.title: 鼠标放到上面显示的文字
3.alt 是必要属性 title 非必要
2.html5有哪些新特性、移除了那些元素？
（1）新特性
a、新增标签
article、aside、audio、video、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、summary、time、track
其中常用标签：article、aside、section、audio、video、main、nav、footer、header、canvas
b、新增localStorage、sessionStorage
c、新增contenteditable属性（任何dom节点只要加上contenteditable="true"就可以变得可编辑）
d、Geolocation 地理定位
3.WEB标准以及W3C标准是什么？
1、闭合标签
2、标签小写
3、嵌套正确
4、外部链接css和js
5、提倡结构、表现和行为相分离（html结构、css表现、js行为）
2021面试题-CSS篇
1、实现一个div在不同分辨率下的水平垂直居中
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid pink;
width: 100px;
height: 100px;
}
2、左右固定，中间自适应样式
<style>
.box {
display: flex;
height: 200px;
}
.left {
flex: 0 0 200px;
background-color: pink;
}
.center {
flex: 1;
background-color: yellow;
}
.right {
flex: 0 0 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
2.box-sizing常用的属性有哪些？分别有什么用？
（1）content-box
宽高是元素本身的宽高 不包含border+padding
（2）border-box
元素的宽高已经包含了border+padding
（3）inherit
从父元素继承box-sizing属性
3、css样式的覆盖规则
!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)
4、请简要描述margin重合问题，及解决方式
问题：相邻两个盒子垂直方向上的margin会发生重叠，只会取比较大的margin
解决：（1）设置padding代替margin
（2）设置float
（3）设置overflow
（4）设置position：absolute 绝对定位
（5）设置display： inline-block
5、移动端适配1px问题
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.hairlines {
width: 300px;
margin: 100px auto;
}
.hairlines li{
position: relative;
border:none;
margin-top: 10px;
}
.hairlines li:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #cccccc;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
6、居中为什么要使用transform（为什么不使用marginLeft/Top）
transform 属于合成属性，不会引起整个页面的回流重绘，节省性能消耗，但是占用内存会大些
top/left属于布局属性，会引起页面layout回流和repaint重绘
7、介绍css3中position:sticky
8、上下固定，中间滚动布局如何实现 9、css实现border渐变 10、纯css实现一个高宽比为1：3的盒子 列举几种方式 11、 css实现一个旋转的圆 12、BFC，IFC，FFC的区别 13、css3有哪些新特性 14、CSS3新增伪类有那些？ 15、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ 16、display:inline-block 什么时候不会显示间隙？ 17、行内元素float:left后是否变为块级元素？ 18、在网页中的应该使用奇数还是偶数的字体？为什么呢？ 19、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用 20、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里） 21、CSS3动画（简单动画的实现，如旋转等） 22、base64的原理及优缺点 23、流体布局、圣杯布局、双飞翼布局 24、stylus/sass/less区别 25、postcss的作用 26、垂直塌陷及解决方法
2021面试题–javaScript篇(ES6)
1、es6的新特性
const let
模板字符串
箭头函数
函数的参数默认值
对象和数组解构
for...of 和 for...in
2、原型链和作用域链的区别
（1）原型链
当访问一个对象的某个属性时，会先在这个对象本身的属性上找，如果没有找到，会去这个属性的__proto__属性上找，即这个构造函数的prototype，如果还没找到，就会继续在__proto__上查找，
直到最顶层，找不到即为undefined。这样一层一层往上找，彷佛是一条链子串起来，所以叫做原型链。
（2）作用域链
变量取值会到创建这个变量的函数的作用域中取值，如果找不到，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。
（3）区别
作用域是对变量而言，原型链是对于对象的属性而言
作用域链的顶层是window，原型链的顶层是Object
3、js判断类型
1、typeof
检测不出null 和 数组，结果都为object，所以typeof常用于检测基本类型
2、instanceof
不能检测出number、boolean、string、undefined、null、symbol类型，所以instancof常用于检测复杂类型以及级成关系
3、constructor
null、undefined没有construstor方法，因此constructor不能判断undefined和null。
但是contructor的指向是可以被改变，所以不安全
4、Object.prototype.toString.call
全类型都可以判断
4、数据类型怎么检测
1、typeof
例：console.log(typeof true) // boolean
2、instanceof
例：console.log([1,2] instanceof Array) // true
3、constructor
例： console.log([1, 2].constructor === Array) // ture
4、Object.prototype.toString.call
例：Object.prototype.toString.call([1, 2]) // [object Array]
5、url的search参数转换
// let url = "https://www.baidu.com?name=jimmy&age=18&height=1.88"
// queryString 为 window.location.search
const queryString = "?name=jimmy&age=18&height=1.88";
const queryParams = new URLSearchParams(queryString);
const paramObj = Object.fromEntries(queryParams);
console.log(paramObj); // { name: 'jimmy', age: '18', height: '1.88' }
6、params转换url
const query = { id: 'test'}
const params = Object.entries(query).length ? `?${new URLSearchParams(query)}` : '';
依赖组件
1、查看依赖组件版本指令
npm view webpack versions
npm view less-loader versions
...
