CSS
1.盒模型
用来装页面上的元素的矩形区域。
box-sizing: border-box , padding-box, content-box
标准盒子模型的盒子宽度：左右border+左右padding+width
IE盒子模型的盒子宽度：width
padding-box ： 宽度：左右padding+width
2.画一条 0.5px 的线
（1）采用transform:scaleY(0.5)
height:1px;
transform:scaleY(0.5);
background-color:#000;
(2) 采用linear-gradient的方式
height:1px;
background:linear-gradient(0deg, #fff, #000);
（3）采用box-shadow
height:1px;
background: none;
box-shadow:0 0.5px 0 #000;
（4） 采用meta viewport的方式
<meta name="viewport" content="width=device-width,initial-sacle=0.5">
3.link标签和import标签的区别
link属于html标签，而@import是css提供的
页面被加载时，link会被同时加载，而@import引用的css会等到页面加载结束后加载
link是html标签，因此没有兼容性，而@import是只有IE5以上才能识别
link方式样式权重高于@import的
4.transition 和animation的区别
transition：需要触发一个事件才能改变属性 2帧 from……to
animation：不需要触发任何事件的情况下才会随时间改变属性值 一帧一帧
5.Flex布局
弹性布局：
容器属性：
flex-direction：决定主轴的方向
row | row-reverse| column |column-reverse；
flex-wrap：决定换行规则
nowrap| wrap| wrap-reverse
flex-flow: 属性是 flex-direction 和 flex-wrap 属性的复合属性。
flex-flow: flex-direction flex-wrap|initial|inherit;
justify-content:水平对齐方式
align-items：垂直对齐方式
元素属性：
order、flex-grow、flex-shrink、flex-basis、flex 默认0 1 auto、align-self
6.圣杯布局&双飞翼布局&flex布局&绝对定位布局
7.BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
哪些元素会生成BFC?
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
8.垂直居中的方法
<div class="container"> <div class="innner"></div></div>
（1）margin：auto
.container{
width:400px; height:400px; position:relative; border:1px solid #000}
.innner{
position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;background-color:#000}
(2)margin 负值法
.container{
width:400px; height:400px;position:relative;}
.inner{
width:200px;height:200px;position:absolute;top:calc(50%-100px);left:calc(50%-100px);}
或 .inner{
width:200px;height:200px;position:absolute;top:50%;left:50%; transform:translate(-50%,-50%)}
(3)table-cell
.container{
width:400px; height:400px;display:table-cell;vertical-align:middle;}
(4)flex
.container{
width:400px; height:400px;display:flex;justify-content:center;align-items:center}
9. js动画和css3动画的差异性
渲染线程分别为main thread 和 compositor thread。如果css动画只改变transform和opacity，这时整个CSS动画得以在compositor thread完成（而js动画会在main thread执行，然后出发compositor thread进行下一步操作）， 如果改变transform和opacity是不会layout或者paint的。
JS动画
缺点：JavaScript在浏览器的主线程中运行，而其中还有很多其他需要运行的JavaScript、样式计算、布局、绘制等对其干扰。这也就导致了线程可能出现阻塞，从而造成丢帧的情况。
优点：JavaScript的动画与CSS预先定义好的动画不同，可以在其动画过程中对其进行控制：开始、暂停、回放、中止、取消都是可以做到的。而且一些动画效果，比如视差滚动效果，只有JavaScript能够完成。
CSS动画
缺点：缺乏强大的控制能力。而且很难以有意义的方式结合到一起，使得动画变得复杂且易于出问题。
优点：浏览器可以对动画进行优化。它必要时可以创建图层，然后在主线程之外运行。
10.块级元素和行内元素
块级元素：独占一行，并且自动填满父元素，可以设置margin和padding以及高度和宽度
<div> <h1>~<h6> <p>段落 <hr>
<pre>预格式化文本<ul>无序列表<ol>有序列表<table>表格<form>表单<fieldset>表单元素分组
<output>表单输出<header>页头<footer>页尾<section>分区或节<atrical>文章内容<aside>侧边栏
<address>联系方式信息<audio>音频<video>视频<blockquote>块引用<canvas>绘制图形
<dd>定义列表中定义条目描述<dl>定义列表<figure>图文信息组<figcaption>图文信息组标题
行内元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失效
<span>行内容器<a>定义锚<b>定义粗体<i>定义斜体<abbr>定义缩写<acronym>定义取得首字母缩写
<cite>定义引用<big>定义大号文本<small>定义小号文本<br>定义折行<dfn>定义项目<em>着重阅读
<strong>定义加强<img>定义图片<map>定义图像映射<script>定义脚本<sub>定义下标文本<sup>定义上标文本
<button>定义按钮<input> 定义输入框<label>定义界面中项目的标题
11.单行、多行元素的文本省略号
单行：
overflow:hidden
white-space:nowrap
text-overflow:ellipsis
多行：
display:-webkit-box
-webkit-box-orient:vertial
-webkit-line-clamp:3
overflow:hidden
text-overflow: ellipsis;
12.visibility:hidden,opacity:0,display:none
opacity:0 该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如果click事件，那么点击该区域，也能触发点击事件
visibility:hidden,该元素隐藏起来，并不会改变页面布局，但是不会触发该元素的绑定事件
display:none 把元素隐藏起来，并且会改变页面布局，可以理解为将该元素删除掉一样
13.外边距重叠问题
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
防止外边距重叠解决方案：
外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素 加float:left;或display:inline-block;
内层元素padding:1px;
14. 什么是CSS hack
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
15.什么叫优雅降级与渐进增强
.transition { /*渐进增强写法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;}
.transition{/*优雅降级写法*/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;}
渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）
优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
16. px、em、rem和%的区别
px是固定长度单位，不随其它元素的变化而变化
em和%是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化
rem是相对于根目录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化而变化
px和%用的比较广泛一些，可以充当更多属性的单位，而em和rem是字体大小的单位，用于充当font-size属性的单位
一般来说：1em = 1rem = 100% = 16 px
17.css预处理器比较less和sass
18.可以通过哪些方法优化css3 animation渲染
1、尽可能多的利用硬件能力，如使用3D变形来开启GPU加速：
2、尽可能少的使用box-shadows与gradients
19. 如何清除浮动？
（1）使用伪元素
.clearfix::after {
content:'';
display: block;
clear: both;
}
（2）添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
.clearfloat{clear:both}
（3）父级div手动定义height，就解决了父级div无法自动获取到高度的问题
（4）必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
（5）必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
（6）父级div也一起浮动
（7）将div属性变成表格 display：table
（8）父级div定义zoom:1来解决IE浮动问题，结尾处加br标签clear:both
20.触发重布局的属性 、触发重绘的属性
触发重排的属性：
盒子模型相关属性会触发重布局：
* width* height* padding* margin* display* border-width* border* min-height
定位属性及浮动也会触发重布局：
* top* bottom* left* right* position* float* clear
改变节点内部文字结构也会触发重布局：
* text-align* overflow-y* font-weight* overflow* font-family* line-height* vertival-align* white-space* font-size
触发重绘的属性：
* color* border-style* border-radius* visibility* text-decoration* background* background-image
* background-position* background-repeat* background-size* outline-color* outline* outline-style* outline-width* box-shadow
21. 响应式布局原理
所谓的响应式布局，就是设计一个网站的时候，让它满足能同时适应不同的端口，而不用对不同端口设计不同的网页。
实现方式：采用百分比自适应布局
1.原生代码实现 用原生代码实现的根本在于媒体查询@media的设置。
@media screen 可以查询当前浏览器的尺寸，因此可采用该方法对同一个页面设置不同的CSS样式，来满足不同分辨率要求。
举例如下：
@media screen and (min-width:1000px){...} 对应PC端页面
@media screen and (max-width:1000px) and (min-width:768px) {...} 对应平板端页面
@media screen and (max-width:768px){...} 对应手机端页面
2.采用bootstrap框架布局
bootstrap框架布局完成的页面，是自动对应的自适应效果
<div class="col-md-6 col-sm-6 col-xs-12">
3.react vue等框架栅格均能实现自适应效果，实现响应式布局。
HTML
1.HTML5 为什么只写<!DOCTYPE HTML>
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。
而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。
其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。
BUT，HTML5不是的。
2. 列举你了解Html5. Css3 新特性
浏览器、网络Http
1. 简述src和href的区别
src用于替换当前元素，是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
href用于在当前文档和引用资源之间确立联系，是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。
2. Http的状态码有哪些
类别 原因短语
1XX Informational（信息性状态码） 接受的请求正在处理
2XX Success（成功状态码） 请求正常处理完毕
3XX Redirection（重定向状态码） 需要进行附加操作以完成请求
4XX Client Error（客户端错误状态码） 服务器无法处理请求
5XX Server Error（服务器错误状态码） 服务器处理请求出错
1、200 OK：请求已正常处理。
2、204(无内容)服务器成功处理了请求，但没有返回任何内容。
3、206(部分内容)服务器成功处理了部分 GET 请求。
4、301(永久移动)请求的网页已永久移动到新位置。服务器返回此响应(对 GET 或 HEAD 请求的响应)时，会自动将请求者转到新位置。您应使用此代码告诉某个网页或网站已永久移动到新位置。
5、302(临时移动)服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来响应以后的请求。此代码与响应 GET 和 HEAD 请求的 301 代码类似，会自动将请求者转到不同的位置，但您不应使用此代码来告诉某个网页或网站已经移动，因为 Googlebot 会继续抓取原有位置并编制索引。
6、303 See Other：资源的URI已更新，你是否能临时按新的URI访问。该状态码表示由于请求对应的资源存在着另一个URL，应使用GET方法定向获取请求的资源。303状态码和302状态码有着相同的功能，但303状态码明确表示客户端应当采用GET方法获取资源，这点与302状态码有区别。
当301,302,303响应状态码返回时，几乎所有的浏览器都会把POST改成GET，并删除请求报文内的主体，之后请求会自动再次发送。
7.304(未修改)自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。服务器可以告诉 Googlebot 自从上次抓取后网页没有变更，进而节省带宽和开销。
8、307 Temporary Redirect：临时重定向。与302有相同的含义。
9、400 Bad Request：服务器端无法理解客户端发送的请求，请求报文中可能存在语法错误。
10、401(未授权)请求要求身份验证。对于登录后请求的网页，服务器可能返回此响应。
11、403(禁止)服务器拒绝请求。不允许访问那个资源。该状态码表明对请求资源的访问被服务器拒绝了。（权限，未授权IP等）
12、404(未找到)服务器找不到请求的网页。例如，对于服务器上不存在的网页经常会返回此代码。
13、500(服务器内部错误)服务器遇到错误，无法完成请求。
14、503(服务不可用)服务器目前无法使用(由于超载或停机维护)。通常，这只是暂时状态。
3.一次完整的HTTP事务是怎么一个过程
域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户
从用户输入浏览器输入url到页面最后呈现 有哪些过程？
用户输入URL地址
浏览器解析URL解析出主机名
浏览器将主机名转换成服务器ip地址（浏览器先查找本地DNS缓存列表 没有的话 再向浏览器默认的DNS服务器发送查询请求 同时缓存）
浏览器将端口号从URL中解析出来
5.浏览器建立一条与目标Web服务器的TCP连接（三次握手）
6.浏览器向服务器发送一条HTTP请求报文
7.服务器向浏览器返回一条HTTP响应报文
8.关闭连接 浏览器解析文档
如果文档中有资源 重复5 6 7 8 动作 直至资源全部加载完毕
4. HTTPS是如何实现加密
https的SSL加密是在传输层实现的。
客户使用https url访问服务器，则要求web服务器建立ssl连接
web服务器接受客户端的请求后，会将网站的证书（证书包含了公钥），返回给客户端
客户端和web服务器端开始协商SSL连接的安全等级，也就是加密等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站
web服务器通过自己的私钥解密出会话密钥
web服务器通过会话密钥加密与客户端之间的通信
5.tcp三次握手，一句话概括
客户端和服务端都需要直到各自可收发，因此需要三次握手
6.浏览器是如何渲染页面的
大概可以划分成以下几个步骤：
（1）解析HTML文件，构建 DOM Tree
（2）解析CSS，构建 CSSOM Tree(CSS规则树)
（3）将 DOM Tree 和 CSSOM Tree合并，构建Render tree(渲染树)
（4）reflow(重排)：根据Render tree进行节点信息计算（Layout）
（5）repaint(重绘)：根据计算好的信息绘制整个页面（Painting）
7.浏览器的内核有哪些？分别有什么代表的浏览器
IE:trident内核
Firefox：gecko内核
safari：webkit内核
opera：以前是presto内核，现在改用google chrome的Blink内核
Chrome：Blink（基于webkit，google与opera software共同开发）
8.如何优化图像，图像格式的区别
优化图像：
1、不用图片，尽量用css3代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。
2、 使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！
3.、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。
基本上，内容图片多为照片之类的，适用于JPEG。
而修饰图片通常更适合用无损压缩的PNG。
GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。
4、按照HTTP协议设置合理的缓存。
5、使用字体图标webfont、CSS Sprites等。
6、用CSS或JavaScript实现预加载。
7、WebP图片格式能给前端带来的优化。
WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。
图像格式的区别：
矢量图：图标字体，如 font-awesome；svg 位图：gif,jpg(jpeg),png
区别：
1、gif:是是一种无损，8位图片格式。
具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。
2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，
不适 合做色彩简单(色调少)的图片，如logo,各种小图标icons等。
3、png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。
关于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明;
优缺点：
1、能在保证最不失真的情况下尽可能压缩图像文件的大小。
2、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。
png-8，png-24，jpeg，gif，svg。
WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。
9.列举几个前端性能方面的优化
全面介绍：https://juejin.im/post/59e1bbc9f265da430f311fb1
10.如何实现同一个浏览器多个标签页之间的通信
详细介绍：浏览器多个标签页之间的通信
11.浏览器的存储技术有哪些
cookie：放在http请求头中，伴随数据传输而传输，数据传输大小有限制，有过期时间
localstorage：存储在本地，不会伴随数据传输，生命周期为永久
sessionstorage：浏览器中，浏览器关闭则消失，即使在同源浏览器中也不能共享
userdata：ie中用于浏览器存储技术
globalstorage：ff中用于浏览器存储
12.尽可能多的写出浏览器兼容性问题
13.css定位方式
position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
14. http协议和tcp协议
TCP协议对应于传输层，而HTTP协议对应于应用层，从本质上来说，二者没有可比性。Http协议是建立在TCP协议基础之上的，当浏览器需要从服务器获取网页数据的时候，会发出一次Http请求。Http会通过TCP建立起一个到服务器的连接通道。简单地说，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。Http是无状态的短连接，而TCP是有状态的长连接。
15.刷新页面，js请求一般会有哪些地方有缓存处理
DNS缓存：短时间内多次访问某个网站，在限定时间内，不用多次访问DNS服务器。
CDN缓存：内容分发网络
浏览器缓存：浏览器在用户磁盘上，对最新请求过的文档进行了存储。
服务器缓存：将需要频繁访问的Web页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度。
16.如何对网站的文件和资源进行优化
1.文件合并（目的是减少http请求）
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缓存，让网站内容分批加载，局部更新。
17.你对网页标准和W3C重要性的理解
网页标准和标准制定机构都是为了能让web发展的更“健康”，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。
看到别人总结4篇面试题也挺好，等着看完他的 再总结一些缺失的……
