寒假已经一周多了，闲下来把自己上学期的真实面试题目和一些个人解答拿出来分享一下~
投递的基本都是一些大厂，面试手段的话，是视频面试或者电话面试，也有些是线上笔试
这一篇整理的是HTML，CSS，算法部分：
HTML5
1. HTML有哪些新特性？（滴滴，网易）
- 语义化标签：header、footer、section、nav、aside、article
- 增强型表单：input 的多个 type
- 新增表单元素：datalist、keygen、output
- 新增表单属性：placehoder、required、min 和 max
- 音频视频：audio、video
- canvas
- 地理定位
- 拖拽
- 本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
- 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
- WebSocket：单个 TCP 连接上进行全双工通讯的协议
HTML5方面一般涉及很少，大多数面试官提到H5都会问这个问题
CSS
1. 行内元素有哪些？和块级元素有什么区别？如何转换？(字节跳动，滴滴）
区别：
- 是否独占一行
- 宽高属性设置是否有效
- margin padding设置是否有效 （行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果）
转换： 通过display的各个属性值实现转换
2. BFC了解吗？（字节跳动）
从概念 触发 和 解决问题这三方面来谈：
概念：
BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。
触发：
+ body根元素
+ 浮动元素：float 除 none 以外的值
+ 绝对定位元素：position (absolute、fixed)
+ display 为 inline-block、table-cells、flex
+ overflow 除了 visible 以外的值 (hidden、auto、scroll)
**解决问题：**
+ 解决高度塌陷问题（同一个 BFC 下外边距会发生折叠）
+ 清除浮动
3. 如何设置长宽比4：3（字节跳动）
4. 多少种方法实现元素垂直居中？(滴滴）
- 行内元素和图片 display: table-cell; vertical-align: middle;
- 块级元素： 定位（偏移加transform变形） flex流式布局
- 多行文本（模拟表格）： 父元素： display：table；子元素： display:table-cell; vertical-align: middle
5. position的属性值有多少种？(滴滴）
- absloute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。若没有，则相对于body定位
- fixed生成绝对定位的元素，相对于浏览器窗口进行定位。
- relative生成相对定位的元素，相对于其正常位置进行定位。
- static没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
- inherit规定应该从父元素继承 position 属性的值
6. 盒模型的了解(滴滴）
有W3C盒模型和IE的怪异盒模型
可以通过 box-sizing设置不同的盒模型，默认为W3C盒模型
/* 标准模型 */
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;
7. css选择器有哪些 ？选择器的优先级怎样？(滴滴）
id选择器 类选择器 标签选择器 属性选择器 通用选择器 后代选择器 兄弟选择器 伪类选择器
优先级： 内联 > ID选择器 > 类选择器 > 标签选择器。
8. 实现某种布局：例如两栏布局，左边固定，右边自适应，左右不重叠（字节跳动）
.parent{
height: 300px;
display:flex;
flex-direction: row;
}
// 1. 使用浮动
.left{
float:left;
width:300px;
margin-right: 10px;
background: red;
}
.right{
overflow: hidden; /* 创建BFC */
background: yellow;
}
// 2. 使用flex
.left {
width: 300px;
margin-right: 10px;
background: red;
}
.right {
background: olive;
}
面试前可以将一些经典布局例如 圣杯模型，比翼双飞模型，九宫格模型再熟悉一遍
9. 试比较CSS3的动画和JS动画（网易雷火）
CSS3动画：
- 运行过程控制较弱,无法附加事件绑定回调函数。
- 代码冗长。想用 CSS 实现稍微复杂一点动画,最后CSS代码都会变得非常笨重
- 兼容性有问题
js动画：
- JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
- 代码的复杂度高于CSS动画
- 可以使用一些触发事件的操作（用DOM操作CSS和使用setInterval实现）
算法
1. 谈一下快排的基本思想（也有让直接手敲的）（字节跳动，腾讯）
第一步：从数组中取出一个数作为基准(pivot)。
第二步：在原数组中进行移动，将大于基准的数放到基准右边，小于基准的数放到基准左边，在基准左右形成两个子数组。
第三步：在左右子数组中反复执行步骤1、2，直到所有子数组只剩下一个数。
function jsQuickSort(array) {
if (array.length <= 1) {
return array;
}
const pivotIndex = Math.floor(array.length / 2);
const pivot = array.splice(pivotIndex, 1)[0]; //从数组中取出我们的"基准"元素
const left = [], right = [];
array.forEach(item => {
if (item < pivot) { //left 存放比 pivot 小的元素
left.push(item);
} else { //right 存放大于或等于 pivot 的元素
right.push(item);
}
});
//至此，我们将数组分成了left和right两个部分
return jsQuickSort(left).concat(pivot, jsQuickSort(right)); //分而治之
}
const arr = [98, 42, 25, 54, 15, 3, 25, 72, 41, 10, 121];
console.log(jsQuickSort(arr));
//输出：[ 3, 10, 15, 25, 25, 41, 42, 54, 72, 98, 121 ]
2. 连续最大子序列的和（字节跳动）
例如：在数组[-2, 6, -1, 5, 4, -7, 2, 3]中，和最大的子序列是[6, -1, 5, 4]，它们的和是14
function search(arr) {
var maxSum = arr[0],sum = arr[0];
for(var i = 0, l = arr.length; i < l; i++) {
if(sum < 0) {
sum = arr[i];
} else {
sum += arr[i];
}
if(sum > maxSum) {
maxSum = sum;
}
}
return maxSum;
}
var arr = [-2, 6, -1, 5, 4, -7, 2, 3];
console.log(search(arr)); // 14
3. 求链表中倒数第K个位置上的结点（K为正整数）（腾讯）
思路（只遍历一次）：设置两个指针p和q,p超前q k-1个结点，这样当p遍历到链表末尾时，q所指向的恰好是倒数第k个结点。
const FindKthToTail = (head, k) => {
if(!head || k<= 0) return null;
let p = head;
let q = head;
while(--k){ // p先行k-1个结点
if(p.next != null) p = p.next;
else return null;
}
while(p.next != null){ // 然后pq都开始向后遍历，直到p遍历到末尾
p = p.next;
q = q.next;
}
return q;
};
4. 杨辉三角（cvte)
思路: 初始化一个二维数组，循环遍历（第二层遍历两个 第三层遍历三个，以此类推）判断它的左上方的位置是否为越界 否则就相加左上方和正上方(因为如果是右边边界，正上方刚好是初始化的0所以直接相加就可以了)
// n为指定行数
function yanghui (n) {
// 初始化二维数组
let dp = new Array(n).fill(0).map(x => new Array(n).fill(0));
dp[0][0]=1;
for(var i=1;i<n;i++){
dp[i][0]=dp[i-1][0];
for(var j=1;j<=i;j++){
dp[i][j]=dp[i-1[j-1]+dp[i-1][j];
}
}
return dp;
}
5. 斐波那契两种解法（上台阶问题）（字节跳动）
例： 有100格台阶，可以跨1步可以跨2步，那么一个有多少种走法？
// 递归
var fib=function(n){
return n<2?n:fib(n-1)+fib(n-2);
};
// 非递归
function fibonacci(n) {
var num1= 1,num2= 1,sum;
for(var i = 3; i <= n; i += 1) {
sum = num1 + num2
num1 = num2
num2 = sum
}
return sum
}
console.log(fib(100));
6. 不同路径个数（cvte)
思路：如果是只有一行或者一列的情况，那就都只有一种路径
如果是对角线位置，就有先右后下（start->A->C）和先下后右（start->B->C）两种路径，如下图所示：
以此类推，我们可以得出每个位置的路径总数都是左边的路径加上下边的路径
function short(m, n) {
var i,j;
let dp=new Array(n).fill(0).map(x=>new Array(m).fill(0));
for(i=0; i<m; i++) {
dp[0][i]=1;
}
for(i=0; i<n; i++) {
dp[i][0]=1;
}
for(i=1; i<n; i++){
for(j=1; j<m; j++){
dp[i][j]=dp[i-1][j]+dp[i][j-1];
}
}
return dp[n-1][m-1];
}
console.log(short(7,3));
7. 蛇形填数（cvte)
例：在n×n方阵里填入1，2，…，n×n，要求填成蛇形。
例如，n＝4时方阵为：
10 11 12 1
9 16 13 2
8 15 14 3
7 6 5 4
function Snake (n) {
let a=new Array(n).fill(0).map(x=>new Array(n).fill(0));
var x = 0,y = n-1,num = 1;
var num=a[x][y]=1;//从右上角开始
while(num<n*n) {//注意是<如果写<=将死循环
while((x+1)<n && !a[x+1][y]) a[++x][y]=++num;
while((y-1)>=0 && !a[x][y-1]) a[x][--y]=++num;
while((x-1)>=0 && !a[x-1][y]) a[--x][y]=++num;
while((y+1)<n && !a[x][y+1]) a[x][++y]=++num;
}
for(x=0; x<n; x++) {
console.log(a[x]);
}
}
console.log(Snake(5));
