百度前端面试（一面）

很感谢面试官小姐姐，真的很温柔！！！

前端旅程第一场面试（12.14）

1、自我介绍

2、学的是vue2还是vue3？

3、vue2学了多久？

4、为什么没有学vue3，而是学了vue2？

5、Html语义化

语义化是指使用恰当语义的html标签，让页面具有良好的结构与含义。

6、语义化的优点

• 开发者友好:使⽤语义类标签增强了可读性，开发者也能够清晰地看出⽹⻚的结构，也更为便于团队的开发和维护
• 机器友好:带有语义的⽂字表现⼒丰富，更适合搜索引擎的爬⾍爬取有效信息，语义类还可以⽀持读屏软件，根据⽂章可以⾃动⽣成⽬录

7、行级元素、块级元素

行级元素：

• ​ 多个占一行
• ​ 不能设置宽高、上下内、外边距
• ​ 其宽度和高度尤其内容自动填充

块级元素：

• ​ 自己占一行
• ​ 可以设置宽高、内外边距
• ​ 如果不设置宽高，宽度默认父级元素宽度，高度则根据内容填充

8、行级元素、块级元素分别有哪些？

行级元素：span a i b lable

块级元素：p h1-h6 ul li div ol form table

9、有了解过空元素吗？

没有内容的html元素，在开始的标签中就关闭了 比如<img/>而不是<a><a/>，也就是说空元素没有闭合标签。例如： <hr> <img> <input> <link> <meta>

10、src和href区别？

src的特性：

• 引用外部资源比如script元素、img元素、iframe元素、video元素
• 会替换元素本身的内容
• 会暂停其他资源的下载当浏览器解析到使用src的元素时，会暂停其他资源资源的下载，直到src引用资源加载、编译、执行完毕。这也是为什么script元素推荐放在html结构的底部

href的特性：

• 表示超链接比如a标签、link标签，表示外部资源与该页面的联系
• 不会替换元素本身的内容
• 不会暂停其他资源的下载像css那样影响页面观感的可以放在html结构的头部优先加载

核心思想上的区别：

• src代表的是网站的一部分，没有会对网站的使用造成影响
• href代表网站的附属资源，没有不会对网站的核心逻辑和结构造成影响

11、css选择器

• id选择器（#myid）
• 类选择器（.myclassname）
• 标签选择器（div,h1,p）
• 后代选择器（h1 p）
• 相邻后代选择器（⼦）选择器（ul>li）
• 兄弟选择器（li~a）
• 相邻兄弟选择器（li+a）
• 属性选择器（a[rel="external"]）
• 伪类选择器（a:hover,li:nth-child）
• 伪元素选择器（::before、::after）
• 通配符选择器（*）

12、css选择器的优先级

!important > style 内联> id > class|伪类 >标签|伪元素

13、sass、less和css

less与sass的区别 - 简书 (jianshu.com)

sass和less都是css预处理器，最终编译成css

使用sass/less的好处：

• 结构清晰，便于扩展
• 可以方便地屏蔽浏览器私有语法差异
• 可以轻松实现多重继承

14、BFC

​ 块级格式化上下文，是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

• 触发BFC的条件：1.html2.float属性不为none3.position为absolute或fixed4.display为inline-block, flex，table-cell, table-caption, , inline-flex5.overflow不为visible
• 应用1、阻止margin重叠2、清除内部浮动3、自适应两栏布局

15、为什么会出现外边距合并问题

(3条消息) 最全的css中解决外边距合并问题_Mr.R゛的博客-CSDN博客_css waibianjuhebing

16、如何实现响应式布局

• 百分比布局
• flex布局
• rem+media(媒体查询)
• vw+vh
• 使用一些框架(bootstrap)

17、媒体查询

• 媒体查询是CSS3新语法。
• 使用 媒体查询，可以针对不同的媒体类型定义不同的样式
• 媒体查询可以针对不同的屏幕尺寸设置不同的样式
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染 页面
• 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

​ 媒体查询语法规范。

@media screen and|not|only (media feature) {
    CSS-Code;
}

and 表示且 和的意思 not 表示否 非 only 表示仅仅只有

媒体查询使用方法@media - 简书 (jianshu.com)

18、常见的布局单位

​ 像素（px），百分比（%），em，rem，vw/vh

• px：页面布局的基础，一个像素表示终端屏幕所能显示的最小的区域，分为两种类型：CSS像素和物理像素css像素：为web开发者提供，在css中使用的一个抽象单位物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的
• 百分比：当浏览器的宽度或高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化。
• em：文本相对长度单位，相对于当前对象内文本的字体尺寸
• rem：CSS3新增的一个相对单位，相对于根元素（html）元素的font-size倍数
• vw：相对于视窗的宽度，视窗宽度是100vw
• vh：相对于视窗的高度，视窗高度是100vh
• vmin：vw和vh中的较小值
• vmax：vw和vh中的较大值

19、px、em、rem区别

• px是绝对单位，相对于显示器屏幕分辨率
• em 是相对长度单位，相对于当前对象内文本的字体尺寸。
• rem 是 CSS3 新增的一个相对单位，相对的只是 HTML根元素。

20、promise

Promise是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法

promise对象有以下两个特点

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：

• pending：初始状态，不是成功或失败状态
• fulfilled：意味着操作成功完成
• rejected：意味着操作失败

​ 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

