HTML+CSS面试题

1、h5的新特性

1、拖拽释放API

2、自定义属性data-id

3、语义化更好的内容标签（header、nav、footer、aside、article、section）

4、音频、视频标签（audio、video）

5、画布Canvas

6、地理API

7、本地离线存储 localStorage 用于长久保存整个网站的数据，直到手动删除

8、sessionStorage 该数据对象临时保存同一窗口，在关闭窗口后数据会被删除

9、表单控件（data、time、file...）

10、新的技术（webworker、websocket、Geolocation）

2、C3的新特性

1、颜色：新增RGBA，HSLA模式

2、文字阴影（text-shadow）

3、边框：圆角（border-radius）边框阴影（box-shadow）

4、盒子模型：box-sizing

5、背景：background-size、background-origin、background-clip

6、渐变：linear-gradient、radial-gradient

7、过渡：transition 可实现属性的渐变

8、自定义动画 animate @keyfrom

9、媒体查询多栏布局

10、border-image 图片边框

11、2D转换/3D转换：transform：translate（x,y）

12、字体图标 iconfont/icomoon

13、弹性布局 flex

3、CSS的盒模型

W3C标准盒模型：box-sizing：content-box；

宽（240px）=content(200px)+padding(10px)+border(10px)+margin

怪异盒模型：box-sizing：border-box；

宽（200px）=content(160px)+padding(10px)+border(10px)+margin

4、CSS中选择器的优先级以及CSS权重如何计算？

！Important>行内样式>ID选择器>类选择器>标签选择器>通配符>继承>浏览器默认属性

继承或者通配符为0 元素选择器为1 类选择器、伪类选择器为10 ID选择器为100 行内样式为1000 !Important 无穷大

5、CSS中px、em、rem、百分比、vw的区别？

px是绝对单位，相对于显示屏屏幕分辨率而言的，是一个虚拟长度单位。

em是相对长度单位，相对于当前对象内文本的字体尺寸。如果当前对行内文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。

rem是CSS新增的一个相对单位，使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

百分比也是一个相对单位，相对于父级元素。

vw也是相对单位，相对于浏览器窗口，它会随着浏览器窗口的变化而变化。

6、position的值有哪些,分别有哪些作用？

静态定位：static 默认值不脱离文档流。

绝对定位：absolute 元素会脱离文档流。参照物为上一级带有定位的的父级元素，如果没有，则相对于浏览器窗口进行定位。

相对定位：relative 不会脱离文档流。参照物为元素偏移前的位置。

固定定位：fixed 会脱离文档流。参照物为浏览器窗口。

7、display：none与visibility：hidden的区别？

display：none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失

visibility：hidden 设置该属性后，元素虽然消失了，但依然占据空间的位置。

1、visibility 具有继承性，其子元素也会继承该属性；

2、visibility 不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行；

3、在CSS的 transition中支持visibility属性，但是不支持display。

4、display：none会引起回流和重绘；visibility：hidden会引起重绘。

8、BFC是什么？

BFC直译为“块级格式上下文”。它是一个独立的渲染区域，他规定了内部box如何布局，并且与这个区域外部毫不相干。

JS面试题

1、基本数据类型和引用数据类型的区别？

基本数据类型:string,number,null,Boolean,undefined,symbol

引用数据类型: Object,Array,Function

区别:基本数据类型保存在栈里面,可以直接访问他的值,引用数据类型保存在堆里面,栈里面保存的是地址,通过栈里面的地址去访问堆里面的值

2、== 和 ===区别？

== 是等值符，两个对象只要值相同就为true。

=== 是等同符，不仅要判断两个对象的值相同，也要判断类型是否相同。

3、 typeof 与 instanceof 区别

typeof 一般是用来判断变量是否存在,返回他的类型,其中基本数据类型 null 返回的是一个 object,但 null 不属于引用数据类型,typeof 除了判断 function 函数会识别,其他的引用类型输出为 object

instanceof 一般是用来判断引用数据类型,但不能正确判断基本数据类型,根据在原型链中查找判断当前数据的原型对象是否存在返回布尔类型

4、深拷贝浅拷贝的区别？

