CSS，JS基础面试题了解一下？

## CSS

- CSS选择器的优先级是怎样的？ ][]

CSS选择器优先级最高到最低顺序为：

1.id选择器（#myid）

2.类选择器（.myclassname）

3.标签选择器（div,h1,p）

4.子选择器（ul < li）

5.后代选择器（li a）

6.伪类选择（a:hover,li:nth-child）

最后，需要注意的是：　　

!important的优先级是最高的，但出现冲突时则需比较”四位数“;

优先级相同时，则采用就近原则，选择最后出现的样式;

继承得来的属性，其优先级最低。

- [link和@import的区别？ ][]

1.从属关系区别: @import 是 CSS 提供的语法规则，只有导入样式表的作用； link 是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别: 加载页面时， link 标签引入的 CSS 被同时加载； @import 引入的 CSS 将在页面加载完毕后被加载

- [有哪些⽅式（CSS）可以隐藏⻚⾯元素？ ][]

1,display:none  2.overflow:hedden   3.可以通过将透明度调结为0（opacity: 0;），完全透明状态来达到隐藏页面元素的效果。

- [em\px\rem区别？ ][]

1. px为固值单位像素，浏览器最小的显示单位
2. em:相对单位，以父元素的字号为标准计算，父元素字体大小的多少倍“嵌套中都使用此单位会有逐级相乘的状态”。
3. rem:相对单位，以跟标签html的字号为标准计算，rem不会受上级元素的字号影响。

- [块级元素⽔平居中的⽅法？ ][]

1. 使用margin：0 auto；2.利用弹性布局 display：flex； justify-content: center;  align-items: center;

- [CSS有⼏种定位⽅式？ ][]

1. 有五种方式
2. 分别是：static静态定位，absolute绝对定位，relative相对定位，fixed固定定位，sticky粘性定位（relative相对定位，fixed固定定位的结合使用）

- [如何理解z-index？ ][]

1. 显示元素的堆叠顺序，当多个定位的块重叠时通过调节z-index的值可以让下面被覆盖的块显示出来，z-index的值为number“可为负数”，默认值0

- [如何理解层叠上下⽂？ ][]

1. 在HTML中有一个三维概念，也就是我们面向电脑屏幕的这一端为Z轴。 而凡是拥有层叠上下文的元素，将离用户最近，也就是越靠在Z轴前面。默认情况下只有根元素HTML会产生一个层叠上下文，并且元素一旦使用了一些属性也将会产生一个层叠上下文，如我们常用的定位属性。如两个层叠上下文相遇时，总是后一个层叠前一个，除非使用z-index来改变。

- [清除浮动有哪些⽅法？ ][]

1. 给父元素添加 .overflow:hedden
2. 使用after位元素清除浮动
3. 给父元素设置宽高

- [你对css-sprites的理解 ][]

1. css-sprites为精灵图片，精灵图片使用比较简单方便，而且还可以减少请求数量减小服务器压力，可以用来性能优化
2. 又称精灵图片，就是将很多的小图放置到一张大图片上，精灵图主要做为背景图使用。之所以使用精灵图是因为使用某张图片时需要向服务器发送请求资源，如果图片过多服务器的压力就会较大，所以精灵图片可以减轻服务器的压力。

使用方式：背景插入，图片大小，背景定位

- [你对媒体查询的理解？ ][]

1.语法： @media mediaType 操作符（media feature） {css-code}

         @media  媒体查询，可以针对不同的媒体类型定义不同的样式。

         mediaType  媒体类型

              -screen  表示电脑，平板，智能手机屏幕，包含有关客户端显示屏幕的信息。

 2.操作符： 创建复杂的媒体类型

              -and  所有条件都要成立的条件下，才能使用样式表。

              ,  有一个条件成立，就可以执行代码块。

              -not 排除设备类型，如果后面是条件“作为条件取反使用。

         （media feature） 条件“规定媒体/设备的特征”。

              -max- 相当于小于等于<=

              -min- 相当于大于等于>=

         {css-code} 媒体查询符合条件执行的css代码。

- [你对盒模型的理解？ ][]

