1.垂直上下居中的方法
首先有两种方式：已知居中元素的宽高、未知居中元素的宽高
实现方式：
方法1【未知居中元素宽高】：利用定位+margin:auto
方法2【已知居中元素宽高】：利用定位+margin:负值
方法3【未知居中元素宽高】：利用定位+transform
方法4【已知居中元素宽高】：table布局
方法5【未知居中元素宽高】：flex布局
方法6【未知居中元素宽高】：grid布局
1、利用定位+margin:auto：父级设置相对定位，子级绝对定位
，top,left,right,bottom的值都设置为0，使用margin:auto;就居中了
2、利用定位+margin:负值：绝大多数情况下，设置父元素相对定位，
子元素绝对定位，且top，left设置为50%，最后给margin-left和margin-top设置为-50px
3、利用定位+transform：与定位+margin负值的方法相同，只是将子元素的margin-left和margin-top的负值换成了transform:translate(-50%,-50%);
4、table布局：设置父元素为display:table-cell，子元素设置 display:
inline-block。利用vertical和text-align可以让行内块级元素水平垂直居中
5、flex弹性布局：给父级设置display:flex;，再用justify-content:center;垂直居中 和
align-items: center;水平居中
6、grid网格布局：与flex的方法一样，只是将display：flex；换成了display：grid；
元素不定宽高还可以垂直水平居中的方法：
1、利用定位+margin:auto 2、利用定位+transform 3、flex布局 4、grid布局
具体参考：垂直上下居中方法
2.响应式布局原理
响应式网站设计是一种网页设计布局，页面的设计与开发应当根据用户行为以及设备环境进行相应的响应和调整
响应式设计特点：
1、同时适配PC + 平板 + 手机等
2、网站的布局会根据视口来调整模块的大小和位置
3、标签导航在接近手持终端设备时改变为经典的抽屉式导航
基本原理：响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理
实现响应式布局的方式：
1、媒体查询(根据获取到的不同的媒体宽度去定义不同的页面样式)
2、百分比(当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化)
3、vw/vh(1vw都等于视图宽度的百分之一,与百分比布局类似)
4、rem(rem是相对于根元素html的font-size属性,字体大小默认为16px,1rem也默认为16px)
优点：1、面对不同分辨率设备灵活性强 2、能够快捷解决多设备显示适应问题
缺点：1、兼容各种设备工作量大，效率低下 2、代码累赘，加载时间加长
3.清除浮动的方法
方法1：【额外标签的添加】
方法2：【给父元素添加overflow:hidden】
方法3：【使用after伪元素清除浮动】
方法4：【使用before和after双伪元素清除浮动】
方法5：【为父元素设置高度】
具体：清除浮动的方法
4.CSS预处理器的比较less sass
第一点：编译环境不同
sass的安装环境需要Ruby环境，是服务端处理
less是需要引入less.js来处理less代码输出css到浏览器
一般在项目中使用yarn add less yarn add less-loader
第二点：变量
less、scss的变量符不一样，less是@ scss是$ css变量是两根连词线
变量作用域不同
第三点：输出不同
less没有输出设置
scss提供四种输出选项，默认是nested
nested嵌套缩进css代码
expanded展开多行css代码
compact简洁格式的css代码
compressed压缩后的css代码
第四点：条件语句不通
less不支持条件语句，scss语句支持if{}else{} for{}循环
第五点：引入外部css
scss引入外部文件命名必须以_开头，less引用外部文件和css中的@import没什么差异
总结：
sass/scss或是less，都可以看作为一种基于css之上的高级语言，其目的是使得css开发更灵活和更强大，sass的功能比less强大,基本可以说是一种真正的编程语言了，less则相对清晰明了,易于上手,对编译环境要求比较宽松，在实际开发中更倾向于选择less。但如果认真深入scss之后还是建议切换到scss，因为更加强大，更好用。
5.伪元素和伪类的区别
伪类是一个以冒号作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前添加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际不在文档树中
区别：
伪类表示被选择元素的某种状态，例如:hover
分别有link、visited、hover、active和focus，分别表示正常状态下的链接、点击后、悬停时、被激活时和聚焦时
伪元素通过对元素的操作进行对元素的改变
before、after、first-letter、first-line ，分别表示元素内容的前面、元素内容的后面以及第一个文字和第一行文字
包括selection和placeholder，分别表示被选中部分以及占位的文本
6.哪些操作会引起页面回流（Reflow）
回流：当元素的属性发生改变，但是影响布局的时候，比如说改变它的宽度，高度内外边距等就会产生回流，就相当于是刷新页面这么一个操作
① 改变窗口大小
② font-size大小改变
③ 增加或者移除样式表
④ 内容变化（input中输入文字会导致）
⑤ 激活CSS伪类（:hover）
⑥ 操作class属性，新增或者减少
⑦ js操作dom
⑧ offset相关属性计算
⑨ 设置style的值
7.如何让Chrome浏览器显示小于12px的文字
为了兼容所有的浏览器，使用缩放方式使字体变小
p{font-size:10px;-webkit-transform:scale(0.8);}
8.http协议和tcp协议
TCP：【传输控制协议】，它是一种面向连接的、可靠的基于字节流的传输层通信协议，采用三次握手建立连接，四次挥手终止连接。TCP连接一旦建立，在通信双方中的任何一方主动关闭连接之前TCP连接都将被一直保持下去，服务器和客户端均可主动发起断开连接的请求
TCP三次握手：
第一次握手：客户端向服务端发送SYN包
第二次握手：服务器收到SYN包并向客户端发送ACK包
第三次握手：客户端收到SYN+ACK包，向服务端发送ACK包，完成三次握手
TCP四次挥手：
第一次挥手：客户端向服务端发送FIN包，关闭客户到服务器的数据传送
第二次挥手：服务器收到FIN包，向客户端发送ACK包
第三次挥手：服务端向客户端发送FIN包
第四次挥手：客户端收到FIN包，向客户端发送ACK包，完成四次挥手
HTTP：是互联网上应用最为广泛的一种网络协议，所有的www文件都必须遵守这个标准，http协议是建立在TCP协议之上的一种应用
HTTP连接最显著的特点是客户端发送的每次请求都需要服务器回送响应，在请求结束后，会主动释放连接，从建立连接的过程称为“一次连接”
9.刷新页面，js请求一般会有哪些地方有缓存处理
DNS缓存：短时间内多次访问某个网站，在限定时间内，不用多次访问DNS服务器。
CDN缓存：内容分发网络（人们可以在就近的代售点取火车票了，不用非得到火车站去排队）
浏览器缓存：浏览器在用户磁盘上，对最新请求过的文档进行了存储。
服务器缓存：将需要频繁访问的Web页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度。
10.如何对网站的文件和资源进行优化
1.文件合并（目的是减少http请求）：使用css sprites合并图片，一个网站经常使用小图标和小图片进行美化，但是很遗憾这些小图片占用了大量的HTTP请求，因此可以采用sprites的方式把所有的图片合并成一张图片 ，可以通过相关工具在线合并，也可以在ps中合并。
2.使用CDN（内容分发网络）加速，降低通信距离。
3.缓存的使用，添加Expire/Cache-Control头。
4.启用Gzip压缩文件。
5.将css放在页面最上面。
6.将script放在页面最下面。
7.避免在css中使用表达式。
8.将css, js都放在外部文件中。
9.减少DNS查询。
10.文件压缩：最小化css, js，减小文件体积。
11.避免重定向。
12.移除重复脚本。
13.配置实体标签ETag。
14.使用AJAX缓存，让网站内容分批加载，局部更新。
11.你对网页标准和W3C重要性的理解
网页标准和标准制定机构都是为了能让web发展的更健康，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种bug、安全问题，最终提高网站易用性。
12.Http和https的区别
Http:
HTTP超文本传输协议，互联网上一ing用最为广泛的一种传输协议，以明文方式发送信息，所以有不法分子截取了web浏览器和服务器之间的传输报文，就可以直接获得信息，因此http不安全
Https:
可以认为它是http的安全版，它是在Http的基础上加入了SSL协议，这一层协议加在了传输层和应用层之间，可以对通信数据进行加密并且可以验证身份使通信更加的安全（不是绝对的安全，是增加了不法分子的破坏成本）
连接方式不同：https端口是443，http的端口是80 http传输是明文，但是https是用SSL进行加密的密文，安全性更高
https需要申请CA证书【免费的较少，所以需要一定的费用】，但是http不需要的
http协议速度比https更快【因为http不需要复杂的SSL握手，但是https需要经过复杂的安全过程】
13.data-属性的作用
data-为H5新增的为前端开发者提供自定义的属性，
这些属性集可以通过对象的 dataset 属性获取，
不支持该属性的浏览器可以通过 getAttribute 方法获取 :
需要注意的是：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。
即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。
14.尽可能多的写出浏览器兼容性问题
1，不同浏览器的标签默认的margin和padding不同
解决办法：
body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }
2，块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
3，设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
4， 清除浮动：
解决方案：万能公式在float的父元素上使用
.abc:after {clear:both;content:‘.’;display:block;width: 0;height: 0;visibility:hidden;}
5，IE浮动边缘产生的双倍距离
#box { float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略 }
6，透明度
IE：filter：alpha（opacity = 10）; FF：不透明度：0.6; FF：-moz-opacity：0.10; 最好两个都写，并将透明度属性放在下面
7，最小高度最小高度的实现（兼容IE6，IE7，FF）
#mrjin { background:#ccc; min-height:100px; height:auto !important; height:100px; overflow:visible; }
8，.IE6下在使用margin:0 auto;无法使其居中**
解决办法：为其父容器设置text-align:center;
9，被点击过后的超链接不再具有hover和active属性
解决办法:按lvha的顺序书写css样
“:link”: a标签还未被访问的状态；
“:visited”: a标签已被访问过的状态；
“:hover”: 鼠标悬停在a标签上的状态；
“:active”: a标签被鼠标按着时的状态；
10, IE6下无法设置1px的行高**，原因是由其默认行高引起的
解决办法：为期设置**overflow:hidden;*或者*line-height:1px;
15.如何实现页面每次打开时清除本页缓存
1 .用HTML标签设置HTTP头信息
<HEAD> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="0"> </HEAD>
在需要打开的url后面增加一个随机的参数
url=test/test.jsp?ranparam=random()
16.什么是Virtual DOM,为何要用Virtual DOM
定义：
Virtual DOM 是 DOM 节点在 JavaScript 中的一种抽象数据结构，之所以需要虚拟DOM，是因为浏览器中操作DOM的代价比较昂贵，频繁操作DOM会产生性能问题。
作用：
虚拟DOM的作用是在每一次响应式数据发生变化引起页面重渲染时，Vue对比更新前后的虚拟DOM，匹配找出尽可能少的需要更新的真实DOM，从而达到提升性能的目的
为什么要使用虚拟dom
减少了JavaScript操作真实DOM的带来的性能消耗，保证了性能下限
真实DOM：生成HTML字符串 + 重建所有的DOM元素。 虚拟DOM：生成vNode + DOMDiff + 必要的DOM更新。
虚拟DOM的更新DOM的准备工作耗费更多的时间，也就是JS层面，相比于更多的DOM操作它的消费是极其便宜的。
eg:真实的DOM节点，哪怕一个最简单的
也包含着很多属性，其元素非常庞大，导致手动DOM操作缓慢，可能出现页面卡顿，影响用户体验。当你用传统的原生api或者jQuery去手动操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。如果你在一次操作中需要更新10个DOM节点，浏览器在收到第一个更新DOM请求后，并不知道后续还有9次更新操作，它会马上执行这次流程，最终执行10次。而通过VNode，同样更新10个DOM节点，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地的一个js对象中，最终将这个js对象一次性attach到DOM树上，避免大量的无谓计算。
实现了跨平台
虚拟DOM本质上是JavaScript对象，它可以很方便的跨平台操作，从而使它而不再局限于浏览器的DOM，也可以是Android和IOS的原生组件，也可以是近期很火热的小程序，也可以是各种GUI。
17.http的几种请求方法和区别
http请求中的8种请求方法
1、GET方法：发送一个请求来取得服务器上的某一资源
2、POST方法：向URL指定的资源提交数据或附加新的数据
3、PUT方法：跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有
4、HEAD方法：只请求页面的首部
5、DELETE方法：删除服务器上的某资源
6、OPTIONS方法：它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息
7、TRACE方法:TRACE方法被用于激发一个远程的，应用层的请求消息回路
8、CONNECT方法:把请求连接转换到透明的TCP/IP通道
18前端需要注意哪些SEO
1.合理使用title、description、keywords
title 值强调重点即可，不要重复出现
description概括页面高度，长度合适
keywords列举重要关键字
2.语义化HTML代码（占比很重要）
符合W3C规范，语义化代码可以让搜索引擎更容易理解网页
3.重要内容的HTML代码放在前面
搜索引擎抓取顺序是从上到下，保证搜索引擎优先抓取
4.重要内容不使用JS输出
爬虫不会执行JS去获取内容
5.少用iframe
搜索引擎不会抓取iframe中的内容
6.非装饰性图片必须加alt（可见题四）
7.提高网站速度
网站速度也是搜索引擎排序的一个重要指标
19.的title和alt有什么区别
alt是当图片无法显示的时候，对当前对象起描述作用（对SEO优化有一定帮助）
title是图片标题，当鼠标移入停滞时展示描述信息
