前端面试题07

59、CSS有哪些选择器

1. 元素选择器（element selector）：通过元素的标签名称选择元素。例如，p选择所有

   元素。

2. 类选择器（class selector）：通过元素的class属性选择元素。例如，.my-class选择所有class属性为"my-class"的元素。
3. ID选择器（id selector）：通过元素的id属性选择元素。例如，#my-id选择id属性为"my-id"的元素。
4. 后代选择器（descendant selector）：通过元素的后代关系选择元素。例如，.parent .child选择class为"child"的元素，它是class为"parent"的元素的后代。
5. 直接子元素选择器（child selector）：通过元素的直接子元素关系选择元素。例如，.parent > .child选择class为"child"的元素，它是直接子元素关系的class为"parent"的元素。
6. 属性选择器（attribute selector）：通过元素的属性选择元素。例如，[data-color="red"]选择所有具有data-color属性且值为"red"的元素。
7. 伪类选择器（pseudo-class selector）：通过元素的特殊状态或行为选择元素。例如，:hover选择鼠标悬停的元素，:nth-child(n)选择第n个子元素。
8. 伪元素选择器（pseudo-element selector）：通过元素的特定部分选择元素。例如，::before选择元素的内容前插入一个伪元素。
9. 通配符选择器：通过*选择HTML文档中的所有元素。例如，*选择HTML文档中的所有元素。

60、display:none;与visibility:hidden;的区别

1. 显示与占用空间：display:none;会隐藏元素并且不占用任何空间，即使元素被隐藏，它也不会在页面布局中留下空间。而visibility:hidden;则会隐藏元素但仍占用原来的空间，元素仍会在布局中占据相应的位置。
2. 交互性：display:none;会完全移除元素，使其不可见、不可点击、不占据空间且其它相关事件（如鼠标事件、焦点等）也不会触发。而visibility:hidden;只是使元素不可见，但仍可以交互。
3. 子元素受影响：当对某个元素使用display:none;时，该元素以及它的所有子元素都会被隐藏。而visibility:hidden;只会影响被设置了visibility:hidden;的元素本身，不会影响其子元素。

61、CSS盒模型

CSS盒模型是指在页面中用于布局和定位的基本单位，用来描述元素在页面上的尺寸和相互关系。盒模型由四个不同的区域组成，分别是内容区（content area）、内边距区（padding area）、边框区（border area）和外边距区（margin area）。 具体来说，盒模型包括以下四个部分：

1. 内容区：元素的实际内容，由内容的宽度（width）和高度（height）来确定。
2. 内边距区：内容区的周围，内边距（padding）位于内容与边框之间。使用padding属性来设置。内边距可以增加元素的尺寸，并且可以用来调整元素内部内容与边框之间的距离。
3. 边框区：内边距之外，边框（border）被应用在内边距区与外边距区之间。使用border属性来设置。边框可以用来分隔元素的内容与其他元素之间。
4. 外边距区：边框之外，外边距（margin）位于盒模型的最外侧。使用margin属性来设置。外边距可以控制相邻元素之间的间距，以及元素与边界之间的距离。

总结一下：

plaintextCopy code+-----------------------+
|       Margin Area      |
|     +---------------+ |
|     |   Border Area | |
|     |  +-----------+| |
|     |  | Padding   || |
|     |  |  Area     || |
|     |  |           || |
|     |  |  Content  || |
|     |  |   Area    || |
|     |  |           || |
|     |  +-----------+| |
|     +---------------+ |
|                       |
+-----------------------+

默认情况下，CSS盒模型的尺寸计算包括内容区、内边距区和边框区，而不包括外边距区。可以使用box-sizing属性来更改盒模型的尺寸计算方式，有两个常用的值：

• box-sizing: content-box;（默认值）：元素的宽度和高度仅包括内容区，不包括内边距、边框和外边距。
• box-sizing: border-box;：元素的宽度和高度包括内容区、内边距和边框，不包括外边距。这样，在设置固定尺寸时更加方便。

62、display常用属性值

• display: block;：元素将被显示为块级元素，会独占一行并自动换行。可以设置宽度、高度以及内外边距，会忽略vertical-align属性。
• display: inline;：元素将被显示为内联元素，可以和其他内联元素在同一行显示。宽度、高度、外边距和内边距都不会对其生效，只会占据实际内容所需的空间。
• display: inline-block;：元素会被显示为内联块级元素，可以和其他内联元素在同一行显示，同时可以设置宽度、高度、外边距和内边距。
• display: flex;：元素将被显示为弹性盒子，可以使用弹性布局来控制元素的排列和对齐方式。子元素默认会沿主轴排列。
• display: none;：元素将被隐藏，不会在页面上显示，并且不会占据任何空间。子元素也会同时被隐藏。
• display: grid;：元素将被显示为网格容器，子元素可以使用网格布局来进行排列和定位。
• display: table;：元素将被显示为表格，可以使用表格布局的方式进行排列和定位。
• display: inline-table;：元素将被显示为内联表格，可以在行内显示，并使用表格布局。
• display: inline-flex;：元素将被显示为内联弹性盒子，可以和其他内联元素在同一行显示，并使用弹性布局。

63、在Vue Router中路由守卫有哪些

1. 全局前置守卫（Global Before Guards）：
   • beforeEach: 在路由切换之前调用，可以进行全局的身份验证、权限控制等逻辑。
   • beforeResolve: 在路由解析之前调用，同样可以进行全局的身份验证、权限控制等逻辑。在导航被确认之前，所有组件内的beforeRouteEnter守卫和异步路由组件被解析完毕之前都会被调用。
   • afterEach: 导航成功完成之后调用，可以用于进行日志记录、页面埋点等操作。
2. 路由独享守卫（Per-Route Guard）：
   • beforeEnter: 在某个路由配置中定义，在进入该路由之前调用，可以用于针对某个路由的身份验证、权限控制等逻辑。
3. 组件内的守卫（In-Component Guards）：
   • beforeRouteEnter: 在进入路由对应的组件之前调用，可以在组件实例化前获取组件实例，但无法通过this访问组件实例。
   • beforeRouteUpdate: 在当前已经被渲染的组件复用时调用，例如从/user/1导航到/user/2。
   • beforeRouteLeave: 在导航离开当前路由时调用，可以用于确认是否离开或提示用户保存未保存的数据等操作。

64、如何判断一个变量是否为数组

1. Array.isArray(): 这是一个静态方法，用于判断给定的值是否为数组。如果是数组，返回true；否则，返回false。
2. Object.prototype.toString(): 这是一个通用的方法，可以用来获取变量的类型。对于数组，使用Object.prototype.toString.call()传入数组，返回的结果会以[object Array]的形式表示。可以通过对这个字符串进行判断来确定是否为数组。
3. instanceof Array: 这是一个操作符，用于检测对象是否是特定类的实例。对于数组，可以使用arr instanceof Array来判断arr是否为数组。如果是数组，返回true；否则，返回false。

以下是示例代码：

const arr = [1, 2, 3];
// 使用 Array.isArray() 方法
const isArr1 = Array.isArray(arr);
console.log(isArr1);  // true
// 使用 Object.prototype.toString() 方法
const isArr2 = Object.prototype.toString.call(arr) === '[object Array]';
console.log(isArr2);  // true
// 使用 instanceof 操作符
const isArr3 = arr instanceof Array;
console.log(isArr3);  // true