1. 盒子模型(Box Model)就是把HTML元素看作一个矩形的盒子,每个矩形由四个部分组成,分别为"margin外边距,border边框,padding内边距,content内容"组成的,每个盒子除了有自己的大小和位置之外,还会影响其它元素的大小和位置.

- [标准盒模型和怪异盒模型有什么区别？ ][]

1.标准盒子：

         标准盒子中 width 指的是内容区域的宽，height 指的是内容区域的高。

         盒子大小设置：content = content + padding + border + margin

2.怪异盒子：

         怪异盒子中 width 指的是 “内容+ padding + border”的总宽/高度。

         盒子大小设置：content = （content + padding + border）+ margin

- [谈谈对BFC(Block Formatting Context)的理解？  ][]

，它是⼀块独⽴的区域，让处于BFC内部的元素与外部的元素互相隔离

如何形成？

BFC触发条件:

根元素，即HTML元素

position: fixed/absolute

float 不为none

overflow不为visible

display的值为inline-block、table-cell、table-caption

作⽤是什么？

防⽌margin发⽣重叠

两栏布局，防⽌⽂字环绕等

防⽌元素塌陷

- [为什么有时候⼈们⽤translate来改变位置⽽不是定位？ ][]

translate(x，y): 平移方法，参数为number+单位，值可为负数。

            两个值：一个代表X轴，一个代表Y轴。一个值时：该值作用于x轴，y轴默认为零。

1. translate是transform的一个值。改变transform或者opacity不会触发浏览器重新布局，或者重绘，只会触发复合。而改变绝对定位会触发回流，进而触发重绘，所以说在使用绝对定位时会触发重绘和回流操作。
2. 并且transform使浏览器为元素创建一个GPU图层，但是改变绝对定位会使用到CPU，因此translate更加高效，可以缩短平滑动画的绘制时间。
3. 而translate改变元素时，元素依然会占据原始位置，但是绝对定位不会发生这样的情况。

- [伪类和伪元素的区别是什么？ ][]

1.伪类:

    特点：选择器前面带“：”前缀。

    描述：用来定义元素的状态，和DOM类似“不同的地方在于伪类只是插入了一些修饰类的元素”。

作用：用于向某些元素“选择器”添加特殊的效果使用。

2.伪元素：

        特点：选择器有“：：”为前缀。

        描述：相当于创建了一个HTML元素。

        作用：用于代替实际的HTML元素。

3.伪类和位元素的区别：

        伪类：可以添加实际的类来实现。

        伪元素：可以添加实际的元素来实现（位元素是对元素中特定的内容进行操作，控制的内容和元素相同，本身不处于文档流中）。

- [你对flex的理解？ ][]

1. flex是弹性布局
2. flex布局：h5新出的布局方式，为了替代传统的float布局，（float，vertical-align,属性在布局中将失效）使用布局后会是其他的垂直对齐排版失效。

- [关于CSS的动画与过渡问题 ][]

1. 动画内部使用百分比设置关键帧，每一帧中都要设置这一帧的样式。0%动画的初始状态，100%动画的结束状态。
2. 注意：开始和结束的属性状态要保持一致，否则不能实现动画效果
3. 过渡：是从一种样式逐渐改变为另一种样式的过程效果。

    必须指定的内容：

          1.比去配合事件触发过渡。

          2.必须指定效果的css属性。

          3.必须指定效果的持续时间。

## js

### js基础

-[神魔是js] []

JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。

JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页，其中：

• HTML 用来定义网页的内容，例如标题、正文、图像等；
• CSS 用来控制网页的外观，例如颜色、字体、背景等；
• JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。

- [谈谈你对原型链的理解？  ][]

1. 原型链：一个对象，通过__proto__或者prototype可以找到它的原型对象，原型对象继续向上查找原型对象，一直到Object对象为至，这样的递归查找过程就是原型链(继承链)。

- [如何判断是否是数组？ ][]

3种判断方法：1、使用“Array.isArray (数组对象)”语句来判断，如果是数组则返回true。

1. 使用“数组对象.constructor===Array”语句来判断。
2. 使用“数组对象 instanceof Array”语句来判断。
3. 通过Object.prototype.toString.call()判断。

- [ES6模块与CommonJS模块有什么区别？ ][]

1. CommonJS 是同步加载模块，ES6是异步加载模块

