面试前端八股文十问十答第三期

面试前端八股文十问十答第三期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）box-sizing属性

box-sizing属性指定了元素的盒模型的计算方式。默认情况下，元素的宽度和高度是指内容框的宽度和高度，不包括内边距(padding)和边框(border)。通过设置box-sizing为border-box，可以让元素的宽度和高度包括内边距和边框。

2）CSS 盒子模型

CSS 盒子模型是用来描述一个元素在页面上所占空间的模型。它包括了内容框、内边距、边框和外边距。内容框指的是元素的实际内容，内边距是内容框和边框之间的空间，边框是内容框和外边距之间的空间，外边距是元素和其周围元素之间的空间。

3）BFC（块级格式上下文）

BFC（块级格式上下文）是CSS中的一个概念，它指的是一个独立的渲染区域，内部的块级盒子会按照一定规则进行布局。BFC可以解决一些布局上的问题，比如浮动元素造成的高度塌陷、边距重叠等。通过触发BFC，可以让元素按照规则进行布局，不受外部元素的影响。

4）让一个元素水平垂直居中

要让一个元素水平垂直居中，可以使用flex布局或者绝对定位结合transform属性来实现。例如，可以使用以下CSS代码实现水平垂直居中：

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

5）隐藏页面中某个元素的方法

要隐藏页面中某个元素，可以使用CSS的display属性来实现。例如，可以使用以下CSS代码来隐藏一个元素：

.hidden {
  display: none;
}

6）用CSS实现三角符号

要用CSS实现三角符号，可以使用伪元素和border属性来创建一个三角形。例如，可以使用以下CSS代码实现一个向下的三角形：

.triangle {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid black;
}

7）页面布局

页面布局是指将网页中的内容按照一定的结构和样式进行排列和展示的过程。常见的页面布局方式包括流式布局、栅格布局、Flexbox布局和Grid布局等。

8）如何使用rem或viewport进行移动端适配

在移动端适配中，可以使用rem或viewport来实现响应式布局。使用rem时，根据html元素的字体大小来确定其他元素的大小；使用viewport时，通过设置meta标签的viewport属性来控制页面在移动设备上的显示效果。

9）JS中的8种数据类型及区别

在JavaScript中，有8种数据类型，分别是：undefined、null、boolean、number、string、symbol、object和bigint。它们之间的区别主要在于存储方式、数据范围和操作方式等。

• undefined表示一个未定义的值。
• null表示一个空值。
• boolean表示逻辑值true或false。
• number表示数字，包括整数和浮点数。
• string表示字符串。
• symbol表示唯一的、不可改变的值。
• object表示复杂数据类型，可以存储多个值。
• bigint表示大整数，可以表示任意精度的整数。

10）JS中的数据类型检测方案

在JavaScript中，可以使用typeof运算符、instanceof运算符、constructor属性、Object.prototype.toString方法等方式来进行数据类型检测。

• typeof运算符用来判断一个变量的数据类型，返回一个字符串。
• instanceof运算符用来判断一个对象是否是某个构造函数的实例。
• constructor属性用来获取一个对象的构造函数。
• Object.prototype.toString方法返回一个表示对象的类型的字符串。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

前后端总计已经 900+ Star，1.5W+ 访问！

⭐点赞⭐收藏⭐不迷路！⭐