【基础八股文】html css js

1、css盒模型

在html页面中说有元素都可以看成一个盒子，

组成：盒子的组成内容content，内边距padding，边框border，外边距margin，

类型：标准盒模型：margin+border+padding+content 

             IE盒模型 ：margin+content(border+padding)

标准盒模型转IE盒模型，只需要添加一个属性，box-sizing:border-box;

2、行内元素，块级元素空元素

行内：span,img,input....

块级元素：div,footer,header,p,h1~h6

空元素：br

元素之间的转换是通过css来控制的

3、link 和@import区别？

区别一：兼容性link 比@import兼容好，体现在IE5版本

区别二：加载顺序，link是标签，后加载@import

4、img中的alt 和 title 区别？

title:鼠标移入显示的值

alt图片加载不出来显示的文字

在seo优化上，要加入alt利于seo优化

5、png,jpg,gif什么地方用？

png无损压缩，体积要比jpg大，清晰度高，适合做小图标

jpg:采用压缩算法，有一点失真，比png体积要小适合，中大图片

gif：做动图

webp:同时支持有损压缩和无损压缩，相同质量的图片，体积会更小，加载速度快，兼容性不好

6、line-height 和height 区别？

height 就是元素的高度，line-height 每一行文字的高度，如果文字换行，则整个盒子的高度会增大，盒子的高度是行数*行高，height 是一个死值，就是一个元素的高度

7、css选择符？哪些属性可以继承？

选择符：通配，id选择器，类选择器，标签选择器，相邻选择器+下一个兄弟，后代选择器ul li ul里所有li ，文本属性都可以继承

8、css优先级算法如何计算？

优先级比较：@important > 内敛样式 > id > class > 标签 > 通配

9、用css画三角形？

10、一个盒子不给宽高，如何居中？

11、清除浮动的方式？

触发bfc,overflow:hidden,

12、null和undefined区别？

null是一个表示空值的JavaScript关键字。它表示一个空对象引用。
undefined表示一个未定义的值。如果一个变量被声明但没有被赋值，那么它的值就是undefined。虽然它们都表示没有值，但null和undefined之间有一些区别：
null是JavaScript语言中的关键字，它是一个表示空值的特殊对象。它可以被明确地赋值给变量。
undefined是一个全局变量，它的值表示一个未定义的值。当变量声明但未赋值时，默认为undefined。
在使用时，null通常是在编程中显式地赋值给变量，而undefined是一个变量的默认值。
let a = null; // 显式地将a赋值为null
let b; // b的默认值为undefined
 
console.log(a); // 输出 null
console.log(b); // 输出 undefined
null是一个关键字，表示一个空值的对象引用。
undefined表示一个未定义的值，用作默认初始值。
在使用时，null是显式赋值的，undefined是默认值。

13、==和=== 的区别?

==（相等操作符）：比较时会进行类型转换，尝试将两个操作数转换为相同的类型，然后进行值的比较。如果操作数的类型不同，会进行类型转换后再比较。这种比较方式被称为弱类型相等比较。

===（严格相等操作符）：比较时不进行类型转换，仅当两个操作数的类型相同且值相等时，返回true。这种比较方式要求比较的操作数类型和值都要相同。

当比较两个相同类型的原始类型（如数字、字符串等），== 和 === 的结果是一样的。例如：
1 == 1 // true
1 === 1 // true
 
'hello' == 'hello' // true
'hello' === 'hello' // true
当比较不同类型的原始类型时，== 会进行类型转换后再比较，而=== 不进行类型转换。例如：
1 == '1' // true，将字符串转换为数字后比较
1 === '1' // false，类型不同
 
true == 1 // true，将布尔值转换为数字后比较
true === 1 // false，类型不同
对于特殊值（null和undefined），== 和 === 的结果也有差异。例如：
null == undefined // true，它们被认为是相等的
null === undefined // false，它们类型不同
推荐使用===进行比较，因为它不会进行类型转换，可以避免引起意外的比较结果。在大多数情况下，严格相等操作符===更安全、更准确。但是，对于某些特定情况下需要进行类型转换的比较，可以使用相等操作符==。

当比较的操作数是字符串和数字时，会尝试将字符串转换为数字，然后进行值的比较

当比较的操作数是布尔值和非布尔值时，会将布尔值转换为数字（true 转换为 1，false 转换为 0），然后进行值的比较。

当比较的操作数是对象和非对象时，会尝试将对象转换为原始值（valueOf() 或 toString() 方法被调用），然后再进行比较。

14、什么是同步什么是异步？

同步（synchronous）和异步（asynchronous）是用于描述事件、操作或任务处理方式的概念。

同步：同步操作是按照顺序依次执行的，每个操作都会等待前一个操作完成后再执行。在同步操作中，代码的执行顺序决定了程序的执行流程。当一个同步操作被调用时，程序会一直等待该操作完成后才继续执行下一个操作。同步操作可能会造成程序在某个操作阻塞的情况，如果其中一个操作耗时较长或发生阻塞，后续操作会被延迟执行。

