【基础八股文】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来控制的

区别一:兼容性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组件都是独立的

相关推荐
崔庆才丨静觅10 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606111 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了11 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅11 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅12 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅12 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment12 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅12 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊12 小时前
jwt介绍
前端
爱敲代码的小鱼13 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax