【前端高频面试】干货！！！

面试整理的干货给搬过来了！供大家参考！

link标签的属性

link标签的属性有以下几种：

1. href：指定链接的目标URL。
2. rel：指定链接与当前文档之间的关系。常见的取值有stylesheet（引入外部样式表）、icon（指定网站图标）、alternate（指定替代版本的文档）等。
3. type：指定链接目标的MIME类型。对于样式表，通常使用text/css；对于图标，通常使用image/x-icon。
4. media：指定链接的媒体类型。用于指定样式表适用的设备类型，如screen（屏幕）、print（打印机）等。
5. crossorigin：指定是否允许跨域请求。可取值anonymous（允许匿名请求）或use-credentials（允许使用凭证请求）。
6. integrity：指定链接资源的完整性校验值，用于验证资源是否被篡改。
7. sizes：指定图标链接的尺寸。常用于指定网站图标在不同设备上的显示尺寸。
8. as：指定资源的预期用途，用于优化页面加载性能。常用的取值有script（脚本文件）、image（图像文件）、font（字体文件）等。

画一条0.5px的线

1. 采用meta viewport 不同设备不同效果

<meta name="viewport" content="width=device-width, initial-scale=0.5">

1. 采用border-image的方式

创建一张1像素宽、0.5像素高的线条图像，例如使用以下代码创建一张PNG格式的线条图像：

.line类定义了一个实线边框，并使用border-image属性将线条图像设置为边框图片。其中，0 0 100% 0设置了边框图片的填充方式，stretch表示边框图片会被拉伸以填充边框区域。由于线条图像的高度只有0.5像素，因此需要将border-width属性设置为1像素，从而使边框的高度为0.5像素。

1. 采用transform:scale(0.5)的方式

画一个三角形

两栏布局：左侧宽度固定，右侧宽度自适应布局

1. 左盒子float:left，右盒子margin-left:左盒子宽度
2. 左盒子float:left，右盒子overflow：hidden
3. 左盒子float:left，右盒子display: flow-root(触发bfc)
4. 父盒子display:flex，左盒子设置宽度，右盒子通过calc(100%-左盒子宽度)
5. 父盒子display:flex，左盒子设置宽度，右盒子设置flex:1(意味着占满整个盒子减去其他盒子的宽度)

三栏布局：中间自适应

1. 左盒子float:left，右盒子float:right，中间盒子calc()
2. 使用flex布局，左右给固定宽度，中间使用felx:1分得剩余宽度
3. 使用position定位，子盒子绝对定位，给定左右固定宽度，左边left为0，右边right为0，中间左右距离为左右盒子的宽度

多列自适应

一个hover怎么控制两个元素

js

数据类型检测方式

1. typeof类型判断：

基本数据类型：null被判断为object,其他正确（直接在计算机底层基于数据类型的值（二进制）进行检测，object与null都是以000开始的二进制储存）、typeof NaN===’number’

引用数据类型：函数判断为function，数组、对象其他都显示为object

1. instanceof

内部运行机制：判断原型链中能否找到该类型的原型

只判断引用数据类型

可测试一个对象在其原型链中是否存在一个构造

函数的prototype属性

1. constructor

基本、引用数据都可判断

创建对象改变原型就不能判断数据类型

1. Object.prototype.tostring.call()

使用Object对象的原型方法tostring判断数据类型

obj.toString()与Object.prototype.tostring.call()为啥结果不同？

toString是Object原型上的方法，Array、function作为Object的实例重写了toString方法，不同对象类型调用toString时，是调用重写后的toString，最后得到的是字符串类型。

手写getType函数，获取详细数据类型

function getType(x) {

    const originType = Object.prototype.toString.call(x)

    const spaceIndex = originType.indexOf(' ')

    const type = originType.slice(spaceIndex + 1, -1)

    return type.toLowerCase()

}

console.info(getType(new Date()))  //date