浅拷贝:拷贝基本数据类型为他的值,拷贝引用数据类型为地址,生成新的数据,修改新的数据会影响原数据,实际开发常用的方法有:object.assgin,扩展运算符等等

深拷贝:在内存中开辟一个新的栈空间保存新的数据,修改新数据不会影响到原数据

5、说说你对作用域链的理解

作用域一般可以理解为函数或变量的生效范围,我们一般把作用域分成全局作用域,函数(局部)作用域,块级作用域(es6 推出),列如我们在 a 函数中定义了一个变量,那么当我们在 js 中访问这个变量他就会在当前作用域进行查找,如果访问不到,他会一层一层向外进行查找,整个逐级向上查找的过程我们称为作用域链.

6、JavaScript 原型，原型链 ? 有什么特点？

原型是我们创建函数的时候，系统帮我们自动生成的一个对象。主要作用是解决构造函数内部方法内存资源浪费问题。在开发中我们一般把实例对象一些通用的方法放入原型中，在 vue 里面有时候也会给 vue 的原型添加一些公共类方法来实现所有的组件中可以共享成员。像一些常见的 $router和$ store 都是挂载到 vue 的原型上的。
原型链是 js 对象一种查找机制，遵循就近原则。当我们访问一个对象中的成员的时候，会优先访问自己的，如果自己没有就访问原型的，如果原型也没有就会访问原型的原型，直到原型链的终点 null. 如果还没有，此时属性就会获取 undefined，方法就会报错 xxx is not a function。一般原型链主要是用来实现面向对象继承的。

Vue面试题

1、计算属性和侦听器的区别？

区别: watch 侦听某一数据的变化从而会触发函数,当数据为对象类型时,对象中的属性值变化时需要使用深度侦听 deep 属性,也可在页面第一次加载时使用立即侦听 immdiate 属性 computed 计算属性是触发函数内部任一依赖项的变化都会重新执行该函数,计算属性有缓存,多次重复使用计算属性时会从缓存中获取返回值,计算属性必须要有 return 关键词

小程序面试题

1、小程序的生命周期有哪些？

应用的生命周期

小程序的生命周期函数是在app.js里面调用的，通过App(Object)函数用来注册一个小程序，指定其小程序的生命周期回调

页面的生命周期

页面生命周期函数就是当你每进入/切换到一个新的页面的时候，就会调用的生命周期函数，同样通过App(Object)函数用来注册一个页面

组件的生命周期

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发，通过Component(Object)进行注册组件

网络相关

1.跨域如何解决？

跨域，是指浏览器不能执行其它网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 javascript 实施的安全限制。

同源策略是浏览器最核心也最基本的安全功能，具有以下特点：

协议相同
主机相同
端口相同

只要其中一项不相同，就会产生跨域

常见的解决方案有 3 种：

JSONP: 利用 script 标签，不受跨域限制的特点，缺点是只能支持 get 请求

CORS: 后端设置响应头 Access-Control-Allow-Origin：*

服务器代理：在 DevServer 中配置 proxy

2、常见的状态码有哪些？

200 OK 表示从客户端发来的请求在服务器端被正确处理

301 Moved Permanently 永久性重定向，表示资源已被分配了新的 URL

400 Bad Request 请求报⽂存在语法错误（传参格式不正确）

401 UnAuthorized 权限认证未通过(没有权限)

403 Forbidden 表示对请求资源的访问被服务器拒绝

404 Not Found 表示在服务器上没有找到请求的资源

500 Internal Sever Error 表示服务器端在执⾏请求时发⽣了错误

3、说说地址栏输入 URL 敲下回车后发生了什么?

例如当我们在 web 浏览器的地址栏中输入：www.baidu.com，具体发生了：

对www.baidu.com这个网址进行DNS域名解析，得到对应的IP地址
根据这个 IP，找到对应的服务器，发起 TCP 的三次握手
建立 TCP 连接后, 发起 HTTP 请求
服务器响应 HTTP 请求，浏览器得到 html 代码
浏览器解析 html 代码，并请求 html 代码中的资源（如 js、css、图片等）（先得到 html 代码，才能去找这些资源）
服务器响应对应的资源
响应数据完毕, 四次挥手，关闭 TCP 连接
浏览器对页面进行渲染呈现给用户

面试题总结