异步：异步操作是在不阻塞程序执行的情况下进行的。在异步操作中，代码会继续执行后续操作，而不等待前一个操作完成。异步操作通常会使用回调函数、事件监听、Promise、async/await 等机制来处理操作的完成或结果的返回。异步操作可以提高程序的并发性和响应能力，特别适用于需要处理耗时或可能阻塞的操作，如网络请求、文件读写、数据库查询等。

异步操作很常见，比如使用回调函数处理异步事件，使用Promise处理异步任务，或者使用async/await语法更清晰地编写异步代码。

总而言之，同步操作按顺序执行，阻塞程序的执行流程；而异步操作可以并发执行，不阻塞程序的执行流程，通过回调或其他机制处理操作的完成或结果的返回。 

15、js作用域？

JavaScript 的作用域（Scope）是指变量在代码中访问和可见的范围。

全局作用域（Global Scope）：全局作用域是指变量在整个代码中都可访问的范围。在全局作用域中声明的变量可以被任何函数或代码块访问。

函数作用域（Function Scope）：函数作用域是指变量在函数内部声明时可见的范围。在函数作用域中声明的变量只能在函数内部被访问，外部的代码无法直接访问这些变量。

块级作用域（Block Scope）：块级作用域是指变量在代码块（如 if 语句、for 循环、函数内部的块等）内部声明时可见的范围。在 ES6（ECMAScript 2015）之前，JavaScript 没有块级作用域，只有全局作用域和函数作用域。但在 ES6 引入的 let 和 const 关键字可以在代码块中创建块级作用域。

作用域链（Scope Chain）是指查找变量时所遵循的规则。当访问一个变量时，JavaScript 引擎会按照作用域链从内到外依次查找变量，直到找到匹配的变量或达到全局作用域。

作用域是在变量被声明时确定的，而不是在变量被使用时确定的。当变量在作用域外部被访问时，JavaScript 引擎会按照作用域链去查找该变量。

16.rem和em的区别？

rem 和 em 都是用于网页中设置字体大小的单位

相对性：rem（root em）是相对于根元素（通常是 元素）的字体大小进行计算的，而 em（em）则是相对于当前元素的字体大小进行计算的。

继承性：em 具有继承性，即子元素的字体大小会相对于父元素的字体大小进行计算。而 rem 不具有继承性，子元素的字体大小不会受到父元素的影响。

使用场景：rem 更适合用于全局的布局设置，特别是在响应式设计中，通过设置根元素的字体大小来调整整个页面的布局比例。em 更适合局部的字体大小调整，特别是在相对于父元素的情况下，可以方便地进行元素的嵌套和调整。

例如，假设根元素的字体大小为 16px，那么 1rem 就等于 16px。

17.自适应？

使用 CSS 媒体查询和流动的网格布局来适应不同的屏幕大小，并根据屏幕宽度和设备特性调整页面的样式和布局。

18、响应式布局方案？

什么情况下采用响应式布局？

响应式加载速度会很慢，用户量不是特别大，纯展示类的项目，例如公司官网，

访问量比较大，类似于淘宝，pc会加入一点点响应式，移动端，会采用自适应方案。

19、var,let ,const 三者区别？

共同点：都是可以声明变量

区别1：var具有变量提升的机制，let和const 没有变量提升机制，

区别2：var可以多次声明同一个变量，let和const 不可以多次声明同一个变量，

区别3：var和let声明的是常量，const声明常量，var和let声明的变量可以再一次赋值，而const 不可以再次赋值

面试的时候会问const 一个对象，里面是a:1，我现在想打印console.log(obj.a)这个结果是1，我想改变a:2,打印的就是2因为里面的值不是const,从内存的角度看，一个对象里面修改了对量里面的属性值，那么再次打印会打印出新的值，

什么是常量：常量是一个在程序执行过程中不能被改变或修改的固定值。它是被赋予一个固定值后就不能再改变的变量。理解成，不能被操作所修改的变量就是常量。用途：保护数据，可以提高程序的可读性、可维护性

变量：变量是用于存储和表示数据的一种命名容器。它是程序中的一个基本概念，用于在内存中存储和操作数据。变量的值可以被修改和更新。

区别4：var没有作用域，在ES6之后才出现的作用域块的概念，

20.怎么合并多个对象？

办法1：利用浅拷贝：定义一个对象属性，让它指向两个对象，打印出一个新的对象，但这个有缺陷，当两个对象有共同的属性的时候，会被覆盖掉，导致打印出来的数据没有重复的属性值

办法2：进行解构(...a,...b)

21、箭头函数和普通函数有什么区别？

this的指向不同，箭头函数在定义的时候就决定好的，而且不可以被修改(call,apply.bind)，箭头函数的this指向的时候，指的是外层第一个普通函数的this

2箭头函数不能当作构造函数，不可以new

3,箭头函数没有原型

4.箭头函数没有arguments对象

22、promise？

23、find和filter？

区别：返回的内容不同，filter返回一个新数组，find 返回的数元素的第一个符合条件的结果

两个都不改变原数组$

24.ref是什么？

来获取DOM,在mounted里面拿到dom,zaivue2中this.$ref.元素，就可以获取dom 

在setup语法糖里面是定义一个响应式变量

25.scoped原理？

每一个vue组件都是独立的