1）CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。由于Node.js主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以CommonJS规范比较适用。

2）浏览器加载 ES6 模块是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本

1. CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

1）CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值

2）ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。

换句话说，ES6 的import有点像 Unix 系统的“符号连接”，原始值变了，import加载的值也会跟着变。因此，ES6 模块是动态引用，ES6 模块不会缓存运行结果，而是动态地去被加载的模块取值，并且变量总是绑定其所在的模块。

1. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

1）因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。

2）而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

- [聊⼀聊如何在JavaScript中实现不可变对象？ ][]

1. Object.preventExtensions()防止扩展

此方法可防止向现有对象添加新的属性，preventExtensions()是不可逆的操作，我们永远不能再向对象添加额外的属性。

1. Object.seal()密封

它可以防止添加或删除属性，seal()还可以防止修改属性描述符。

1. Object.freeze()冻结

它的作用与Object.seal()相同，而且它使属性不可写。

- [JavaScript的参数是按照什么⽅式传递的？ ][]

1. 基本类型传递方式
2. 复杂类型按引用传递
3. 按共享传递

- [js有哪些类型? ][]

1. 基本数据类型：number  string  boolean  undefined  null  
2. 引用数据类型：对象  数组  sembol

- [为什么会有BigInt的提案？ ][]

1.JavaScript中Number.MAX_SAFE_INTEGER表示最⼤安全数字,计算结果9007199254740991，即在这个数范围内不会出现精度丢失（⼩数除外）。

但是⼀旦超过这个范围，js就会出现计算不准确的情况，这在⼤数计算的时候不得不依靠⼀些第三⽅库进⾏解决，因此官⽅提出了BigInt来解决此问题

- [null与undefined的区别是什么？ ][]

1.首先是数据类型不一样 用typeof进行判断，null的数据类型是object，undefined的数据类型是undefined。

2.转为数值时，值不一样，undefined转为数值NaN，无法参与计算，null转为数值0，可以参与计算。

3. null属于Object类型，表示原型链的终点undefined则是一个单独的类型，这个类型只有一个值就是undefined

4. null代表"空"，代表空指针；undefined是定义了没有赋值

- [0.1+0.2为什么不等于0.3？ ][]

1. 0.1+0.2 不等于 0.3 ，因为在 0.1+0.2 的计算过程中发生了两次精度丢失。 第一次是在 0.1 和 0.2 转成双精度二进制浮点数时，由于二进制浮点数的小数位只能存储52位，导致小数点后第53位的数要进行为1则进1为0则舍去的操作，从而造成一次精度丢失。第二次在 0.1 和 0.2 转成二进制浮点数后，二进制浮点数相加的过程中，小数位相加导致小数位多出了一位，又要让第53位的数进行为1则进1为0则舍去的操作，又造成一次精度丢失。最终导致 0.1+0.2 不等于0.3 。

- [类型转换的规则有哪些？ ][]

 JS类型转换规则总结_huyao_road的博客-CSDN博客_js中类型转换的规则

1.范围小的类型向范围大的类型提升， byte、short、char 运算时直接提升为 int

byte、short、char ‐‐> int ‐‐> long ‐‐> float ‐‐> double

2.将 取值范围大的类型 强制转换成 取值范围小的类型

比较而言，自动 转换时Java自动执行的，而强制转换需要我们自己手动执行

- [类型转换的原理是什么？ ][]

### js机制

- [解释下变量提升？ ][]

1. 在预编译阶段的操作,获取所有声明的变量提升到最上面赋值为undefined

- [⼀段JavaScript代码是如何执⾏的？ ][]

JavaScript 的执行机制：先编译，再执行

1、JavaScript代码是先编译再执行的。

2、执行是按顺序一段一段执行的，一段代码是指一个执行上下文。

3、执行上下文有三种情况：

全局执行上下文

函数执行上下文

eval执行上下文

4、let和const支持块级作用域

JavaScript 代码的执行流程_微生阳的博客-CSDN博客_js 执行

- [JavaScript的作⽤域链理解吗？ ][]

1. 当代码在一个环境中执行时，会创建一个变量对象的作用域链来保证对执行环境有权访问的变量和函数的有序访问。
2. (注意：作用域链的变量只能向上访问，不允许向下访问)

