2020秋招前端面经知识点汇总(一) html，css部分

作者：北风菌

链接：https://juejin.im/post/6876623829574090760

来源：掘金

好久没有更新帖子了，最近一直在复习准备秋招，最近终于拿到了第一份意向书，终于有时间来整理一下自己最近的复习内容，以下知识点都是楼主在面试中被问到的问题，我做了几大块的分类，各位需要的小伙伴可以收藏一下。因为还在继续面试，所以还会不定时更新，因为掘金这边文章有字数限制，所以这边放出了HTML部分，CSS部分，JS部分的知识点，Vue，git，webpack，计网相关的知识点放在下一篇文章中juejin.im/post/687707… 。

HTML部分：

HTML标签的分类：

HTML文档标签

<!DOCTYPE>：定义文档类型。

<html>：定义HTML文档。

<head>：定义文档的头部。<meta>：定义元素可提供的有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键字。meta标签共有两个属性， http-equiv属性：相当于http头文件的作用，向浏览器传回一些有用的信息，使用content规定属性的内容比如

name属性：主要用来描述网页，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<base>：定义页面上的所有链接规定默认地址或默认目标。<title>：定义文档标题。<link>：定义文档与外部资源的关系。<style>：定义HTML文档样式信息。

<body>：定义文档的主体。（脚本在非必需情况时在的最后）<script>：定义客户端脚本，比如javascript。<noscript>：定义脚本未被执行时的替代内容。（如文本）

按闭合特征分类：

闭合标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，例如<html></html>、<p></p>等。

空标签是指没有内容的标签，在开始标签中自动闭合。常见的空标签有：<br>、<hr>、 <img>、 <input>、 <link> <meta>。

按是否换行特征分类：

块级元素：块级元素是值本身属性为display:block的元素。

内联元素：内联元素是指本身属性为display:inline的元素，其宽度随元素的内容而变化。

块级元素的特点：

每个块级元素独占一行，从上到下排布。

块级元素可以直接控制宽度高度等盒子模型相关的css属性。

不设置宽度的情况下，块级元素的宽度是其父级元素内容的宽度。

不设置高度的情况下，块级元素的高度是他本身内容的高度。

常用块级元素：

内联元素的特点：

内联元素会和其他元素从左到右显示在一行中。

内联元素不能直接控制宽度高度以及盒子模型相关的css属性，可以设置内外边距的水平方向的值。也就是说，对于内联元素的margin和padding，只有margin-left/margin-right和padding-left/padding-right是有效的，竖直方向的margin和pading无效果。

内联元素的宽高是由其内容本身的大小决定的。

内联元素只能容纳文本或者其他内联元素，不允许在内联元素中嵌套块级元素。

常见的内联元素：

H5新特性（常用）：

HTML5新增元素：

1）标签增删 8个语义元素 header section footer aside nav main article figure内容元素mark高亮 progress进度

新的表单控件calander date time email url search新的input类型 color date datetime datetime-local email移除过时标签big font frame frameset2）canvas绘图，支持内联SVG。支持MathML

3）多媒体audio video source embed track4）本地离线存储，把需要离线存储在本地的文件列在一个manifest配置文件

5）web存储,localStorage、SessionStorage cookie sessionStorage localStorage区别：

Cookie属性详解Name字段：为一个cookie的名称Value字段：为一个cookie的值Domain字段：为可以访问此cookie的域名，二级域名可以获取顶级域名中的cookie，同二级域名之间不可相互获取，顶级域名不可获取二级域名的cookiePath字段：为可以访问此cookie的页面路径，只有此路径下的页面可以读取此cookieExpires/Max-Age字段：为此cookie的超时时间，若设置为一个时间，则当达到此时间之后，此cookie失效，不设置的话默认值为Session，即浏览器关闭后才会失效。Size字段：表示此cookie的大小http字段：表示此cookie的httponly属性，若此属性设置为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问。Secure字段：表示设置是否只能通过https来传递此条cookie。

Cookie与webstorage：

cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递。

cookie数据还有路径（path）的概念，可以限制。cookie只属于某个路径下存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如回话标识。

webStorage虽然也有存储大小的限制，但是比cookie大得多，可以达到5M或更大

sessionStorage与localStorage：

数据的有效期不同：

sessionStorage：仅在当前的浏览器窗口关闭有效；

localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前一直有效，即使窗口和浏览器关闭。

作用域不同：

sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；localStorage：在所有同源窗口都是共享的；

cookie：也是在所有同源窗口中共享的。

HTTP状态码：

1xx(临时响应)：表示临时响应并需要请求者继续执行操作的状态码。

100(继续)请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。

101(切换协议)请求者已要求服务器切换协议，服务器已确认并准备切换。

2xx (成功)：表示成功处理了请求的状态码。

200(成功)服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。如果是对您的 robots.txt 文件显示此状态码，则表示 Googlebot 已成功检索到该文件。

201(已创建)请求成功并且服务器创建了新的资源。

202(已接受)服务器已接受请求，但尚未处理。

203(非授权信息)服务器已成功处理了请求，但返回的信息可能来自另一来源。

204(无内容)服务器成功处理了请求，但没有返回任何内容。

205(重置内容)服务器成功处理了请求，但没有返回任何内容。与 204 响应不同，此响应要求请求者重置文档视图(例如，清除表单内容以输入新内容)。

206(部分内容)服务器成功处理了部分 GET 请求。

3xx (重定向)：要完成请求，需要进一步操作。通常，这些状态码用来重定向。

