1. 常见浏览器兼容性问题与解决方案？
默认样式存在差异，CSS里 *{margin:0;padding:0;}
参考链接
2. 列出display的值并说明他们的作用？
none：取消样式
block：块级元素
inline：行内元素
inline-block：行内块元素
normal：默认样式
flex：弹性布局
3. 如何居中div, 如何居中一个浮动元素?
居中div
最简单：margin:0 auto
垂直水平均居中：采用flex布局
居中浮动元素
position: absolute;
float: left;
margin: 0 50%;
transform: translateX(-50%);
4. CSS中 link 和@import 的区别是？
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
5. 请列举几种清除浮动的方法(至少两种)?
父级div定义 height
结尾处加空div标签 clear:both
父级div定义 overflow:hidden
父级div定义 overflow:auto
6. block，inline和inlinke-block细节对比？
block自动填满一行元素 其宽度为父元素百分百。
inline元素不设置宽度则为本身宽度。
inline_block元素既有块级元素的属性同时也不会直接占满一行
7. 什么叫优雅降级和渐进增强？
优雅降级： Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
渐进增强： 从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
8. 说说浮动元素会引起的问题和你的解决办法
父元素的高度不会被撑开
浮动元素后面会紧跟其他元素，影响布局
解决方法
清楚浮动
设置overflow为hidden或者auto
额外标签法，<div style="clear:both;"></div>
9. 你有哪些性能优化的方法？
Vue 路由变成动态加载
减少HTTP请求次数
使用CDN
瀑布流，可视页面再加载
10. 为什么要初始化CSS样式？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
*最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）
11. 解释下浮动和它的工作原理？清除浮动的技巧？
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
(1)、使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
(2)、使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
(3)、使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
12. 谈谈你对CSS中刻度的认识？
相对长度单位有： em, ex, ch, rem, vw, vh, vmax, vmin
绝对长度单位有： cm, mm, q, in, pt, pc, px
13. 请你说说em与rem的区别？
rem（font size of the root element）
相对于根元素(即html元素)font-size计算值的倍数
只相对于根元素的大小
em（font size of the element）是指相对于父元素的字体大小的单位。它与rem之间其实很相似，区别在。（相对是的HTML元素的字体大，默认16px）
14. 请你说说box-sizing属性的的用法？
content-box:默认值。border和padding不计入width之内，参考标准W3C盒子模型。
border-box:border和padding计入width之内，怪异模式。
inherit:继承父元素box-sizing属性的值。
padding-box:padding计入width之内，参考IE盒子模型。（ps：貌似几乎所有主流浏览器都不支持这个属性值）
参考链接
15. 浏览器标准模式和怪异模式之间的区别是什么？
所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。
16. 怪异Quirks模式是什么，它和标准Standards模式有什么区别？
盒模型： 在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
设置行内元素的高宽： 在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
设置百分比的高度： 在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。
17. 说说你对边距折叠的理解?
同号去绝对值的最大值，异号：取两者之和
18. 内联与块级标签有何区别？
Html中的标签默认主要分为两大类型，一类为块级元素，另一类是行内元素，许多人也把行内称为内联，所以叫内联元素，其实就是一个意思。为了很好的布局，必须理解它们间的区别。
18. 内联与块级标签有何区别？
Html中的标签默认主要分为两大类型，一类为块级元素，另一类是行内元素，许多人也把行内称为内联，所以叫内联元素。
行内元素不独占一行，设置宽度和高度无效，垂直方向上的margin，padding设置无效。
19. 说说隐藏元素的方式有哪些？
a、使用CSS的display:none，不会占有原来的位置
b、使用CSS的visibility:hidden，会占有原来的位置
c、使用HTML5中的新增属性hidden="hidden"，不会占有原来的位置
d、v-if v-hidden
20. 为什么重置浏览器默认样式，如何重置默浏览器认样式？
最简单的方法：｛padding：0；margin：0｝
21. 谈谈你对BFC与IFC的理解？(是什么，如何产生，作用)
BFC（Block Formatting Context）即块级格式化上下文。
IFC（Inline Formatting Context）即行内格式化上下文。
BFC块级格式化上下文由以下之一创建：
根元素或其它包含它的元素
浮动 (元素的 float 不是 none)
绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
非块级元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex
块级元素具有overflow ，且值不是 visible
22. 说说你对页面中使用定位(position)的理解？
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 吸顶
23. 如何解决多个元素重叠问题？
使用z-index属性可以设置元素的层叠顺序
24. 页面布局的方式有哪些？
flex布局
grid布局
瀑布流
响应式
25. overflow :hidden是否形成新的块级格式化上下文？
但凡一切使div脱离文档流的属性和值，都可以形成一个新的BFC，代价是浏览器会重新渲染dom结构。
26. 说一下http和https
http传输的数据都是未加密的，也就是明文的，网景公司设置了SSL协议来对http协议传输的数据进行加密处理，简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。
https的SSL加密是在传输层实现的。
27. tcp三次握手，一句话概括
TCP建立连接（3次握手）
-
客户端向服务器发送同步请求报文
-
服务器收到报文，发送同步确认报文
-
客户端收到报文，发送确认报文
TCP释放连接（4次挥手）
-
客户端发送释放连接请求报文
-
服务器收到报文，发送确认报文
-
服务器发送释放连接请求报文
-
客户端接收报文，发送确认报文
28. TCP和UDP的区别
TCP建立连接（3次握手）
（1）TCP是面向连接的，udp是无连接的即发送数据前不需要先建立链接。
（2）TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付。 并且因为tcp可靠，面向连接，不会丢失数据因此适合大数据量的交换。
（3）TCP是面向字节流，UDP面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如IP电话和视频会议等）。
（4）TCP只能是1对1的，UDP支持1对1,1对多。
（5）TCP的首部较大为20字节，而UDP只有8字节。
（6）TCP是面向连接的可靠性传输，而UDP是不可靠的。
28. WebSocket的实现和应用
webSocket是HTML5的一种新协议，先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接，服务器与客户端通过此TCP连接进行实时通信，实现了服务器与客户端的双向通信。
应用场景：需要提供多个用户相互交流或者实时的展示服务器端需要经常变动的数据，如社交类应用，在线教育等。
29. HTTP请求的方式，HEAD方式
HEAD 方式得到的信息和GET方式的响应头部信息一致。
HEAD 方式用来提前获知请求文件的大小，请求的文件是否可以访问，文件最后修改的时间。
使用方法和GET 方式一致
30. 一个图片url访问后直接下载怎样实现？
设置response header中的disposition-type为attachment
html5中download属性