2021最新最全前端面试题(包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等)

整理了一些前端面试题,希望对正在找前端工作的伙伴有用。本篇文章内容篇幅较大,主要针对初中级前端开发工程师。

篇幅过长,大家可以先点赞收藏以后慢慢看。

关于HTML

的title和alt属性有什么区别

  • alt:图片加载失败时,显示在网页上的替代文字
  • title:鼠标(手机端该属性无意义)放在图片上时显示的文字
  • alt是必需属性(但属性值可为空),title非必需

图片懒加载的原理

图像是img标记,浏览器根据图像的src属性请求图像,因此惰性加载的关键是当图像不在可视区域时,不给`imgs‘赋值。

懒加载的思路及实现代码详见js实现图片懒加载原理

H5新增了哪些标签?

常见的有:article、aside、audio、video、footer、header、nav、section

H5和H4有什么不同?

H5新特性有:
用于媒体回放的video和audio元素
对本地离线存储的更好的支持
新的特殊内容元素,如article、footer、header、nav、section

简单地说,它更标准,提供更多的多功能支持。更标准、更可读性、更好的性能和更方便的执行。

块级元素、行内元素分别有哪些?

块级元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
行内元素:span, strong, em, br, img , input, label, select, textarea, cite

SVG和CANVAS的区别?

SVG

表示以XML格式定义图像的可伸缩矢量图形。

CANVAS

通过 JavaScript 来绘制 2D 图形。

二者比较

菜鸟教程

关于CSS

css3新的特性?

RGBA和透明度

是RGB颜色模型的一个扩展。本质上,在设置元素中添加了一个alpha通道,即一个表示除红色、绿色和蓝色三种颜色之外的透明度的通道。

background属性

  • background-image:设置元素的背景图像。
  • background-origin:规定背景图片的定位区域。
  • background-size :规定背景图片的尺寸。
  • background-repeat:设置是否及如何重复背景图像。

word-wrap属性

word-wrap 属性允许长单词或 URL 地址换行到下一行。

注:所有主流浏览器都支持 word-wrap 属性。

基础语法:

word-wrap: normal|break-word;

text-shadow属性

text-shadow 属性:向文本设置阴影。

text-shadow基础语法:

text-shadow: 5px 5px 5px #FF0000;

参数分别表示:水平阴影,垂直阴影,模糊距离,阴影颜色;

font-face属性

font-face属性:定义自己的字体

在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

border-radius属性

border-radius 属性:是一个简写属性,用于设置四个 border-*-radius 属性。

基础语法:

border-radius: 1-4 length|% / 1-4 length|%;

注:该属性允许您为元素添加圆角边框!

border-image属性

border-image:将图片规定为包围 div 元素的边框

border-image基础语法:

border-image: url(border.png) 30 30 round

box-shadow属性

box-shadow属性:向框添加一个或多个阴影。(盒阴影)

box-shadow基础语法:

box-shadow: 10px 10px 5px #888888

媒体查询

媒体查询定义两套css,当浏览器的尺寸变化时会采用不同的属性。

元素居中的方式有哪些?

水平居中

1.行内元素水平居中
利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。
此外,如果块级元素内部包着也是一个块级元素,我们可以先将其由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。

2.块级元素的水平居中
①将该块级元素左右外边距margin-left和margin-right设置为auto。
②使用table+margin
先将子元素设置为块级表格来显示(类似),再将其设置水平居中。
display:table在表现上类似block元素,但是宽度为内容宽。
③使用absolute+transform
先将父元素设置为相对定位,再将子元素设置为绝对定位,向右移动子元素,移动距离为父容器的一半,最后通过向左移动子元素的一半宽度以达到水平居中。
不过transform属于css3内容,兼容性存在一定问题,高版本浏览器需要添加一些前缀。
④使用flex+justify-content
通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。
⑤使用flex+margin
通过flex将父容器设置为为Flex布局,再设置子元素居中。

3.多块级元素水平居中
①利用flex布局
利用弹性布局(flex),实现水平居中,其中justify-content 用于设置弹性盒子元素在主轴(默认横轴)方向上的对齐方式,本例中设置子元素水平居中显示。
②利用inline-block
将要水平排列的块状元素设为display:inline-block,然后在父级元素上设置text-align:center,达到与上面的行内元素的水平居中一样的效果。

4.浮动元素水平居中
对于定宽的浮动元素,通过子元素设置relative + 负margin
对于不定宽的浮动元素,父子容器都用相对定位
通用方法(不管是定宽还是不定宽):flex布局

垂直居中

1.多行内联元素垂直居中
①利用flex布局(flex)
利用flex布局实现垂直居中,其中flex-direction: column定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题。
②利用表布局(table)
利用表布局的vertical-align: middle可以实现子元素的垂直居中。

2.块级元素垂直居中
①使用absolute+负margin(已知高度宽度)
通过绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半,就可以实现了。
②使用absolute+transform
当垂直居中的元素的高度和宽度未知时,可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
③使用flex+align-items
通过设置flex布局中的属性align-items,使子元素垂直居中。
④使用table-cell+vertical-align
通过将父元素转化为一个表格单元格显示(类似 和 ),再通过设置 vertical-align属性,使表格单元格内容垂直居中。

水平垂直居中

1、绝对定位+CSS3(未知元素的高宽)
利用Css3的transform,可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。
CSS3的transform固然好用,但在项目的实际运用中必须考虑兼容问题,大量的hack代码可能会导致得不偿失。
2、flex布局
利用flex布局,其中justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式;而align-items属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。不能兼容低版本的IE浏览器。
3、flex/grid与margin:auto(最简单写法)
容器元素设为 flex 布局或是grid布局,子元素只要写 margin: auto 即可,不能兼容低版本的IE浏览器。

自适应的方案?

viewport方案

配置默认根字号、默认字号、默认设计稿宽度,然后使用postcss插件将代码中的px自动转换成rem,这种方法可以完成使用1080p设计稿再不同手机下的适应方案,所有元素大小均按照1080p下的大小来定义px。配置上述插件后,px单位在编译后会默认转为rem单位,如果不需要被转换,可以将小写的px改成大写的PX或Px。取消使用viewport.js文件,如果遇到不能适配的公共组件,则拷贝一个新的版本,适配新的方案,逐步淘汰老版本。

// 引用该mixin,其中包含了默认的变量等
$default-font-size: 100;    // 默认根字号大小,用于换算vw单位
$baseFontSize: 100px;   // 默认字号大小,用于计算rem值
$pageWidth: 1080;       // 默认的设计稿宽度
@import '@oppobrowser/lib-browser-scss/src/mixins.scss';

//项目的vue.config.js中增加如下postcss配置
// 在css配置项中增加postcss配置,用于px转rem单位,后续合到master后就统一配置了
css: {
    loaderOptions: {
      sass: {
        data: '@import "@/common/scss/variables.scss";',
      },
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            // 把px单位换算成rem单位
            rootValue: 100, // 换算的基数(设计图1080的根字体为100)
            selectorBlackList: [], // 忽略转换正则匹配项
            propList: ['*'],
          }),
        ],
      }
}

rem

  • 22
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 10
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值