300(多种选择)针对请求，服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。

301(永久移动)请求的网页已永久移动到新位置。服务器返回此响应(对 GET 或 HEAD 请求的响应)时，会自动将请求者转到新位置。您应使用此代码告诉 Googlebot 某个网页或网站已永久移动到新位置。

302(临时移动)服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来响应以后的请求。此代码与响应 GET 和 HEAD 请求的 301 代码类似，会自动将请求者转到不同的位置，但您不应使用此代码来告诉 Googlebot 某个网页或网站已经移动，因为 Googlebot 会继续抓取原有位置并编制索引。

303(查看其他位置)请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。对于除 HEAD 之外的所有请求，服务器会自动转到其他位置。

304(未修改)自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。服务器可以告诉 Googlebot 自从上次抓取后网页没有变更，进而节省带宽和开销。

305(使用代理)请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。

307(临时重定向)服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来响应以后的请求。此代码与响应 GET 和 HEAD 请求的 301 代码类似，会自动将请求者转到不同的位置，但您不应使用此代码来告诉 Googlebot 某个页面或网站已经移动，因为 Googlebot 会继续抓取原有位置并编制索引。

4xx(请求错误)：这些状态码表示请求可能出错，妨碍了服务器的处理。

400(错误请求)服务器不理解请求的语法。

401(未授权)请求要求身份验证。对于登录后请求的网页，服务器可能返回此响应。

403(禁止)服务器拒绝请求。如果您在 Googlebot 尝试抓取您网站上的有效网页时看到此状态码(您可以在 Google 网站管理员工具诊断下的网络抓取页面上看到此信息)，可能是您的服务器或主机拒绝了 Googlebot 访问。

404(未找到)服务器找不到请求的网页。例如，对于服务器上不存在的网页经常会返回此代码。

405(方法禁用)禁用请求中指定的方法。

406(不接受)无法使用请求的内容特性响应请求的网页。

407(需要代理授权)此状态码与 401(未授权)类似，但指定请求者应当授权使用代理。如果服务器返回此响应，还表示请求者应当使用代理。

408(请求超时)服务器等候请求时发生超时。

5xx(服务器错误)：这些状态码表示服务器在处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

500(服务器内部错误)服务器遇到错误，无法完成请求。

501(尚未实施)服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。

502(错误网关)服务器作为网关或代理，从上游服务器收到无效响应。

503(服务不可用)服务器目前无法使用(由于超载或停机维护)。通常，这只是暂时状态。

504(网关超时)服务器作为网关或代理，但是没有及时从上游服务器收到请求。

505(HTTP 版本不受支持)服务器不支持请求中所用的 HTTP 协议版本。

前端优化方法：

方法分类：

降低请求量：合并资源，减少HTTP 请求数，minify / gzip 压缩， webPlazyLoad。

加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。

缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存localStorage。

渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline。

具体措施：

减少HTTP请求次数：CSS Sprites，js、CSS源码压缩、图片大小控制合适；网页Gzip、CDN托管、data缓存、图片服务器

前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

用innerHTML替代DOM操作，减少DOM操作次数，优化JavaScript性能。

当需要设置的样式很多时，设置className而不是直接操作Style

少用全局变量、缓存DOM节点查找的结果。减少IO读取

避免使用CSS Expression（css表达式）又称Dynamic properties（动态属性）

图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。

防止内存泄漏：内存泄漏指任何对象在不再拥有或需要它之后仍然继续存在。垃圾回收器定期扫描对象，并计算引用了每个对象的其他的数量。如果一个对象的引用数量为0（没有其他对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的内存即可回收。

优雅降级与渐进增强：

浏览器输入网址到页面渲染全过程

渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后在针对高级浏览器进行效果，交互，追加功能达到更好的体验。

优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复，比如一开始使用css3的特性构建一个应用，然后逐步针对各大浏览器进行hack使其可以在低版本浏览器上正常浏览。

post和get区别：

get参数通过url传递，post参数放在request body中。

get请求在url中传递的参数是有长度限制的，而post没有。

get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。

get请求只能进行url编码，而post支持多种编码方式

get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。

GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

GET产生一个TCP数据包；POST产生两个TCP数据包。对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

http与https有什么区别？

（1） https协议需要ca申请认证书，一般免费的较少

（2） http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议

（3） http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443

（4） http的连接很简单，是无状态的，https协议是由ssl+http协议构建的可进行加密传输，身份认证的网络协议，比http安全

HTTP协议中缓存的处理流程：

缓存分为两种：强缓存和协商缓存，根据响应的header内容来决定。

强缓存是利用http头中的Expires和cache-Control两个字段来控制的，用来表示资源的缓存时间。强缓存中，普通刷新会忽略它，但不会清除它，需要强制刷新。浏览器强制刷新，请求会带上cache-Control :no-cache和pragma: no-cache

协商缓存就是由服务器来确定缓存资源是否可用，所以客户端与服务器端要通过某种标识来进行通信，从而让服务器判断请求资源是否可以缓存访问。

普通刷新会启用弱缓存，忽略强缓存。只有在地址栏或收藏夹输入网址、通过链接引用资源等情况下，浏览器才会启用强缓存，这也是为什么有时候我们更新一张图片、一个js文件，页面内容依然是旧的，但是直接浏览器访问那个图片或文件，看到的内容却是新的。这个主要涉及到两组协商缓存相关的header字段:Etag和If-None-Match、Last-Modified和If-Modified-Since。

