【基础八股文】html css js

2024-01-02 15:36:12

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)是相对于根元素(通常是 <html> 元素)的字体大小进行计算的,而 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组件都是独立的

文章来源:https://blog.csdn.net/weixin_55639808/article/details/135339456
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。