1. 垂直水平居中的方式？
/* 方式一： 定位
父元素设置为： position: relative;
子元素设置为： position: absolute;
距上50%，距左50%，然后减去元素自身宽度的距离 */
.box-s {
100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
/* 方式二： flex布局 */
.box-p {
display: flex;
justify-content: center;
align-items: center;
}
/* 方式三： table-cell (不推荐) */
.box-p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
2. 实现一个三栏布局，中间板块自适应方法有哪些？
<!-- 方式一：浮动和定位 -->
.left {
float: left;
100px height: 200px
}
.right {
float: right;
100px;
height: 100px;
}
.center {
margin: 0 100px 0 200px;
}
<div class="content">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
3. margin坍塌？
描述：当两个盒子在垂直方向上设置margin值时，会出现塌陷现象。
解决方法：https://www.cnblogs.com/hugejinfan/p/5901320.html
1）垂直并列（少见）
垂直之间塌陷的原则是以两盒子的最大外边距为准。
2）嵌套关系（常见）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>margin坍塌</title>
<style>
.box1 {
400px;
height: 400px;
background: pink;
/* 1. 给父盒子添加border
border: 1px solid red; */
/* 2. 给父盒子添加padding-top
padding-top: 10px; */
/* 3. 给父盒子添加overflow: hidden => 形成BFC块
overflow: hidden; */
/* 4. 给父盒子添加position：fixed => 形成BFC块
position: fixed; */
/* 5. 父盒子display: table => 形成BFC块
display: table; */
}
.box2 {
200px;
height: 200px;
background: lightblue;
margin-top: 10px;
}
/* 6. 给子元素的前面添加一个兄弟元素 */
.box3 {
content: "";
overflow: hidden;
}
</style>
</head>
<body>
<div class="box1">
<div class="box3"></div>
<div class="box2"></div>
</div>
</body>
</html>
4. 说说BFC原理？
1）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
2）因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不会影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。
3）同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。
4） 避免margin重叠也是这样的一个道理。
5. 为什么要清除浮动？举个实际场景？
1）原因：父元素的高度是由子元素撑开的，且子元素设置了浮动，父元素没有设置浮动，子元素脱离了标准的文档流，那么父元素的高度会将其子元素的高度忽略；如果不清除浮动，父元素会出现高度不够的情形，那样如果设置了border或者background都得不到正确的解析（场景）。
2）清除浮动的办法：
.clearfix::after,
.clearfix::before {
content: "";
display: table;
clear: both:
}
6. 你能描述一下渐进增强和优雅降级之间的不同吗？
1）定义：
优雅降级（graceful degradation）: 一开始就构建站点的完整功能，然后针对浏览器测试和修复。
渐进增强（progressive enhancement）: 一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。
优雅降级和渐进增强都关注于同一网站，在不同设备不同浏览器下的表现程度。
2）区别：
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE Mozilla 等）的前一个版本。
“渐进增强”观点则认为应关注于内容本身。
3）总结
“优化降级”就是首先完整的实现整个网站，包括其中的功能和效果。然后再为那些无法支持所有功能的浏览器增加候选方案，使之在旧式浏览器上以某种降级体验却不至于完全失效。
“渐进增强”则是从浏览器支持的基本功能开始，首先为所有设备准备好清晰且语义化的html及完整内容，然后再以五侵入的方法向页面增加无害于基础浏览器的额外样式和功能。当浏览器升级时，它们会自动呈现并发挥作用。
7. 请说说浏览器内核的组成？
1）用户界面（UI）
包括菜单栏、工具栏、地址栏、后退/前进按钮、书签目录等，也就是能看到的除了显示页面的主窗口之外的部分。
2）浏览器引擎（Rendering engine）
也称为浏览器内核、渲染引擎，主要负责取得页面内容、整理信息（应用CSS）、计算页面的显示方式，然后会输出到显示器或者打印机。
3）JS解释器
也可以称为JS内核，主要负责处理javascript脚本程序，一般都会附带在浏览器之中，例如chrome的V8引擎。
4）网络部分
主要用于网络调用，例如：HTTP请求
其接口与平台无关，并未所有的平台提供底层实现。
5）UI后端
用于绘制基本的窗口部件，比如组合框和窗口等。
6）数据存储
保存类似于cookie、storage等数据部分，HTML5新增了web database（WEB SQL）技术 ，一种完整的轻量级客户端存储技术。
7）主要浏览器有：
IE（Trident）、Firefox（Mozilla）、Safari（webkit）、Chrome（Blink，webkit的分支）、Opera（原为Presto，现为Blink）。
8. 为什么利用多个域名来请求网络资源会更有效？
1）动静分离需求，使用不同服务器处理请求。处理动态内容的只处理动态内容，不处理别的，提高效率。
2）突破浏览器并发限制，同一时间针对同一域名下的请求有一定的数量限制（5个）。
3）Cookieless，节省宽带，尤其是上行宽带一般比下行要慢。用户的每次访问，都会带上自己的cookie，久而久之耗费的宽带还是挺大的。
例如weibo的图片放在主站域名下，那么用户每次访问图片时，request header里就会带有自己的cookie，header里的cookie还不能压缩，而图片是不需要知道用户的cookie的，所以这部分的宽带就白白浪费了。
4）避免不必要的安全问题（比如：上传js窃取主站cookie之类的）
5）节约主域名的连接数，从而提高客户端网络宽带的利用率，优化页面响应。
9）说说前端开发中，如何进行性能优化？
1）减少http请求次数，css sprite，data uri；
2）JS，CSS源码压缩；
3）前端模板，减少由于HTML标签导致的宽带浪费；JS + 数据，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数；
4）用innerHTML代替DOM操作，减少DOM操作次数。https://www.cnblogs.com/yepbug/p/5427213.html
document.getElementById('test').innerHTML='<div>test</div>';
var t=document.createElement('div');
t.appendChild(document.createTextNode('test'));
document.getElementById('test').appendChild(t);
5）用setTimeout来避免页面失去响应。
6）用hash-table来优化查找。
7）当需要设置的样式很多时设置className而不是直接操作style。
8）少用全局变量。
9）缓存DOM节点查找的结果。
10）避免使用CSS Expression。
11）图片预加载、懒加载。
12）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示要比div+css布局慢。
13）控制网页在网络传输过程中的数据量。比如：启用GZIP压缩或者良好的编程习惯，避免重复的CSS，JavaScript代码，清除多余的HTML标签和属性。
10. 从前端角度出发，谈谈做好网站seo需要考虑什么？
1）语义化html标签。
2）合理的title，description，keywords。
3）重要的html代码放前面。
4）少用iframe，搜索引擎不会抓取iframe中的内容。
5）图片加上alt。
11）HTTP状态码及其含义
1XX：信息状态码
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认之后发送的具体参数信息。
2XX：成功状态码
200·OK·正常返回信息
201·Created 请求成功并且服务器创建了新的资源
202·Accepted 服务器已接受请求，但尚未处理
3XX：重定向
301 Moved Permanently 请求的网页已永久移动到新位置
302·Found 临时性重定向
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
4XX：客户端错误
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 想匹配的资源。
5XX：服务器错误
500 Internal Server Error 最常见的服务器错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
12. html5有哪些新特性、移除了哪些元素？
HTML5 现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加：
1）绘画标签canvas；
2）用户媒介回放的video和audio元素；
3）本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
4）sessionStorage的数据在浏览器关闭后自动删除；
5）语义化更好的内容元素，比如article、footer、header、nav、section；
6）表单控件，比如calendar、date、time、email、url、search；
7）webworker、websocket、Geolocation；
移除的元素：
1）纯表现的元素：basefont、big、center、font、s、strike、tt...
2）对可用性产生负面影响的元素：frame、frameset、noframes
13. display：none；与visibility: hidden的区别？
1）相同点：它们都能让元素不可见；
2）不同点：
【1】display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；
visibility: hidden；不会让元素从渲染树消失，渲染树元素继续占据空间，只是内容不可见；
【2】display: none;是非继承属性，子孙节点消失是由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；
visibility: hidden；是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible；可以让子孙节点显示。
【3】修改常规流中元素display通常会造成文档重排；修改visibility属性只会造成元素的重绘。
【4】读屏器不会读取display: none；元素内容；会读取visibility: hidden;元素内容
14. px和em的区别？
1）相同点：px和em都是长度单位
2）不同点：px的值是固定的，指定多少就是多少，计算比较容易；em的值不是固定的，并且em会继承父级元素的字体大小。
3）换算规则：浏览器的默认字体都是16px，所以未经调整的浏览器都符合：1em = 16px；那么12px=0.75em，10px=0.625em
15. CSS去掉inline-block元素间隙的几种方法？
1）间隙是怎么来的？
间隙是由换行或者回车导致的，只要把标签写成一行或者标签没有空格，就不会出现间隙；
2）怎么去除？
方法1:
元素间的间隙出现的原因
是元素标签之间的空格，
把空格去掉间隙自然就会消失。
<div class="itlike">
<span>撩课itlike</span><span>撩课itlike</span>
</div>
方法2:
利用HTML注释标签
<div class="demo">
<span>撩课itlike</span>
<!-- -->
<span>撩课itlike</span>
</div>
方法3:
取消标签闭合
<div class="demo">
<span>撩课itlike
<span>撩课itlike
<span>撩课itlike
<span>撩课itlike
</div>
方法4:
在父容器上使用font-size:0;可以消除间隙
<div class="demo">
<span>撩课itlike</span>
<span>撩课itlike</span>
<span>撩课itlike</span>
<span>撩课itlike</span>
</div>
.demo {font-size: 0;}