浏览器的缓存过程：

浏览器请求某一资源时，会先获取该资源缓存的header信息，然后根据header中的cache-Control和Expires来判断是否过期。

若没过期则直接从缓存中获取资源信息，包括缓存的header的信息，所以此次请求不会与服务器进行通信。这里判断是否过期，则是强缓存相关。

如果显示已过期，浏览器会向服务器端发送请求，这个请求会携带第一次请求返回的有关缓存的header字段信息。比如客户端会通过If-None-Match头将先前服务器端发送过来的Etag发送给服务器，服务会对比这个客户端发过来的Etag是否与服务器的相同，若相同，就将If-None-Match的值设为false，返回状态304，客户端继续使用本地缓存，不解析服务器端发回来的数据，若不相同就将If-None-Match的值设为true，返回状态为200，客户端重新机械服务器端返回的数据;客户端还会通过If-Modified-since头将先前服务器端发过来的最后修改时间戳发送给服务器，服务器端通过这个时间戳判断客户端的页面是否是最新的，如果不是最新的，则返回最新的内容，如果是最新的，则返回304，客户端继续使用本地缓存。

如何解决前端开发中的缓存问题

对开发者来说，只要关闭浏览器缓存就可以了，找到network，Disable cache选项，打钩即可取消缓存。

开发者可以关闭缓存，但是不能要求所有用户都进行此类操作，此时可以在引用的文件之后拼接随机数或者日期都可以，如css/index.css?v=0.0001，浏览器就会认为是新的请求，而不会使用缓存中的文件。由于每次资源的修改都要更新引用的位置，同时修改参数的值，所以操作起来不是很方便，除非是在动态页面比如jsp中用服务器变量(v=${sysRnd})

如果缓存问题出现在ajax请求中，则在ajax请求的地址追加随机数

直接ctrl+f5，这个办法能解决页面直接引用的资源更新的问题

使用浏览器的隐私模式开发；

如果资源引用的页面，被嵌入到了一个iframe里面，可以在iframe的区域右键单击重新加载该页面

html5如何及时更新缓存文件(js、css或图片)

后端接口页面设置

header("Cache-Control: no-cache, must-revalidate"); header("Pragma: no-cache"); 复制代码

html页面中设置meta标签的属性(meta标签的http-equiv属性语法格式是：＜meta http-equiv="参数" content="参数变量值"＞)

对于图片或css文件，可以在文件名后面添加一个随机数或标志位，例如

对于js文件也可以采取3的方法，或者在文件名后使用时间戳

输入URL到后发生了什么：

简单过程：

DNS域名解析；

建立TCP连接；

发送HTTP请求；

服务器处理请求；

返回响应结果；

关闭TCP连接；

浏览器解析HTML；

浏览器布局渲染；

详细分析构建请求的过程:

应用层进行DNS解析通过DNS将域名解析成IP地址，在解析过程中，按照浏览器缓存，系统缓存，路由器缓存，ISP(运营商)DNS缓存，根域名服务器，顶级域名服务器，主域名服务器的顺序，逐步读取缓存，直到拿到IP地址。这里使用DNS预解析，可以根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度。

应用层生成HTTP请求报文应用层生成针对目标服务器的HTTP报文请求，HTTP请求包括起始行，首部和主体部分。首部包括域名host，keep-alive，User-Agent，Accept-Endoding，Accept-Language，cookie等信息

传输层建立TCP连接 http协议使用的TCP协议。将http请求报文按序号分为多个报文段，并对每个报文段进行封装，使用本地的随机tcp源端口简历到目标服务器的tcp80端口(https是443端口)的连接，TCP源端口和目的端口被加入到报文中。即协议数据单元，同时还会加入序列号，确认号，检验和等参数，共计添加20个字节的头部信息。这里构建TCP连接请求会增加大量的网络延时。常用的优化方法如下：

1)资源打包，合并请求

2)多使用缓存，减少网络传输

3)使用keep-alive建立持久连接

4)使用多个域名，增加浏览器的资源并发加载数，或者使用http2的管道化连接的多路复用技术

网络层使用IP协议来选择线路。处理来自传输层的数据段segment，将数据段segment装入数据包packet，填充包头，主要添加源和目的IP地址，然后发送数据。IP协议负责选择传送的路线，称为路由功能。

数据链路层实现网络相邻结点间可靠的数据通信为了保证数据的可靠性，把数据包packet封装成帧，并按顺序传送各帧，对每个数据块计算CRC(循环冗余检验),防止数据包丢失，出错就重传。将数据包封装成帧，分为帧头和帧尾，帧尾是CRC校验部分，帧头主要是添加数据链路层的地址，源地址和目的地址，即网络相邻结点间的MAC地址

物理层传输数据将数据链路层的帧转换为二进制形式的比特流，从网卡发送出去，再转换成电子，光学信号在网络中传输。

总结：6个步骤分别为：DNS协议解析URL地址，生成HTTP请求报文，构建TCP链接，使用IP协议选择传输路线，数据链路层保证数据的可靠传输，物理层将数据转换为物理信号进行传输。

补充：服务器处理及反向传输:

服务器接收到这个比特流，把比特流转换成帧格式，上传到数据链路层，服务器发现数据帧中的目的MAC地址与本网卡的MAC地址相同，服务器拆除数据链路层的封装后，把数据包上传到网络层。服务器的网络层比较数据包中的目的IP地址，发现与本机的IP地址相同，服务器拆除网络层的封装后，把数据分段上传到传输层。传输层对数据分段进行确认、排序、重组，确保数据传输的可靠性。数据最后被传到服务器的应用层

