CSS与javaScript面试宝典
CSS盒子居中的4种方法
1、利用css的position属性，子绝父相，子元素相对父元素top、left值都设置为50%，再利用margin-top和margin-left设置为子元素高度和宽度的一半
2、子元素相对父元素的top、bottom、left、right都设置为0，margin：auto
3、父元素设为弹性布局：display:flex;
justify-content:center;
align-items:center
4、子元素相对父元素的top、left都设为50%, transform:translate(-50%,-50%)
文字溢出隐藏
white-space：nowrap ：强制让文本在一行显示
overflow：hidden：隐藏溢出部分
text-overflow：ellipsis： 设置省略号替代溢出
get和post请求的区别
get 一般用于获取数据
特点:
1.会将传递的参数在URL地址栏中拼接传递
2. get传递数据不安全
3. 传输的数据量比较小 最大不会超过4K
哪些方式是使用的get来发送的请求
- url中的请求
- link标签的href a标签的href也是get请求
- script标签的src img标签的src也是get请求
- 使用ajax异步发请求的时候,默认的请求方式
post 一般用于向后台传输数据
post请求的特点:
- 不在url中拼接参数
- 通过请求体传递数据
- 更安全一些，其它人不能轻易的看到数据
- 传输的数据量理论来讲没有大小限制
哪些是post请求的方式 - 传输数据的时候,设置的请求method=‘post’
- 文件的上传
cookie 和session 的区别
1.cookie存在于客户端，不太安全。session数据存在于服务器端，相对安全
2.cookie存储的数据类型只能是字符串，而session无限制
3.cookie中存储的数据有容量限制（约4K），而session文件没大小限制
4.默认的有效路径是当前路径，session的默认有效路径是整站
cookie的优点
1.通过良好的编程，控制保存在cookie中的session对象的大小。
2.通过加密和安全传输技术，减少cookie被破解的可能性。
3.只有在cookie中存放不敏感的数据，即使被盗取也不会有很大的损失。
4.控制cookie的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就 是一个过期的cookie。
cookie的缺点
1.cookie的长度和数量的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB。否则会被截掉。
2.安全性问题。如果cookie被人拦掉了，那个人就可以获取到所有session信息。加密的话也不起什么作用。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。若吧计数器保存在客户端，则起不到什么作用。
一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么
- 当我们在浏览器里输入域名的时候，其实最终是访问的域名对应的IP 地址
- 通过ip地址再找到对应的服务器
- 进而找到服务器下面的那个项目的默认文件页面
- 服务器将访问到的默认页面返回给浏览器
- 页面在浏览器中呈现出来
常见的浏览器兼容问题
1、不加样式控制的情况下，标签各自的margin 和padding差异较大。
解决方法：*{margin:0;padding:0;}
2、块属性标签float后，有横行的margin情况下，在ie6显示margin比设置的大
解决方法：在float的标签样式控制中加入 display:inline;将其转化为行内属性
3、图片默认有间距
解决方法：将图片显示方式设置为display：block
你在开发团队中扮演什么样的角色
执行者
在我看来有任务，然后第一时间去做完这就是你最喜欢的团队角色。简简单单的做自己应当做的事，这就是最好的
前端开发中遇到过哪些印象深刻的坑？
vue中的文件上传
el-upload组件内封装了ajax，它不会被axios拦截到，相应的token也不会被塞进请求头
1、设置headers属性
2、请求头必须设置为Authorization=token
三大主流框架的特点
vue：1.轻量级的框架
2.双向数据绑定
3.组件化开发
4.官方文档很清晰，相对容易上手
谈谈怎么开始一个项目流程
确定技术选型
打个比方说当前需要做一个后台管理系统，需要用到vue
axios、elementUI、webpack等等。
规划项目目录
接着就要往项目增加第三方库依赖，拷贝 CSS库JS库 进相应目录
然后，进行编码，单元测试
编码完成，进行语法检查，文件合并和压缩
箭头函数与普通函数的区别
箭头函数中的this默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象
普通函数中的this代表它的直接调用者
Ajax的工作机制
Ajax工作原理是提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应的
对作用域的理解
简单的说,作用域就是变量与函数的可访问范围
全局作用域,在代码中任何地方都能访问到的对象拥有全局作用域,例如:最外层函数和在最外层函数外面定义的变量,所有末定义直接赋值的变量,所有 window 对象的属性
局部作用域,在函数内部定义的变量.
原型链
由多个__proto__组成的一个链式关系叫做原型链
原型的方法可以被实例调用，原型的原型的方法也可以被实例调用
作用在于：代码可以重复调用
更改this指向的方法
call（）
apply（）
bind（）
图片懒加载
对于一个有多个图片的网站来说，访问的时候不应该直接加载所有图片，而是应该只讲浏览器窗口内的图片进行加载。当滚动的时候，在加载更多的图片。叫做图片的懒加载。
将页面里所有img属性src属性用data-src代替，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-src的值赋给src。
px rem em rpx之间的关系
px实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是px不支持用户进行浏览器缩放或者不同移动端的兼容，因为像素是固定的，屏幕大小是变化的
em准确的说是相对于父节点的字号来计算的，如果自身定义了字号那么就相对自身字号来计算，在根节点上重定义基准字号 html {font-size:62.5%} ，此时页面基准字号就是 16px * 62.5% = 10px , 那么此时 1em = 10px
rem是根据根元素html的font-size来对应大小，1rem = 100px,可以在根元素html中写固定像素也可以写百分比，然后在具体的标签上设置rem
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx
移动端实现页面适配的方案
1.rem + 媒体查询实现
设计稿的宽度（已知） / 要适配的屏幕的宽度（已知） = 基础值（已知） / 要设置的fontsize
2.js
fontsize字体大小=基础值*要适配的屏幕宽度/设计稿宽度
三元表达式
判断逻辑？表达式1：表达式2
短路运算
&& 找假 第一个值为true，直接返回第二个值
|| 找真
JS的预解析
js文件在被加载的时候，会先扫描一遍所有的js代码，将我们函数的声明和变量的声明提到js文件的最前面
正则表达式
数据类型：founsb :function object underfind number string boolean
call和apply的区别
作用都是改变this的指向，接受参数的方式不同
事件冒泡
概念：当一个元素上的事件被触发的时候，同样的事件会在该元素所有的祖先元素中被触发，这个过程称之为冒泡
阻止冒泡：e.preventDefault ( )
localStorage、sessionStorage、Cookie的区别及用法
localStorage
localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清楚localstorage信息，否则这些信息将永远存在，存放数据大小一般为5M，不参与和服务器的通信
sessionStorage
sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
Cookie
生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
es6新语法
let、const 定义变量、常量
let:
1 不存在变量作用域提升，这样可以避免了我们还没声明变量就拿变量来用
2 同一作用域的同一个变量不能够重复声明，避免我们重复声明变量
3 let声明的变量不会到全局上
4 let和代码块{}结合使用会形成块级作用域
const声明的变量不得改变值
解构赋值(展开运算符)
// 数组的拼接
let a = [0,1,2]
let b = [3,4,5]
let c = a.concat(b)
console.log© // [0,1,2,3,4,5]
let d = […a,…b]
console.log(d) // [0,1,2,3,4,5]
// 现在我们用扩展运算符看看
let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = […arr1,…arr2]
console.log(arr3) // [ 1, 2, 3, 4, 5, 6 ]
Set 数组去重
let set = new Set([1,2,3,4,3,2,1])
console.log(set) // Set { 1, 2, 3, 4 }
箭头函数中的this和普通函数中的this对比
普通函数下的this:
在普通函数中的this总是代表它的直接调用者，在默认情况下，this指的是window，
在严格模式下,没有直接调用者的函数中的this是 undefined使用
call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象
箭头函数中的this:
箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),
而不是执行时的对象, 定义它的时候,可能环境是window,也有可能是其他的。
CSS3新特性
伪类选择器（last-child）、伪元素选择器、阴影、边框圆角、渐变、变换、过渡、动画、伸缩布局、音频标签视频标签、本地存储
本地存储与cookie的区别
时效性和安全性
扫一扫
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
