前端面试题总结

爱吃甜品的游u

已于 2023-09-09 17:24:50 修改

阅读量161

点赞数

文章标签： css html es6 css3

于 2021-03-14 20:31:32 首次发布

本文链接：https://blog.csdn.net/weixin_47736903/article/details/114802086

版权

面试要精心设计

能去线下面试就线下面试
积极乐观向上
评价知识能力和经验 = 综合素质
员工内推 - 猎头推荐 - hr收集（主动搜索，接收邮件）
面试流程：
一面 - 技术浅知识
二面 - 技术知识-框架只是-原理-项目解决方案（资深技术官-不同部门的相互交叉面试）
三面 - 项目经验做什么产品来公司未来技术规划
hr面试 - 为人要低调如实回答谈薪资放低姿态不要有情绪积极踏实

JD 分析招聘信息：

用人单位发布的招聘信息 - 要求符合不符合
职位描述岗位要求
工作内容 - 看项目产品方向
技术栈 --vue 小程序什么的
经验要求 - 几年工作要求看薪资也能看出来不要过于在意JD 包装自己不能完全相信JD的要求
薪资看最小数

简历：

内容简洁
表现出自己的优势：
人人都会也是优势用人单位的东西你会就是优势
个人信息 - 教育经历 - 专业技能 - 工作经历 - 项目经历- 博客和开源

必备：姓名性别电话邮箱籍贯

年龄可不写（能从教育经历评估出来）
头像无所谓
教育经历写上最高学历即可
学校专业入学和毕业时间
不要写高中
专业技能
表现出自己的核心竞争力
内容不要太多 3,5条即可
太基础的不要写例如会用vscode
工作经历表格
如实写公司职位
项目经历
写2-4个局有说服力的项目（视工作时间）
项目描述技术栈个人角色（开发者，负责人）
技巧：可以把别人的项目写上，只要能hold住
按自己的能力写
可选-- 博客或开源
可以从现在开始慢慢积累
简单明了不要花里胡哨
注意用词 “精通”，“熟练”等慎用
不可造假会被拉入黑名单

面试前的准备工作：

看JD 是否需要临时准备一下
打印纸质简历带着纸和笔
最好带着自己的电脑，现场可能写代码
要有时间观念如果迟到或者推迟要提前说
衣着适当不用正装也不要太随意
为何离职？不要吐槽前东家说自己的原因
加班？能！
不要挑战面试官即便他错了
遇到不会的问题要表现出自己积极的一面思考一两分钟-给个提示 - 实在想不起来或者能不能告诉我这个题的答案呢或者从哪儿查查
www.imooc.com/article/300475

HTML面试题

如何理解HTML语义化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5i6Ob8JI-1615724960247)(D:\学习内容\全栈\语义化.png)]

好处：

让人更容易读懂（增加代码可读性）

让搜索引擎更容易读懂（SEO）

默认情况下，那些HTML标签是块级元素，哪些是内联元素？

display:block/table 有div h1 h2 table ul ol p 等

display:inline/inline-block 有 span img input button等

块级元素？

总是在新行上开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素

行内元素？

和其他元素都在一行上；
高，行高及外边距和内边距不可改变；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下：

设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

CSS面试题

盒模型：

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

怪异模式和标准模式下的css盒模型的解析：

标准模式中，网页元素的宽度是有padding,border,width三者的宽度相加决定的。
怪异模式中，width包含padding和border的宽度，即网页宽度为width。

css3新增box-sizing属性，用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型：

content-box，默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中，即标准模式下的盒模型。
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值，即怪异模式下的盒模型。

margin负值问题：

margin-top 和margin-left 负值，元素向上向左移动
margin-right负值右侧元素左移，自身不受影响
margin-bottom负值，下方元素上衣，自身不受影响

BFC理解与应用

block format context 块级格式化上下文

一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件：

float不是none

position是absolute或fixed

overflow不是visible

display是flex inline-block等

BFC的常见应用：清除浮动

float布局

如何实现圣杯布局和双飞翼布局

手写clearfix
.clearfix:after{
content:'';
display:table;
clear:both;
}
.clearfix{
*zoom:1   //兼容IE低版本
}
圣杯布局和双飞翼布局目的：

三栏布局，中间一栏最先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
一般用于PC网页

圣杯布局和双飞翼布局的技术总结：

使用float布局
两侧使用margin复制，以便和中间内容横向重叠
防止中间内容呗两侧覆盖，一个用padding一个用margin

flex布局

flex实现一个三点的骰子

常用语法：

flex-driection
justify-content
align-items
flex-wrap
align-self

CSS-定位

定位模式：position

指定一个元素在文档中定位的方式

静态定位：static
相对定位：relativ
绝对定位：absolute
固定定位：fixed

水平居中：

inline元素：text-align：center
block元素：margin：auto
absolute元素：left：50%+margin-left负值

垂直居中：

inline元素：line-height的值等于height值
absolute元素：top:50%+margin-top负值
absolute元素：transform（-50%，-50%）
absol元素：top,left,bottom,right = 0 +margin auto;

css 响应式

rem是一个长度单位

px，相对长豆单位，最常用
em，相对长度单位，相对于父元素，不常用
rem，相对长度单位，相对于根元素，常用于响应式布局

响应式布局的常见方案

media-query，根据不同的屏幕宽度设置根元素font-size
rem，基于根元素的相对单位

vw/vh

rem的弊端

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1uwew5bR-1615724960253)(D:\学习内容\全栈\响应式rem.png)]

网页视口尺寸

window.screen.height //屏幕高度

window.innerHeight //网页视口高度

document.body.clientHeight //body高度

vw/vh

vh 网页视口高度的1/100

vw 网页视口宽度的1/100

vmax 取两者最大值 vmin取两者最小值