　　接着，通过传输层、网络层、数据链路层的层层封装，最终将响应报文封装成二进制比特流，并转换成其他信号，如电信号到网络中传输

　　反向传输的过程与正向传输的过程类似

浏览器的渲染过程：

主要步骤

浏览器将获取到的HTML文档解析成DOM树

处理css标记，构成层叠样式表模型CSSOM（css object model）

将DOM和CSSOM合并为渲染树(rendering tree)，代表一系列将要被渲染的对象

渲染树的每个元素包含的内容是计算过的，称之为布局layout，浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有元素

将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting 具体流程：

构建DOM树：

浏览器收到服务器响应来的HTML文档后，遍历文档节点，生成DOM树，DOM树构建时可能会被CSS和JS的加载而执行阻塞，display:none的元素，注释，script也会存在于DOM树中。

构建CSSOM规则树

浏览器解析CSS文件并对每个文件生成一个stylesheet对象，每个对象包含css规则。css解析可以和DOM解析同时进行，css的解析会被js互斥。

构建渲染树(render tree):

浏览器从DOM树的根结点遍历每个可见结点，然后对每个可见结点找到css样式规则并应用。Render tree与DOM tree不完全对应，display:none的元素不在render tree中，visibility:hidden元素在render tree中。这个时候还没渲染到屏幕上，渲染到屏幕需要用到各个节点的位置信息，需要布局的处理

渲染树布局(render tree layout)：

布局阶段，遍历每一个render object对象，包含宽高，位置，背景色等样式信息，通过这些信息确定每个结点在页面上的确切位置。脱离文档流，脱离的是render tree

渲染树绘制(render tree paint):

绘制阶段，浏览器遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容，由浏览器的后端UI组建完成。

Js阻塞：

JS可以操作DOM来改变DOM结构，修改CSSOM样式，所以浏览器在遇到<script>标签时，DOM构建将暂停，直到脚本执行完成，再继续构建DOM，所以<script>标签一般放在最后。现在可以在<script>标签上增加defer，async等属性，单独解析js中操作DOM和CSSOM的地方追加到DOM和CSSOM上。Css阻塞：

CSSOM负责存储渲染信息，所以CSSOM在浏览器合成渲染树之前必须是完备的，否则就不会进入渲染过程。所以将样式放在head中，为了更快的解析css。defer和async属性的区别：

没有defer和async属性的时候浏览器在读取到<script>标签的时候会立即读取脚本文件，而不会加载后续的文档元素，会阻塞后续DOM的构建文档解析时，遇到设置了defer的脚本，就会在后台进行下载，但是并不会阻止文档的渲染，当页面解析&渲染完毕后。会等到所有的defer脚本加载完毕并按照顺序执行，执行完毕后会触发DOMContentLoaded(dom内容加载完毕)事件。 async脚本会在加载完毕后执行。async脚本的加载不计入DOMContentLoaded事件统计有defer或者async属性之后，脚本文件的读取和后续文档的加载是并行的也就是异步执行，js脚本的执行会等到所有元素被解析完成之后，DOMContentLoaded事件调用前执行。存在多个defer的脚本文件时，他们会按照顺序defer的顺序执行，而async的加载则是无序的，只要DOM加载完成会立即执行，不考虑脚本之间的依赖关系。

重排(layout)和重绘(repaint)：

DOM的变化影响到了已渲染完成的几何属性，比如宽高等，浏览器将重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染树（Render树），这个过程称之为重排(也叫回流reflow)，浏览器将受到影响的部分重新绘制在屏幕上的过程称之为重绘。display:none会触发reflow，而visibility: hidden属性则并不算是不可见属性，只会触发repaint

重绘产生的原因有：

添加或删除可见的DOM元素，

元素的尺寸位置发生改变。

浏览器页面初始化

浏览器窗口大小发生变化

重排一定导致重绘，重绘不一定导致重排。

减少重绘重排的方法：

不在布局信息改变时做DOM查询

不要一条一条的修改DOM样式，使用csstext，className一次性改变属性

在内存中多次操作节点，完成后再添加到文档中

对于一个元素进行复杂的操作时，先隐藏，操作完再展示

需要经常获取那些引起浏览器重排的属性时，缓存到变量中

不要使用table布局，一个小改动会导致table重新布局

对于多次重排的元素，比如说动画，使用绝对定位让其脱离文档流，使其不影响其他元素，减少重绘范围

http报文构成：

使用HTTP长连接有哪些优点：

HTTP长连接（持久化连接）: 在一个TCP连接的基础之上，发送多个HTTP请求以及接收多个HTTP响应，这是为了避免每一次请求都去打开一个新的连接。

在HTTP/1.0中默认使用短连接。也就是说，客户端和服务器每进行一次HTTP操作，就建立一次连接，任务结束就中断连接。而从HTTP/1.1起，默认使用长连接，用以保持连接特性。使用长连接的HTTP协议，会在响应头加入这行代码：Connection:keep-alive 在使用长连接的情况下，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，客户端再次访问这个服务器时，会继续使用这一条已经建立的连接。

Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。实现长连接需要客户端和服务端都支持长连接。

HTTP协议的长连接和短连接，实质上是TCP协议的长连接和短连接。

长连接的特点：

可以省去较多的TCP连接建立和关闭的操作，减少浪费，节约时间。适用于频繁请求服务器资源的客户端之间建立。

