前端常见面试题

最新推荐文章于 2025-10-21 13:37:42 发布

原创

最新推荐文章于 2025-10-21 13:37:42 发布 · 1.4k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

1. HTML语义化

标签语义化是指在开发时尽可能使用有语义的标签，比如header，footer，h，p，少使用无语义如div

好处：

对于开发者而言，语义化标签有着更好的页面结构，利于个人的代码编写。
对于用户而言，当网络卡顿时有良好的页面结构，有利于增加用户的体验。
对于爬虫来说，有利于搜索引擎的SEO优化，利于网站有更靠前的排名。
对于团队来讲，有利于代码的开发和后期的维护。

2. 盒模型

css盒子的组成包括margin、border、padding、content
有两种盒模型：W3C标准盒模型和 IE怪异盒模型
标准盒模型在设置width和height时设置的是content的大小，盒子的大小还要加上padding、border
怪异盒模型设置width和height时设置的是盒子的大小，会压缩content区域
默认使用标准盒模型，也可以通过控制box-sizing属性决定盒模型：
- content-box代表标准盒模型
- border-box代表怪异盒模型

3. 浮动

1.作用：常用于图片，可以实现文字环绕图片
- 设置了浮动的块级元素可以排列在同一行
- 设置了浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子
2.特点：脱离文档流，容易造成盒子塌陷，影响其他元素的排列
- 当父元素不设高度需要子元素来撑开，而子元素设置浮动就会导致父元素的高度塌陷
3.解决塌陷问题：
- 父元素中添加overflow: hidden
- 给父元素添加高度
- 在下方创建一个空白div，添加clear: both
- 在父级添加伪元素::after{ content:'', clear:both, display:table }

4. 样式优先级的规则

!important >
内联样式 >
ID 选择器（#id{}） >
类选择器（.class{}） = 属性选择器（a[href="segmentfault.com"]{}） = 伪类选择器（ :hover{}） >
标签选择器（span{}） = 伪元素选择器（ ::before{}）= 后代选择器（.father .child{}）>
子选择器（.father > .child{}） = 相邻选择器（ .bro1 + .bro2{}） >
通配符选择器（*{}）

5. CSS尺寸设置的单位

共有五个长度单位，分别是px，em，rem，vw，vh
除了px是绝对单位，其余都是相对单位
em相对于自身大小（但在font-size中相对于父元素字体大小）
rem相对于根元素的字体大小
vw相对于可视化窗口的宽（1vw就是1%可视化窗口宽度）
vh相对于可视化窗口的高（1vh就是1%可视化窗口高度）
一般采用rem + 媒体查询或者rem + vw 来实现响应式布局。原理是当窗口大小发生变化时，通过媒体查询或者 vw 改变根元素的字体大小，从而改变以 rem 为单位的元素大小

6. BFC

定义：块级格式化上下文，独立的渲染区域，不会影响边界外的元素
形成条件：
- 浮动
- 非静态定位static
- overflow: hidden
- display: table
布局规则：
- 区域内容box从上到下排列
- box垂直方向的距离由margin决定
- 同一个BFC内 box的margin会重叠
- BFC不会与float元素重叠
- BFC计算高度也会计算float元素
解决的问题：
- 解决浮动元素重叠
- 解决父元素高度塌陷
- 解决margin重叠

7. 未知宽高元素水平垂直居中的办法

1.设置元素相对父级定位 position: absolute; left: 50%; top: 50%，让自身平移自身高度50% transform: translate(-50%, -50%);
- 兼容性好，被广泛使用的一种方式
2.设置元素的父级为弹性盒子display: flex，设置父级和盒子内部子元素水平垂直都居中justify-content: center; align-items: center
- 代码简洁，但兼容性ie 11以上支持
3.设置元素的父级为网格元素display: grid，设置父级和盒子内部子元素水平垂直都居中justify-content: center; align-items: center
- 代码简洁，但兼容性ie 10以上支持
4.设置元素的父级为表格元素display: table-cell，其内部元素水平垂直都居中text-align: center; vertical-align: middle; ，设置子元素为行内块display: inline-block;

8. 三栏布局的实现方案

flex布局：
- 将最外层盒子设为弹性布局，左右两边的盒子固定宽度200px
- 将中间的盒子flex设为1
  - 这样中间盒子的宽度就能一直得到全部宽度减去左右盒子的宽度，这个宽度会随着窗口的大小而变化
grid布局：
- 左右两边的宽度固定，将剩余的空间给中间的主体部分
- 要用到grid-template-columns：定义网格的列大小和数量
圣杯布局：实现原理： float + margin负值 + position: relative
- 保证中间栏最先加载，那就要把middle容器写在前面
```
<div class="container">
    <div class="middle"></div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
```
- 给父容器添加`padding：0 200px，腾开位置
- middle中间容器设置width：100%，此时的宽度继承了父容器的100%
- 并给三个子容器都设置float: left，都向左浮动，去到同一行
- 给左右容器相对定位，让它们相对自己原本文档流的位置进行定位
```
.left{
      width: 200px;
      background: #76d1ea;
      position: relative;
      margin-left: -100%; //向左挪动父容器宽度的100%
      left: -200px;  //再向左挪动自身的200宽度
    }
```
- 此时right接替了left原本的位置，同理，这时候只需要给right设置：margin-right: -200px; ，就可以实现三栏布局了
双飞翼布局：
- 结构稍微改造一下，在middle容器里面多用了个inner容器
- 设置了middle的width：100%，这时候我们只需要设置inner容器为padding：0 200px
- left、middle、right同样使用浮动
- left设置margin-left:-100%(父容器的整个宽度）
- right设置margin-left：-200px

详细实现请看：三栏布局的实现方法

9. JS数据类型及区别

分为两类：基本数据类型（简单数据类型）、引用数据类型（复杂数据类型）
基本数据类型包含7种，分别是Number 、String、Boolean、Null、Undefined、BigInt、Symbol
- Symbol是ES6新出的一种数据类型，特点是没有重复的数据，可以作为object的key
- 使用Symbol数据作为key不能使用for获取到这个key，需要使用Object.getOwnPropertySymbols(obj)获得这个obj对象中key
- BigInt也是ES6新出的一种数据类型，特点就是数据涵盖的范围大，能够解决超出普通数据类型范围报错的问题
引用数据类型通常用Object代表，普通对象、数组、正则、日期、Math数学函数都属于Object
本质区别：在内存中的存储方式不同
- 基本数据类型：存储在栈中的简单数据段，占据空间小，属于被频繁使用的数据
- 引用数据类型：存储在堆内存中，占据空间大
  - 引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址，当解释器寻找引用值时，会检索其在栈中的地址，取得地址后从堆中获得实体。

10. null和undefined的区别

null是定义并赋值null，typeof判定为object
- 表示一个变量被人为的设置为空对象，而不是原始状态
- null 其实属于自己的类型Null，而不属于Object类型，typeof 之所以会判定为 Object 类型，是因为JavaScript 数据类型在底层都是以二进制的形式表示的，二进制的前三位为 0 会被typeof判断为对象类型，而 null 的二进制位恰好都是 0 ，因此，null 被误判断为 Object 类型。
undefined是定义未赋值，typeof判定为undefined