• resolve 代表成功的回调函数
• reject 代表的是失败的回调函数

21、项目中遇到过哪些问题？

前端旅程第一场面试（12.14）

1、自我介绍

2、学的是vue2还是vue3？

3、vue2学了多久？

4、为什么没有学vue3，而是学了vue2？

5、Html语义化

语义化是指使用恰当语义的html标签，让页面具有良好的结构与含义。

6、语义化的优点

• 开发者友好:使⽤语义类标签增强了可读性，开发者也能够清晰地看出⽹⻚的结构，也更为便于团队的开发和维护
• 机器友好:带有语义的⽂字表现⼒丰富，更适合搜索引擎的爬⾍爬取有效信息，语义类还可以⽀持读屏软件，根据⽂章可以⾃动⽣成⽬录

7、行级元素、块级元素

行级元素：

• 多个占一行
• 不能设置宽高、上下内、外边距
• 其宽度和高度尤其内容自动填充

块级元素：

• 自己占一行
• 可以设置宽高、内外边距
• 如果不设置宽高，宽度默认父级元素宽度，高度则根据内容填充

8、行级元素、块级元素分别有哪些？

行级元素：span a i b lable

块级元素：p h1-h6 ul li div ol form table

9、有了解过空元素吗？

没有内容的html元素，在开始的标签中就关闭了 比如<img/>而不是<a><a/>，也就是说空元素没有闭合标签。例如： <hr> <img> <input> <link> <meta>

10、src和href区别？

src的特性：

• 引用外部资源比如script元素、img元素、iframe元素、video元素
• 会替换元素本身的内容
• 会暂停其他资源的下载当浏览器解析到使用src的元素时，会暂停其他资源资源的下载，直到src引用资源加载、编译、执行完毕。这也是为什么script元素推荐放在html结构的底部

href的特性：

• 表示超链接比如a标签、link标签，表示外部资源与该页面的联系
• 不会替换元素本身的内容
• 不会暂停其他资源的下载像css那样影响页面观感的可以放在html结构的头部优先加载

核心思想上的区别：

• src代表的是网站的一部分，没有会对网站的使用造成影响
• href代表网站的附属资源，没有不会对网站的核心逻辑和结构造成影响

11、css选择器

• id选择器（#myid）
• 类选择器（.myclassname）
• 标签选择器（div,h1,p）
• 后代选择器（h1 p）
• 相邻后代选择器（⼦）选择器（ul>li）
• 兄弟选择器（li~a）
• 相邻兄弟选择器（li+a）
• 属性选择器（a[rel="external"]）
• 伪类选择器（a:hover,li:nth-child）
• 伪元素选择器（::before、::after）
• 通配符选择器（*）

12、css选择器的优先级

!important > style 内联> id > class|伪类 >标签|伪元素

13、sass、less和css

less与sass的区别 - 简书 (jianshu.com)

sass和less都是css预处理器，最终编译成css

使用sass/less的好处：

• 结构清晰，便于扩展
• 可以方便地屏蔽浏览器私有语法差异
• 可以轻松实现多重继承

14、BFC

块级格式化上下文，是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

• 触发BFC的条件：1.html2.float属性不为none3.position为absolute或fixed4.display为inline-block, flex，table-cell, table-caption, , inline-flex5.overflow不为visible
• 应用1、阻止margin重叠2、清除内部浮动3、自适应两栏布局

15、为什么会出现外边距合并问题

(3条消息) 最全的css中解决外边距合并问题Mr.R゛的博客-CSDN博客css waibianjuhebing

16、如何实现响应式布局

• 百分比布局
• flex布局
• rem+media(媒体查询)
• vw+vh
• 使用一些框架(bootstrap)

17、媒体查询

• 媒体查询是CSS3新语法。
• 使用 媒体查询，可以针对不同的媒体类型定义不同的样式
• 媒体查询可以针对不同的屏幕尺寸设置不同的样式
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染 页面
• 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

媒体查询语法规范。

@media screen and|not|only (media feature) {    CSS-Code;}

and 表示且 和的意思 not 表示否 非 only 表示仅仅只有

媒体查询使用方法@media - 简书 (jianshu.com)

18、常见的布局单位

像素（px），百分比（%），em，rem，vw/vh

• px：页面布局的基础，一个像素表示终端屏幕所能显示的最小的区域，分为两种类型：CSS像素和物理像素css像素：为web开发者提供，在css中使用的一个抽象单位物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的
• 百分比：当浏览器的宽度或高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化。
• em：文本相对长度单位，相对于当前对象内文本的字体尺寸
• rem：CSS3新增的一个相对单位，相对于根元素（html）元素的font-size倍数
• vw：相对于视窗的宽度，视窗宽度是100vw
• vh：相对于视窗的高度，视窗高度是100vh
• vmin：vw和vh中的较小值
• vmax：vw和vh中的较大值

19、px、em、rem区别

• px是绝对单位，相对于显示器屏幕分辨率
• em 是相对长度单位，相对于当前对象内文本的字体尺寸。
• rem 是 CSS3 新增的一个相对单位，相对的只是 HTML根元素。

20、promise

Promise是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法

promise对象有以下两个特点

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：

• pending：初始状态，不是成功或失败状态
• fulfilled：意味着操作成功完成
• rejected：意味着操作失败

只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

• resolve 代表成功的回调函数
• reject 代表的是失败的回调函数

21、项目中遇到过哪些问题？