短连接的特点：

对于服务器来说管理较为简单，存在的连接都是有用的连接，但是如果客户请求频繁，将在TCP的建立和关闭操作上浪费时间和带宽。WEB网站的http服务一般采用的都是短连接服务。

客户端和服务器之间的连接如果一直不关闭，随着建立连接的客户端越来越多，会增加服务器的压力，所以一般采取以下几种策略：

1.关闭一些长时间没有发生读写事件的连接。

2.限制每个客户端的最大长连接数量。

TLS/SSL协议是如何保障信息安全的：

SSL(安全套接字协议):是web浏览器和web服务器之间安全交换信息的协议，提供两个基本的安全服务，鉴别和保密 TLS(安全传输层协议):用于在两个通信应用程序之间提供保密性和数据完整性。其中TLS是SSL的升级版

SSL/TLS协议的基本过程

（1）客户端向服务器端索要并验证公钥。

（2）双方协商生成"对话密钥"。

（3）双方采用"对话密钥"进行加密通信。具体过程可细分为8个步骤：

客户端向服务器发起https请求，连接到服务器的443端口

服务器有密钥对，即公钥和私钥，用来进行非对称加密

服务器将公钥发送给客户端

客户端收到服务端的数据后，先验证其证书的合法性，如果合法，客户端生成客户端密钥，并使用服务端接收到的公钥对客户端密钥进行加密。

客户端再次发起https请求，将加密之后的客户端密钥发送给服务器

服务器接收到客户端发送过来的加密后的密钥，用自己的私钥进行解密，然后用客户端密钥对要发送的数据进行加密。

将加密后的数据发送给客户端

客户端使用客户端密钥对加密数据进行解密，得到服务器发送的数据。SSL协议的内容：

握手协议握手协议是客户端和服务器用SSL连接通信时使用的第一个子协议，握手协议包括客户机与服务器之间的一系列消息，是SSL协议中最复杂的协议，该协议允许服务器和客户机相互验证，协商加密和MAC算法(带秘密密钥的Hash函数)及保密密钥，用来保护在SSL记录中发送的数据,握手协议是在应用程序的数据传输之前使用的。 1.1 建立安全能力，发送信息，交换版本，随机数，会话ID，密码套件，压缩方法等信息 1.2 服务器鉴别与密钥交换 1.3 客户机鉴别与密钥交换 1.4 完成

记录协议记录协议在客户机和服务器成功握手之后使用，即客户机和服务器鉴别对方和确定安全信息交换使用的算法后，进入SSL记录协议。

警报协议客户机和服务器发现错误时，向对方发送一个警报信息，如果是致命错误，则算法立即关闭SSL连接，双方删除相关的会话号，密钥等。

总结：SSL中，使用握手协议协商加密和MAC算法以及保密密钥，使用握手协议对交换的数据进行加密和签名，使用警报协议定义数据传输过程中，出现问题改如何解决。

HTTP 1.0,1.1,2.0协议的区别：

HTTP1.0 HTTP 1.1主要区别长连接HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接，而HTTP1.1默认支持长连接。

HTTP是基于TCP/IP协议的，创建一个TCP连接是需要经过三次握手的,有一定的开销，如果每次通讯都要重新建立连接的话，对性能有影响。因此最好能维持一个长连接，可以用个长连接来发多个请求。节约带宽HTTP 1.1支持只发送header信息(不带任何body信息)，如果服务器认为客户端有权限请求服务器，则返回100，否则返回401。客户端如果接受到100，才开始把请求body发送到服务器。

这样当服务器返回401的时候，客户端就可以不用发送请求body了，节约了带宽。

另外HTTP还支持传送内容的一部分。这样当客户端已经有一部分的资源后，只需要跟服务器请求另外的部分资源即可。这是支持文件断点续传的基础。HOST域现在可以web server例如tomat，设置虚拟站点是非常常见的，也即是说，web server上的多个虚拟站点可以共享同一个ip和端口。

HTTP1.0是没有host域的，HTTP1.1才支持这个参数。

HTTP1.1 HTTP 2.0主要区别多路复用HTTP2.0使用了(类似epoll)多路复用的技术，做到同一个连接并发处理多个请求，而且并发请求的数量比HTTP1.1大了好几个数量级。

当然HTTP1.1也可以多建立几个TCP连接，来支持处理更多并发的请求，但是创建TCP连接本身也是有开销的。

TCP连接有一个预热和保护的过程，先检查数据是否传送成功，一旦成功过，则慢慢加大传输速度。因此对应瞬时并发的连接，服务器的响应就会变慢。所以最好能使用一个建立好的连接，并且这个连接可以支持瞬时并发的请求。数据压缩HTTP1.1不支持header数据的压缩，HTTP2.0使用HPACK算法对header的数据进行压缩，这样数据体积小了，在网络上传输就会更快。

请求与响应首部的定义在HTTP2.0中基本没有变，只是所有首部键必须全部小写，而且要求行要独立为:method:、:scheme:、:host:、:path:这些键值对

对于相同的数据，不再重新通过每次请求和响应发送。每个新的首部键值对要么追加到当前表的末尾，要么替换表中之前的值。首部表在HTTP2.0的链接存续期内始终存在，由客户端和服务端共同渐进的更新。服务器推送意思是说，当我们对支持HTTP2.0的web server请求数据的时候，服务器会顺便把一些客户端需要的资源一起推送到客户端，免得客户端再次创建连接发送请求到服务器端获取。这种方式非常合适加载静态资源。

