96道前端面试题，作出的职业规划建议

CSS 篇

link 与 @import 的区别

link 是 HTML 方式， @import 是CSS方式
link 最大限度支持并行下载， @import 过多嵌套导致串行下载，出现 FOUC (文档样式短暂失效)
link 可以通过 rel="alternate stylesheet" 指定候选样式
浏览器对 link 支持早于 @import ，可以使用 @import 对老浏览器隐藏样式
@import 必须在样式规则之前，可以在css文件中引用其他文件
总体来说： link 优于 @import ，link优先级也更高

BFC 有什么用

创建规则：
- 根元素
- 浮动元素（ float 不取值为 none ）
- 绝对定位元素（ position 取值为 absolute 或 fixed ）
- display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex 之一的元素
- overflow 不取值为 visible 的元素
作用
- 可以包含浮动元素
- 不被浮动元素覆盖
- 阻止父子元素的 margin 折叠

清除浮动的几种方式

父级 div 定义 height
结尾处加空 div 标签 clear:both
父级 div 定义伪类 :after 和 zoom
父级 div 定义 overflow:hidden
父级 div 也浮动，需要定义宽度
结尾处加 br 标签 clear:both

Css3 新增伪类 - 伪元素

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。
p:last-of-type 选择属于其父元素的最后

元素的每个

元素。
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。
p:only-child 选择属于其父元素的唯一子元素的每个

元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。
:enabled 已启用的表单元素。
:disabled 已禁用的表单元素。
:checked 单选框或复选框被选中。
::before 在元素之前添加内容。
::after 在元素之后添加内容,也可以用来做清除浮动。
::first-line 添加一行特殊样式到首行。
::first-letter 添加一个特殊的样式到文本的首字母。
伪类语法一个：，它是为了弥补css常规类选择器的不足
伪元素语法两个：，它是凭空创建的一个虚拟容器生成的元素

IE盒子模型、W3C盒子模型

W3C盒模型：内容(content)、填充( padding )、边界( margin )、边框( border )；
- box-sizing: content-box
- width = content width;
IE盒子模型： IE 的content 部分把 border 和 padding 计算了进去;
- box-sizing: border-box
- width = border + padding + content width

display:inline-block 什么时候不会显示间隙？

移除空格
使用 margin 负值
使用 font-size:0
letter-spacing
word-spacing

行内元素float:left后是否变为块级元素？

行内元素设置成浮动之后变得更加像是 inline-block （行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100% ），这时候给行内元素设置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60*1000ms ＝ 16.7ms

stylus/sass/less区别

均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
Sass 和 LESS 语法较为严谨， LESS 要求一定要使用大括号“{}”， Sass 和 Stylus 可以通过缩进表示层次与嵌套关系
Sass 无全局变量的概念， LESS 和 Stylus 有类似于其它语言的作用域概念
Sass 是基于 Ruby 语言的，而 LESS 和 Stylus 可以基于 NodeJS NPM 下载相应库后进行编译；这也是为什么安装Sass的时候有时候会报错，需要安装python脚本

优点：就不用我多说了，谁用谁知道，真香。

rgba()和opacity的透明效果有什么不同？

rgba() 和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，
而 rgba() 只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

水平居中的方法

元素为行内元素，设置父元素 text-align:center
如果元素宽度固定，可以设置左右 margin 为 auto ;
如果元素为绝对定位，设置父元素 position 为 relative ，元素设left:0;right:0;margin:auto;
使用 flex-box 布局，指定 justify-content 属性为center
display 设置为 tabel-ceil

垂直居中的方法

将显示方式设置为表格， display:table-cell ,同时设置 vertial-align：middle
使用 flex 布局，设置为 align-item：center
绝对定位中设置 bottom:0,top:0 ,并设置 margin:auto
绝对定位中固定高度时设置 top:50%，margin-top 值为高度一半的负值
文本垂直居中设置 line-height 为 height 值

浏览器篇

浏览器内核的理解

主要分两个部分：渲染引擎、js引擎
渲染引擎：负责取得网页的内容（html css img …），以及计算网页的显示方式，然后会输出至显示器或者打印机。浏览器的内核不同对于网页的语法解释也不同，所以渲染的效果也不一样
js引擎：解析和执行javascript 来实现网页的动态效果
最开始渲染引擎和js引擎并没有区分的很明确，后来js引擎越来越独立，内核就倾向于只值渲染引擎
IE : trident 内核
Firefox ： gecko 内核
Safari : webkit 内核
Opera :以前是 presto 内核， Opera 现已改用Google - Chrome 的 Blink 内核
Chrome:Blink (基于 webkit ，Google与Opera Software共同开发)

HTTP 的请求方式场景

Get 方法：获取数据通常(查看数据)-查看
POST 方法：向服务器提交数据通常(创建数据)-create
PUT 方法：向服务器提交数据通常(更新数据)-update，与POST方法很像，也是提交数据，但PUT制定了资源在服务器上的位置，常用在修改数据
HEAD 方法：只请求页面的首部信息
DELETE 方法：删除服务器上的资源
OPTIONS 方法：用于获取当前URL支持的请求方式
TRACE 方法：用于激活一个远程的应用层请求消息回路
CONNECT 方法：把请求链接转换到透明的TCP/IP的通道

HTTP状态码

