web前端每日一题：高频面试数组的键类型 arr[0]和arr['0']实际上是一个东西。在js中，数组的本质是对象，对

数组的键类型

let arr = []
arr[0] = 1
arr['0'] = 2
console.log(arr[0] + arr['0'])  //打印的结果是什么

arr[0]和arr['0']实际上是一个东西。在js中，数组的本质是对象，对象是键名只能是字符串，所以当数字0成为键名时会自动成为字符串'0'，本来是1，然后被赋值为2.结果是2+2 = 4.

css中，为什么a元素的颜色不会继承父元素

a标签的默认样式中有继承浏览器的颜色，所以不需要继承父元素的。在css中有一个重要的规则：当一个元素，它没有相关样式时，它才需要从父元素去继承。如果有了相关样式，就不需要从父元素继承了

为什么浮动的a元素可以设置宽高

浮动也好，绝对定位也好都有这样的现在，会自动变为display:block;就算自己定义display:inline也不行。

保持宽高比例

如何让高度为宽度的75%

.innerr {
    width:100%;
    //如何让高度为宽度的75%
    padding-bottom: 75%;
}

inner 的宽度 = 父元素的内容宽度

高度 = 父元素内容宽度 * 75%

什么可以设置为父元素内容宽度的 75% 呢，就是 padding

有四个方向的内边距，任何一个方向的内边距，只要给它设置百分比，那么它一定是相对于父元素的内容宽度。

JS 有几种数据类型

一共有8种，Boolean , Null , Undefined , Number , BigInt , String , Symbol

JS 和 ES 有什么关系

flowchart TD
A(JavaScript) --> B(EcmaScript)
A --> C(WebAPI)
B --> D(语言规范)
B --> E(标准库)
C --> F(BOM)
C --> G(DOM)

连续赋值的对象

let a = {
  n: 0
}
let b = a
a.n = a = { n: 1 }
console.log(b.n) // {n:1}

a:地址1 { n:0 }

a 赋值 b --> b:地址1

a.n被赋值 a = { n:1 } --> 地址2{ n: 1 } --> 地址1 { n: 地址2 }

--> a:地址2 ， b:地址1

打印(b.n) ，b是地址1，也就是打印地址2 { n:1 }

括号运算符

console.log((1,2,3)) // 3

括号运算符不管里面放了几个东西，返回的永远是最后一个。

相对路径与绝对路径

只有以‘./’或者'../'或者什么都没有的才是相对路径，其余都是绝对路径

http://baidu.com/news    //绝对路径
//aliyun.com/news   //绝对路径
/news    //绝对路径
./news    //相对路径
news     //相对路径

分散对齐(左右对齐)

text-align:justify 这样文本就分散对齐了，在表格常用

但它只会作用于其他行不会作用于最后一行

如果是最后一行用 text-align-last:justify 就可以了

文字排列方向

writing-mode: vertical-rl ：垂直排列，从右向左

图片底部间隙

图片、文字都是属于行盒，就跟英文格写单词一样，也有参考线，所以图片底部的间隙就是这个参考线造成的空隙。

解决方法：1.将字体大小设置为0，参考线就重叠在一起了,font-size:0;

2.将图片设置为块盒，display:block

包装类型

自动做一些处理在 JS 中，当把一个原始类型当成一个对象再使用时，JS 会自动做一些处理，它会把原始类型转换成对象。转换的方式就是使用每一个原始类型对应的包装类来进行转换。

var str = 'hello world'
console.log(str[0])   // 实际上是  console.log(new String(str)[0])

不仅是字符串，数字，boolean，一旦把它们当做对象再使用时，会自动的进行转换

平滑滚动

在页面上有向上的置顶，点击可以到页面顶部，如何让其平滑滚动而不是立刻滚动到页面顶部，只需在css中写一行代码。有很多滚动条，看这个滚动条在哪个元素内，就在哪个元素设置css。

比如相对于整个浏览器的，元素在html内：

    html {
       scroll-behavior: smooth;
    }

文本溢出

// 单行文本溢出

.content {
    white-space: nowrap  // 不让换行，变成单行
    overflow: hidden   // 将超出的文字隐藏
    text-overflow: ellipsis   // 如果文本溢出变为省略号
}

// 多行文本溢出

.content {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5 ;  // 控制多少行的时候省略
}

三种隐藏方式的区别

	display:none	visibility:hidden	opacity
是否生成盒子	×	√	√
是否占据空间	×	√	√
是否可以交互	×	×	√
是否参与reflow	×	√	√
是否参与repaint	×	×	√