服务器端推送的这些资源其实存在客户端的某处地方，客户端直接从本地加载这些资源就可以了，不用走网络，速度自然是快很多的。二进制帧层HTTP2.0会把所有信息分割成更小的消息和帧，并采用二进制格式将其封装。例如header封装到Headers帧，request body封装到Data帧。

HTTP2.0通信都在一个TCP连接上完成，这个连接可以承载任意数量的双向数据流，相应的每个数据流以消息的形式发送。而消息由一或多个帧组成，这些帧可以乱序发送，然后根据每个帧首部的流标识符重新组装。

WebSocket协议：

ajax轮询ajax（异步的javascript与xml技术）是一种有效利用javascript和dom的操作，以达到局部web页面的提花和加载的异步通信手段。和以前的同步通信相比，他只更新一部分页面，相应中传输的数据量会因此的减少。

ajax轮询的原理是，让浏览器每隔一段时间就发送一次请求，询问服务器是否有新消息。而利用ajax实时的从服务器获取内容，有可能导致大量的请求产生。

长轮询原理和ajax轮询差不多，都是采用轮询的方式，不过采用的是阻塞模型。也就是说，当客户端发起连接后，如果服务器端内容没有更新，将响应至于挂起状态，一直不回复response给客户端，知道有内容更新，再返回响应。

http的特点：被动性，请求只能由客户端发起。服务器端不能主动联系客户端。

ajax轮询需要服务器有很快的处理速度和资源。（速度）

长轮询需要有很高的并发，也就是说同时接待客户的能力。（场地大小）WebSocket

WebSocket是HTML5出的东西（协议），是HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。它基于TCP传输协议，并复用HTTP的握手通道。

一旦web服务器和客户端建立起websocket协议的通信连接，之后所有的通信都依靠这个专用连接进行。只需要经过一次HTTP请求，就可以做到源源不断的信息传送了。

通过在请求首部中设置Connection: Upgrade来使用websocket协议

websocket协议具有以下的特点推送功能支持服务器端向客户端推送功能。服务器可以直接发送数据而不用等待客户端的请求。减少通信量只要建立起websocket连接，就一直保持连接，在此期间可以源源不断的传送消息，直到关闭请求。也就避免了HTTP的非状态性。

和http相比，不但每次连接时的总开销减少了，而且websocket的首部信息量也小，通信量也减少了。

支持双向通信，实时性更强。更好的二进制支持。较少的控制开销。

连接创建后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较小。在不包含头部的情况下，服务端到客户端的包头只有2~10字节（取决于数据包长度），客户端到服务端的的话，需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部。支持扩展ws协议定义了扩展，用户可以扩展协议，或者实现自定义的子协议。（比如支持自定义压缩算法等）

CSS部分：

css3新增：

CSS3边框如border-radius，box-shadow等；CSS3背景如background-size，background-origin等；CSS3 2D，3D转换如transform等；CSS3动画如animation等。

CSS3的新特性中，在布局方面新增了flex布局，在选择器方面新增了例如first-of-type,nth-child等选择器，在盒模型方面添加了box-sizing来改变盒模型，在动画方面增加了animation，2d变换，3d变换等，在颜色方面添加透明，rbga等，在字体方面允许嵌入字体和设置字体阴影，最后还有媒体查讯等.

css的两种盒模型

在标准的盒子模型中，width指content部分的宽度

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

如果想要切换盒模型也很简单，这里需要借助css3的box-sizing属性

box-sizing: content-box 是W3C盒子模型

box-sizing: border-box 是IE盒子模型

box-sizing的默认属性是content-box

垂直居中方式：

使用定位和负外边距，父元素，子元素固定宽高，父相子绝，子元素top属性50%,上外边距margin-top为子元素本身高度的一半（这种方式需要知道子元素的高度）

使用定位和transform，父元素固定宽高，父相子绝，子元素top属性50%,transform属性为Y轴方向偏移-50%

使用定位自动外边距，父元素，子元素固定宽高，父相子绝，子元素top，bottom属性为0,margin在垂直方向auto

使用flex布局，父元素，子元素固定宽高，父元素使用flex布局，设置align-items属性为center

使用flex布局，父元素，子元素固定宽高，父元素使用flex布局，设置flex-direction属性（设置主轴方向）为column（纵轴）,justify-content属性设置主轴上的对齐方式为center

使用 display：table-cell ，父元素固定宽高，父元素设置display:table，子元素设置display:table-cell，并且vertical-align:middle

transition和animation的区别：

animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。

animation属性

name 设置动画的名称，

duration 设置动画完成的周期，

timing-function 设置动画的速度曲线，

delay 设置动画什么时候开始，

iteration-count 设置动画播放的次数，

direction 规定下一个周期是否逆向的播放，

play-state 动画是否正在进行或者暂停，

fill-mode 设置动画停了之后位置什么状态transition属性

property 去设置过渡效果的属性名称，

duration 设置过渡效果的周期，

timing-function 规定速度效果的速度曲线，

delay 设定过渡效果什么时候开始；区别：

transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 @keyframe 结合可以设置中间帧的一个状态；

animation 配合 @keyframe 可以不触发事件就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；

animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；

animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；

在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 animation 的时候这样就可以改变很多属性，像我们改变了 width、height、position 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 transform 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了；

transition、transform和translate这三者

