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

CSS 篇

link 与 @import 的区别

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

BFC 有什么用

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

清除浮动的几种方式

  • 父级 div 定义 height
  • 结尾处加空 div 标签 clear:both
  • 父级 div 定义伪类 :afterzoom
  • 父级 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-toppadding-bottom或者 width 、 height 都是有效果的

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

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

stylus/sass/less区别

  • 均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
  • SassLESS 语法较为严谨, LESS 要求一定要使用大括号“{}”, SassStylus 可以通过缩进表示层次与嵌套关系
  • Sass 无全局变量的概念, LESSStylus 有类似于其它语言的作用域概念
  • Sass 是基于 Ruby 语言的,而 LESSStylus 可以基于 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-heightheight

浏览器 篇

浏览器内核的理解

  • 主要分两个部分:渲染引擎js引擎
  • 渲染引擎:负责取得网页的内容(html css img …),以及计算网页的显示方式,然后会输出至显示器或者打印机。浏览器的内核不同对于网页的语法解释也不同,所以渲染的效果也不一样
  • js引擎:解析和执行javascript 来实现网页的动态效果
  • 最开始渲染引擎和js引擎并没有区分的很明确,后来js引擎越来越独立,内核就倾向于只值渲染引擎
  • IE : trident 内核
  • Firefox : gecko 内核
  • Safari : webkit 内核
  • Opera :以前是 presto 内核, Opera 现已改用Google - ChromeBlink 内核
  • Chrome:Blink (基于 webkitGoogle与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 服务器端暂时无法处理请求(可能是过载活维护)

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

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

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

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

上一篇:1023:Hello,World!的大小-信息学一本通(c++)


下一篇:贴片电阻代理商教您贴片电阻丝印阻值怎么看