- [谈⼀谈你对this的了解？ ][]

1. 什么是this 每个函数在被调用时都会创建一个执行上下文，这个上下文包含了变量环境、this、作用域链等，this就是执行上下文中的一个属性，他是在函数运行时进行绑定的，this的绑定和函数的声明位置没有关系，它取决于函数的调用方式。
2. this的绑定规则

1. this的默认绑定：指向的是全局对象，但是这里要注意区分严格模式和非严格模式，非严格模式下默认绑定this指向的是全局对象，而在严格模式下，默认绑定this指向的是undefined。
2. 隐式调用：就是函数作为对象的方法被调用，此时this会指向这个对象。但是对于隐式绑定存在一种特殊性等情况就是隐式丢失，就是说隐式绑定的函数会丢失掉绑定的对象而变成默认绑定。
3. 显示绑定：就是将某个对象直接绑定到this上，此时这个this就指向这个对象，一般我们通过call/apply/bind来实现显示绑定。我们通过call方法直接把obj绑定到函数fun的this上。
4. new绑定：使用new方法时函数会作为构造函数，最终返回一个新的对象，而这个函数中的this会直接指向这个新的对象。
5. 箭头函数：调用箭头函数时，不会隐式的传入this，而是从定义时的函数继承上下文，这个作用可以有效地帮我们解决DOM事件绑定出现的问题，因为给DOM绑定事件时this会指向绑定事件的元素，还有一点要注意，当箭头函数作为对象字面量的时候this是指向window。

- [箭头函数的this指向哪⾥？ ][]

1. 箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象)。
2. 箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。

-[普通函数中的this指向? ][]

1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj

2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (约定俗成)

3.在严格模式下,没有直接调用者的函数中的this是 undefined

4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象

- [理解闭包吗？ ][]

1. 闭包是指可以访问另一个函数作用域变量的函数，一般是定义在外层函数中的内层函数。即重用一个变量，又保护变量不被污染的一种机制。
2. 闭包有三个特性：

1）函数嵌套函数

2）函数内部可以引用外部的参数和变量

3）参数和变量不会被垃圾回收机制回收

3. 闭包的优点是：

1）变量被保存起来没有被销毁，随时可以被调用

2）只有函数内部的子函数才能读取局部变量,可以避免全局污染

4. 缺点是：如果闭包使用不当，就会导致变量不会被垃圾回收机制回收，造成内存泄露

### js内存

- [讲讲JavaScript垃圾回收是怎么做的？][]

1. JS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。
2. （1）.标记清除法：当变量进入到内存当中会加入一个标记，当脱离内存之后也会添加一个标记。隔段时间后垃圾回收机制会扫一下内存空间，有需要清除的变量会把他清掉
3. （2）.引用计数法：是跟踪记录每个值被引用的次数，引用计数，我们使用计数器在每个对象被新建，引用，删除引用的时候更新计数，如果计数器的值为0则直接删除，这种方法的优点很明显，暂停时间短。

- [JavaScript的基本类型和复杂类型是储存在哪⾥的？][]

1.基本类型是存储在栈中的，但是一旦被闭包引用则成为常驻内存，会存在内存中。

2.复杂类型会存储在内存堆中。

### js异步

- [async/await 是什么？][]

1. Async是一个语法糖，返回的是一个promise实例对象
2. Await 必须在async中使用才有效，必须跟promise实例对象，获取await后的promise实例对象的 [[promiseResult]] 的赋值。

- [async/await 相⽐于Promise的优势？][]

1. 它做到了真正的串行的同步写法，代码阅读相对容易
2. 对于条件语句和其他流程语句比较友好，可以直接写到判断条件里面
3. 同样的，处理复杂流程时，在代码清晰度方面有优势

## dom

- [DOM的事件模型是什么？][]

1. DOM事件模型主要包含4个方面的内容，分别是： 事件流 主流浏览器的事件模型 事件对象 注册与移除事件监听器

- [DOM的事件流是什么？][]

1. DOM (文档对象模型)结构是一个树型结构，当一个 HTML元素 产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。

- [什么是事件委托][]? 

1.子元素会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

                                                                                           （只是简单的总结，仅供大家参考哦~）