transform是转换，指的是改变所在元素的外观，它有很多种手段(转换函数)来改变外观，例如位移、缩放、旋转等，而其中的位移的函数名就叫translate，所以说，translate是transform的一部分。

transform: [转换函数];

属性函数：

translate(x, y)：元素位移，元素偏移的x轴和y轴距离，可为负

scale(x, y)：元素缩放，元素x轴和y轴缩放的倍数，小于1为缩小，大于1位放大，小于0效果和为0时相等

rotate(angle)：元素旋转，旋转的角度，单位deg，顺时针旋转

transform: translate(-10px, 10px);//当前元素往上移动 10 像素，往右移动 10 像素。 transform: translate(10px, 10px) rotate(10deg);//指定多个转换效果。复制代码

transition是过渡，指的是某个CSS属性值如何平滑的进行改变，就是平常说的动效。而transform是没有动画效果，你改变了它的值，元素的样子就唰的改变了。

transition: [属性名] [持续时间] [速度曲线] [延迟时间]; transition: height 2s ease .5s;//高度属性的值改变时，延迟 0.5 秒后以 ease 曲线进行过渡，持续2秒。复制代码

visibility=hidden, opacity=0，display:none：

opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的方法。

visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件。

display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

position属性比较：

固定定位fixed：

元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。

相对定位relative：相对于他原本的位置进行移动

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位absolute：相对于他的父元素进行移动

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

粘性定位sticky：

先是相对于他原本的位置进行移动，然后在超出目标区域后，固定在目标位置，即先按照relative定位方式定位，然后按照fix定位方式定位。元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

默认定位Static：

默认值。没有定位，元素出现在正常的流中（忽略top, bottom, left, right 或者 z-index 声明）。

继承定位inherit:

规定应该从父元素继承position 属性的值。

浮动清除的几种方法：

方法一：使用带clear属性的空元素

在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。

方法二：使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

方法三：给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

方法四：使用邻接元素处理

什么都不做，给浮动元素后面的元素添加clear属性。

方法五：使用CSS的:after伪元素

结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

CSS选择器有哪些，优先级呢：

CSS的四种基本选择器和四种高级选择器：

基本选择器：

标签选择器：针对一类标签

P{}：选择所有<p>元素

ID选择器：针对某一个特定的标签使用

#id{}：选择所有id="firstname"的元素

类选择器：针对你想要的所有标签使用

.class{}：选择所有class="intro"的元素

通用选择器（通配符）：针对所有的标签都适用（不建议使用）

：选择所有元素

高级选择器：

后代选择器：用空格隔开

div p：选择<div>元素内的所有<p>元素

div>p：选择所有父级是 <div> 元素的 <p> 元素

div+p：选择所有紧接着<div>元素之后的<p>元素

属性选择器：带有属性或指定属性内容

[target]：选择所有带有target属性元素

[target=-blank]：选择所有使用target="-blank"的元素

[title~=flower]：选择标题属性包含单词"flower"的所有元素

[lang|=en]：选择 lang 属性以 en 为开头的所有元素

交集选择器：用.隔开

h3.special：选择<h3>标签并且类是.special的标签

并集选择器（分组选择器）：用逗号隔开

div,p：选择所有<div>元素和<p>元素

p,h1,#mytitle,.one：选择所有带有p,h1,id="mytitle",class="one"的标签

伪类选择器：

静态伪类选择器：

a:link：选择所有未访问链接

a:visited：选择所有访问过的链接

动态伪类选择器：

a:active：选择活动链接

a:hover：选择鼠标在链接上面时

input:focus：选择具有焦点的输入元素

序伪类选择器：

p:first-letter：选择每一个p元素的第一个字母

p:first-line：选择每一个p元素的第一行

p:first-child：指定只有当p元素是其父级的第一个子级的样式。

p:before：在每个p元素之前插入内容

p:after：在每个p元素之后插入内容

Css3新增选择器： p~ul：选择p元素之后的每一个ul元素

a[src^"ttps"]：选择每一个src属性的值以"https "开头的元素

a[src$=". pdf"]：选择每一个src属性的值以” pdf结尾的元素

a[src*=" runoob"]：选择每一个src属性的值包含子字符串" 'runoob"的元素

p:first-of-type：选择每个p元素是其父级的第一个p元素

p:last-of-type：选择每个p元素是其父级的最后一个p元素

p:only-of-type：选择每个p元素是其父级的唯一p元素

p:only-child：选择每个p元素是其父级的唯一子元素

p:nth-child(2)：选择每个p元素是其父级的第二个子元素

p::nth-child(-n+3):选择每个p元素是其父级的前三个子元素

p:th-last-child(2)：选择每个p元素的是其父级的第二个子元素,从最后一个子项计数

p:th-of-type(2)：选择每个p元素是其父级的第二个p元素

p:nth-last-of-type(2)：选择每个p元素的是其父级的第二个p元素，从最后一个子项计数

p:last-child：选择每个p元素是其父级的最后-个子级。

.root：选择文档的根元素

p:empty：选择每个没有任何子级的p元素(包括文本节点)

#news:target：选择当前活动的#news元素(包含该锚名称的点击的URL)

inputenabled：选择每一个已启用的输入元素

input:disabled：选择每一个禁用的输入元素

input.checked：选择每个选中的输入元素

:not(p)：选择每个并非p元素的元素

:selection：匹配元素中被用户选中或处于高亮状态的部分

:out-of-range：匹配值在指定区间之外的input元素

:in-range：匹配值在指定区间之内的input元素

.read-write：用于匹配可读及可写的元素

