前端最全⾯试题
感谢内容提供者：
⽂章⽬录
前⾔：
今天给朋友们分享⼀到三年前端最全的⾯试题（其中包括HTML，CSS，JS，React，Vue，NodeJS，版本仓库的使⽤，互联⽹基础知识）。
⼀、选择⼯作时的注意事项
请看此链接：
⼆、⾯试流程，以及电话⾯试，HR⾯试的模拟问题以及⾯试礼仪
请看此链接：
三、HTML,CSS⾯试题：
1. ⾼频：
1.
2.
3.
4. 为什么要使⽤HTML5的语义化标签？web前端基础面试题
答案：去掉或样式丢失的时候能让页⾯保留基本样式呈现清晰的结构。利于SEO。减少团队差异化。
5. CSS3新增了哪些特性？
答案：
6. 请讲⼀下CSS3动画的优点。
答案：代码⽐较简单，再就是性能好，浏览器会对其进⾏优化。
7. 如何写宽⾼⾃适应的APP？
答案：请访问：
8.
9. 图⽚懒加载原理？
答案：没有在展⽰区域的图⽚不给他设置src属性，即将展⽰那个图⽚的时候去设置它的src属性。
0. CSS中可以通过哪些属性，使得⼀个DOM元素不显⽰在浏览器的可视范围内？
答案：
答案：
display: none;
visibility: hidden;
opacity: 0;
还有其他的很多思路：
⽐如使⽤定位移出可视界⾯外然后overflow:hidden起来。
再⽐如translate改变XYZ轴位置隐藏等等。
11. rgba()和opacity的透明效果有什么不同？
答案：opacity透明⼦元素会跟着透明（继承），rgba()的透明⼦元素则不会继承。
12. 请描述display:none；visibility:hidden；opacity:0；三者的区别；
答案：
13. 你知道的css让元素垂直⽔平居中的⽅法有哪些？
答案：请访问：
14. 请讲⼀下盒模型。
答案：css盒模型分俩种：IE盒⼦模型和标准盒⼦模型。
在 标准盒⼦模型中，width 和 height 指的是内容区域的宽度和⾼度。增加内边距、边框和外边距不会影响内容区域的尺⼨，但是会增加元素框的总尺⼨。
IE盒⼦模型中，width 和 height 指的是内容区域+border+padding的宽度和⾼度。
15. BFC是什么？【个⼈感觉过时了，但是⾯字节被问到了】
答案：BFC是指浏览器中创建了⼀个独⽴的渲染区域，并且拥有⼀套渲染规则，他决定了其⼦元素如何定位，以及与其他元素的相互关系和作⽤。
16. 你开发过程中遇到过最棘⼿的html与css问题是什么？
参考答案：可随意举例：
⽐如：做左侧sidebar导航，具体可看：
⽐如：安卓和ios兼容问题
17.
2. 中频：
1. grid布局有过了解么？外部样式表文件
答案：
2. img的alt与title有何异同？strong与em的异同？
答案：
前端和后端的区别是什么alt：⽤来指定替换⽂字【图⽚加载失败展⽰】。nginx的正向代理和反向代理
title：⽤来提供建议性⽂字【移⼊显⽰】。
strong：粗体强调标签。
em：斜体强调标签。
3. 请描述⼀下渐进增强与优雅降级。
答案：渐进增强是向前【⾼版本浏览器】兼容。优雅降级是向后【低版本浏览器】兼容。
4. CSS有哪些选择器？
答案：
5. ⾏内元素和块级元素的区别是什么？⾏内元素的padding和margin可设置么？
答案：
块级元素总是独占⼀⾏。width，height，padding，margin都可以控制。
⾏内元素和相邻的⾏内元素在同⼀⾏，width，height与padding-top,padding-bottom，还有margin-top,margin-bottom不可控制，其余可控制。
6. 请讲⼀下px，em的区别。
答案：px和em都是长度单位。但是px是固定的，指定多少就是多少。em是根据⽗级元素的⼤⼩变化的。
拓展：浏览器默认字体⼤⼩是16px。所以未经调整的浏览器都符合：1em=16px这个计算规则。
7. SASS和LESS是什么？为什么要使⽤它们？
答案：CSS预处理器，通过编程的⽅式来开发CSS，可实现代码简写与复⽤等。
使⽤它们是因为：结构清晰，便与拓展、
减少⽆意义的机械劳动、
可以轻松实现多重继承。
8. 对WEB标准以及W3C的理解与认识。
答案：标签闭合、标签⼩写、不乱嵌套、提⾼搜索机器⼈搜索⼏率、使⽤外链css和js脚本、结构⾏为表现的分离、⽂件下载与页⾯速度更快、内容能被更多的⽤户所访问、能被更多的设备所访问、更少的代码和组件，容易维护、改版⽅便，不需要变动页⾯内容、提供打印版本⽽不需要复制内容、提⾼⽹站易⽤性。
9. css样式优先级算法如何计算？
答案：!important > id > class > 标签
!important⽐内联样式优先级⾼；
优先级就近原则，样式定义最近者为准；
以最后载⼊的样式为准；
10. 实现： 左侧元素固定宽度， 右侧元素⾃适应【字节⾯试题】换个⽅式可以提左右宽度固定，中间⾃适应。
答案：
1、flex布局，左侧固定宽度，右侧主体flex: 1
2、左侧固定宽度 + float，右侧主体 margin-left
c++ string类的常用方法3、左侧固定宽度 + 绝对定位，右侧主体 margin
4、左侧固定宽度，右侧calc计算
5、左侧固定宽度 + float，右侧 overflow: auto
6、左侧固定宽度 + float，右侧 display: flex
最终效果：
11. css中的z-index的权重问题请讲讲你所了解的⼀些规则。
答案：
3. 低频：
1. 每个HTML⽂件⾥⾯都有⼀个很重要的东西，Doctype，知道这是⼲什么的么？
答案：<!DOCTYPE>声明位于⽂档中最前⾯的位置，处于<html>标签之前。此标签可告知浏览器⽂档使⽤哪种HTML或XHTML规范。（重点：告诉浏览器按照何种规范解析页⾯）
2. 请讲⼀下圣杯布局和双飞翼布局。
圣杯布局与双飞翼布局都是双边固定宽度，中间⾃适应的布局。
3. 如何更改input的样式？
答案：请访问：
4. div+css的布局较table布局有什么优点？
答案： 改版的时候更⽅便，只要改css⽂件。页⾯加载速度更快、结构化清晰、页⾯显⽰简介。表现与结构相分离。易于优化（seo）搜索引擎更友好，排名更容易靠前。
5. 知道什么是微格式吗？谈谈理解。
答案：微格式是⼀种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应⽤⽽制定的特殊格式。
优点：将智能数据添加到⽹页上，让⽹页内容在搜索引擎结果页⾯可以显⽰额外的提⽰。（应⽤范例：⾖瓣）
6. 超链接被访问过后hover样式就不出现的问题是什么？如何解决？
答案：被点击访问过的超链接样式不在具有hover和active了，解决办法是改变css属性的排列顺序：L-V-H-
A（link,visited,hover,active）。
7. 如何垂直居中⼀个浮动元素？
答案：⽤定位，计算top与left，可以⽤CSS的函数calc()计算。
8. CSS的link和import的区别是什么？
答案：百度很多，⾃⼰搜吧。织梦扣点阅读
9. 前端页⾯有哪三层构成？分别是什么？作⽤是什么？
答案：结构层(HTML - - 设置页⾯的基本结构)、样式层(CSS - - 修改页⾯展⽰给⽤户的样式加⼀些⼩交互)、⾏为层(JS - - 使⽤户与页⾯完美交互)
10. CSS选择符有哪些？块级元素有哪些？空元素有哪些？
答案：
11. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS新增伪类有哪些？
答案链接同上。
12. 请说出position的属性值有哪些。每个值的特点作⽤。
答案链接同上。
13. display的属性值有哪些？可以做什么？
答案链接同上。
14. 哪些CSS属性可以继承？
答案链接同上。
15. 为什么利⽤多个域名来存储⽹站资源会更有效？
答案：CDN缓存更⽅便；突破浏览器并发限制；节约cookie带宽；节约主域名的连接数，优化页⾯相应速度；防⽌不必要的安全问题；
四、JS基础题：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。