2019前端一些大厂面经系列———HTML，CSS，算法
寒假已经一周多了，闲下来把自己上学期的真实面试题目（少部分是同学的面试题目）和一些个人解答拿出来分享一下~
投递的基本都是一些大厂，面试手段的话，是视频面试或者电话面试，也有些是线上笔试
这一篇整理的是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的各个属性值实现转换
inline-block
- 结合了inline与block的一些特点，用通俗的话讲，就是不独占一行的块级元素。
- 可以用于几个盒子的横向排列 可以解决float在每个元素高度不同时出现的层次不齐的状况
- 缺陷是 每个盒子之间存在4px的间隙，是写标签时的换行符引起的，更正方法是 对父元素添加font-size: 0
2. BFC了解吗？（字节跳动）
从概念 触发 和 解决问题这三方面来谈：
概念：
BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。
触发:
- body根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (元素的position为absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
解决问题：
- 解决高度塌陷问题（同一个 BFC 下外边距会发生折叠）
- 清除浮动 （父元素未设置高度，子元素浮动试，父元素高度变成一条线）
- 这里另外说下其他清除浮动推荐对方法：
使用after伪元素或者before和after双伪元素清除浮动
- 这里另外说下其他清除浮动推荐对方法：
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
// 双伪元素
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
- 多栏布局的情况
3. 如何设置长宽比4：3（字节跳动）
<div class='container'>
<div class='dummy'></div>
<div class='content'>content</div>
</div>
.container{
background-color: silver;
width:100%;
position:relative;
display: inline-block;
}
.dummy{
margin-top: 75%;
}
.content{
position:absolute;
left:0;
right:0;
top:0;
bottom: 0;
}
4. 多少种方法实现元素垂直居中？(滴滴）
- 行内元素和图片 父元素： display：table；子元素： display:table-cell; vertical-align: middle
- 块级元素： 定位（偏移加transform变形） flex流式布局
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;
二者的内容区域大小不同：
content(W3C) = content
content(IE) = border2 + padding2+ content
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实现）
10. 移动端适配问题（腾讯，网易雷火）
- 解决方案
- 媒体查询方式 ：查询设备的宽度来执行不同的CSS代码
- flex弹性盒子布局：让它 的viewport固定，高度定死，宽度自适应
- 使用rem+viewport缩放， 根据屏幕宽度设定 rem 值，需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位
- 解决移动端等比缩放问题
- 根据不同的视口写一个函数 动态设置viewport的属性的初始缩放比例，可缩放的最大最小比例等
- 根据dpr的值进行视口缩放，把它缩放到物理像素
- 页面宽度适配
width：将布局视口设置为固定的值，比如375px或者device-width（设备宽度）
initial-scale：设置页面的初始缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 1px问题
什么是 1像素问题 ？ 我们说的1像素，就是指1CSS像素。问题就是设计师实际了一条线，本来是1像素，但是在有些设备上，用了横竖都是3的物理像素（即：3x3=9像素）来显示这1像素（即：dpr=3），导致在这些设备上，这条线看上去非常粗。
解决办法有：
- 使用css3的 scaleY(0.5) 来解决
- 使用rem方案，因为rem是相对单位，可以达到等比缩放的效果
算法
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)
解答戳这里
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)
解答戳这里
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));
下一篇在这里啦 ~~2019前端一些大厂面经系列———JS
面经系列：
2019前端一些大厂面经系列———HTML，CSS，算法
2019前端一些大厂面经系列———JS
2019前端一些大厂面经系列———ES6
2019前端一些大厂面经系列———网络（上）
2019前端一些大厂面经系列———网络（下）
2019前端一些大厂面经系列———vue,node
2019前端一些大厂面经系列———综合实战篇