:read-only：用于匹配设置"readonly" (只读)属性的元素

:optional：用于匹配可选的输入元素

.required：用于匹配设置了"required" 属性的元素

valid：用于匹配输入值为台法的元素

cinvalid：用于匹配输入值为非法的元素

Css选择器优先级：

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

作为style属性写在元素内的样式

id选择器

类选择器

元素选择器

通配符选择器

浏览器自定义或继承

margin塌陷和合并问题：

首先，margin塌陷是相对于父子级关系的两个元素，而margin合并是相对两个兄弟级关系的两个元素

两个兄弟级关系的元素，垂直方向上的margin，其外边距会发生重叠现象，两者两个的外边距取的是两个所设置margin的最大值，就是所说的margin合并问题

两个父子级关系的元素，垂直方向上的margin会粘合在一起，外层和模型的margin-top取两个元素中margin-top的最大值，发生margin塌陷的内层元素相对于整个文档移动

解决方案：两者都可以通过触发BFC来解决

什么是BFC：

直译成：块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。

BFC区域不会与float box重叠。

BFC是页面上的一个独立容器，子元素不会影响到外面。

计算BFC的高度时，浮动元素也会参与计算。

并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

哪些元素会生成BFC：

float不为none的元素

position为fixed和absolute的元素

display为inline-block、table-cell、table-caption，flex，inline-flex的元素

overflow不为visible的元素

inline-block、inline和block的区别：

Block是块级元素，其前后都会有换行符，能设置宽度，高度，margin/padding水平垂直方向都有效。

Inline：设置width和height无效，margin在竖直方向上无效，padding在水平方向垂直方向都有效，前后无换行符

Inline-block：能设置宽度高度，margin/padding水平垂直方向都有效，前后无换行符

px、em、rem、%、vw、vh、vm这些单位的区别

em:参考的是父元素的font-size，具有继承的特点，如果自身定义了font-size则按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值

rem:相对于根元素html，可以设置根元素html的font-size为10px，则1.2em就是12px；

vw:css3新单位，view width的缩写，是指可视窗口的高度，假如宽度是1200px,则10vw就是120px；举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

Vh:类似vw，指的是可视窗口的高度。

Vm:相对于视口的宽度或高度中较小的那个，其中最小的单位被均分为100个单位，举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。

flex布局：

常用的Flex属性：

display：指定 HTML 元素盒子类型。

flex-direction：指定了弹性容器中子元素的排列方式

row：横向从左到右排列（左对齐），默认的排列方式。

row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

column：纵向排列。

column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content：设置弹性盒子元素在主轴（横轴）方向上的对齐方式。

flex-start：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

space-between：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

align-items：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长 + 度）。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

flex-wrap：设置弹性盒子的子元素超出父容器时是否换行。

nowrap - 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。

wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行

wrap-reverse -反转 wrap 排列。

align-content：修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐。

stretch - 默认。各行将会伸展以占用剩余的空间。

flex-start - 各行向弹性盒容器的起始位置堆叠。

flex-end - 各行向弹性盒容器的结束位置堆叠。

center -各行向弹性盒容器的中间位置堆叠。

space-between -各行在弹性盒容器中平均分布。

space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

flex-flow：flex-direction 和 flex-wrap 的简写

order：设置弹性盒子的子元素排列顺序。

integer：用整数值来定义排列顺序，数值小的排在前面。可以为负值。

align-self：在弹性子元素上使用。覆盖容器的 align-items 属性。

auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

flex：设置弹性盒子的子元素如何分配空间。

auto: 计算值为 1 1 auto

initial: 计算值为 0 1 auto

none：计算值为 0 0 auto

inherit：从父元素继承

[ flex-grow ]：定义弹性盒子元素的扩展比率。

[ flex-shrink ]：定义弹性盒子元素的收缩比率。

[ flex-basis ]：定义弹性盒子元素的默认基准值。

流式布局与响应式布局的区别：

常用的Flex属性：

流式布局：使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容自动填充。

响应式布局，利用css3中的Media Query(媒介查询)，通过查询screen的宽度来指定某个宽度区间的网页布局超小屏幕(移动设备):768px以下小屏设备：768px-992px;

中屏设备：992-1200px；

宽屏设备：1200px以上

由于响应式布局开发显得繁琐，一般使用第三方响应式框架来完成，比如bootstrap来完成一部分工作

三栏布局的实现方式：

常用的Flex属性：

浮动

三栏设置高度，左右栏固定宽度，并分别设置左右浮动

优点：兼容性好

缺点：浮动脱离文档流，需要做清除浮动的处理

绝对定位

父级元素设置绝对定位，左右栏固定宽度，左栏设置left:0；右栏设置right:0；中间栏设置left和right分别为左右栏的宽度

优点：快捷，不容易出问题

缺点：布局脱离文档流，子元素也必须脱离文档流，可使用性较差

Flex布局

父元素设置display:flex，左右栏固定宽度，中间栏设置flex:1，占据剩余空间

优点：较为完美，移动端布局多属flex

表格布局

父元素设置display:table,左右中三栏全部设置display:table-cell,左右栏固定宽度

优点：兼容性好

缺点：操作繁琐，当其中一个单元格高度变大，其他单元格高度会随之变大

网格布局

父元素设置display:grid，固定宽度，grid-template-rows: 100px;grid-template-columns: 300px auto 300px;优点：可以做许多复杂的事情，代码比较简洁

缺点：新技术，低版本浏览器兼容性不好