2020-2022前端一些大厂面经系列———HTML，CSS，算法

NoTelecom

已于 2022-04-20 23:15:01 修改

阅读量1.3k

点赞数 4

分类专栏：面试 CSS 算法题文章标签： css html5

于 2020-03-06 17:19:26 首次发布

本文链接：https://blog.youkuaiyun.com/yuanfangyoushan/article/details/104015157

版权

面试同时被 3 个专栏收录

12 篇文章

订阅专栏

算法题

6 篇文章

订阅专栏

CSS

4 篇文章

订阅专栏

这篇博客整理了前端面试中常见的HTML5新特性，如语义化标签、音频视频支持等，并深入讨论了CSS的BFC、布局技巧和选择器优先级。还涵盖了算法题，如快速排序、连续最大子序列和等。适合准备前端面试的开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

寒假已经一周多了，闲下来把自己上学期的真实面试题目（少部分是同学的面试题目）和一些个人解答拿出来分享一下~
投递的基本都是一些大厂，面试手段的话，是视频面试或者电话面试，也有些是线上笔试
2020.9.9补充：其实有在不断完善和更新不少秋招的部分，朋友面试的时候也在场，所以后续的很多也是别人秋招面试遇到的题目
祈愿更多offer🙏🙏🙏
这一篇整理的是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) (sticky不会触发）
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>
.container{
    background-color: silver;
    border: black 1px solid;
    /* width:100%; */
}
.dummy{
    /* margin百分比设置基于父级宽度，
  不设置这个盒子的高度，撑开父级即可 */
    margin-top: 75%; 
    border: red 1px solid;
}

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 声明）
sticky: 粘性定位，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），然后基于top, right, bottom, 和 left的值进行偏移，偏移值不会影响其他元素的位置。
~~+ 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是相对单位，可以达到等比缩放的效果

11. flex流式布局： https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
12. CSS优化：
减少使用important 会让浏览器进行大量检查
减少无匹配css规则
css动画启用GPU加速
减少回流：图片使用预加载预先设宽高

以下可能引发回流：

添加或者删除可见的DOM元素；display
元素位置改变；top left
元素尺寸改变——边距、填充、边框、宽度和高度 border margin padding
内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变； font-size
页面渲染初始化；onload
浏览器窗口尺寸改变——resize事件发生时；
激活CSS伪类（:hover）

算法

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));