1XX ：信息状态码
- 100 continue 继续，一般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息
2XX ：成功状态码
- 200 ok 正常返回信息
- 201 created 请求成功并且服务器创建了新资源
- 202 accepted 服务器已经接收请求，但尚未处理
3XX ：重定向
- 301 move per 请求的网页已经永久重定向
- 302 found 临时重定向
- 303 see other 临时冲重定向，且总是使用get请求新的url
- 304 not modified 自从上次请求后，请求的网页未修改过
4XX ：客户端错误
- 400 bad request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求
- 401 unauthorized 请求未授权
- 403 forbidden 禁止访问
404 not found 找不到如何与url匹配的资源
5XX ：服务器错误
- 500 internal server error 最常见的服务器端的错误
- 503 service unacailable 服务器端暂时无法处理请求（可能是过载活维护）

*   `500 internal server error` 最常见的服务器端的错误
*   `503 service unacailable` 服务器端暂时无法处理请求（可能是过载活维护）

[外链图片转存中…(img-VKx27cIt-1626850156644)]

**最后：**由于篇幅限制，需要校招面试题PDF文档（含答案解析）完整版，可以点击这里免费获取

96道前端面试题，作出的职业规划建议相关推荐

8年架构师针对web前端小白，作出的职业规划建议
本人从事前端8年了,目前在广州从事架构师.业余总结了很多学习资料,在不断总结的过程中提升自己的技术水平,跟进时代的发展,也想帮助更多想从事前端工作的朋友.本文我会普及一些入门和提升建议,思想提升了,路 ...
96道前端面试题，总结到位
腾讯一面自我介绍简单聊了一下教育背景,问了一下专业学过的课程为什么选择前端开发深挖了一下前端开发的项目经历算法题:给一篇文章,统计文章中出现次数最多的单词,给出单词和次数(注意可能存在多个 ...
web开发入门经典，96道前端面试题
问题: 从浏览器地址栏输入url到请求返回发生了什么你一看这种烂掉牙的问题,小case,但996面试大佬由此延展的问题已经远远超越了这个问题本身了,不信你就接着看. 我回答了首先会进行 url 解析 ...
真给力！蚂蚁金服工程师总结的400道前端面试题提供下载
最近很多小伙伴找我要一些前端资料,于是我翻箱倒柜,把这份蚂蚁金服大牛总结的前端开发归纳笔记找出来,同时赠送直播.录播.视频.笔记.源码.软件包,免费共享给大家! 据说有小伙伴靠这份笔记顺利进入 BAT ...
leetcode 最常见的150道前端面试题（简单题下）
本文题目选自 LeetCode 精选 TOP 面试题[1],这些题在自己和同事亲身经历中,确实遇到的几率在百分之80%以上(成都和北京的前端岗位). 本篇是简单题(下)20题左右,上半部分详见leet ...
【算法面试】leetcode最常见的150道前端面试题 --- 中等题
点击上方前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群兄弟姐妹们,中等题来了,本篇17道,剩下63道,每周更新10道! 之前简单题的链接如下: [算法面试]leetcode最常见 ...
太赞了！华为工程师总结了400道前端面试题
10月份很多小伙伴找我要一些前端面试题资料,于是我翻箱倒柜,把这份华为大牛总结的前端开发归纳笔记找出来,同时赠送直播.录播.视频.笔记.源码.软件包和价值1万元VUE笔记资料,免费共享给大家! 据说有 ...
整理学习：100多道前端面试题（一起加油，且行且珍惜）
前言当你准备去面试时,你不妨看一些面试的题目(推荐掘金)来提醒自己究竟掌握得怎么样,比如题目笔者最近一边写项目,一边整理前端面试题,打算完成项目就差不多去实习了- 没有特别宏大的目标,打算安安分 ...
来自大厂 300+ 道前端面试题大全附答案（整理版）+前端常见算法面试题~~最全面详细
"全方位总结一下所遇到的面试题目,与大家共同学习,也是对自己的一次总结" 前言今天给朋友们分享我花了将近一个月时间,参考了很多网上的优质博文和项目整理的一份比较全面的前端面试题集 ...

96道前端面试题，作出的职业规划建议

CSS 篇

link 与 @import 的区别

BFC 有什么用

清除浮动的几种方式

Css3 新增伪类 - 伪元素

IE盒子模型、W3C盒子模型

display:inline-block 什么时候不会显示间隙？

行内元素float:left后是否变为块级元素？

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

stylus/sass/less区别

rgba()和opacity的透明效果有什么不同？

水平居中的方法

垂直居中的方法

浏览器篇

浏览器内核的理解

HTTP 的请求方式场景

HTTP状态码

96道前端面试题，作出的职业规划建议相关推荐

最新文章

热门文章

96道前端面试题，作出的职业规划建议

CSS 篇

link 与 @import 的区别

BFC 有什么用

清除浮动的几种方式

Css3 新增伪类 - 伪元素

IE盒子模型 、W3C盒子模型

display:inline-block 什么时候不会显示间隙？

行内元素float:left后是否变为块级元素？

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

stylus/sass/less区别

rgba()和opacity的透明效果有什么不同？

水平居中的方法

垂直居中的方法

浏览器 篇

浏览器内核的理解

HTTP 的请求方式场景

HTTP状态码

96道前端面试题，作出的职业规划建议相关推荐

最新文章

热门文章

IE盒子模型、W3C盒子模型

浏览器篇