浏览器htmlcss面试题

浏览器/html/css面试题

持续更新

1.什么是盒模型

盒模型是规定了网页元素如何显示，元素间的相互关系。
盒模型的组成为分为以下几个部分：
content（内容区）：元素的宽和高；
border（边框区）：盒子的边缘；
padding（填充区）：为了使页面布局看起来美观大方，盒子里的内容区会用padding来解决父元素和子元素的位置关系；
margin（外边界区）：控制同辈元素之间的位置关系。

2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？

• 行内元素有：a b span img input select strong
• 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4… p
• 空元素：br hr img input link meta
• 行内元素不可以设置宽高，不独占一行
• 块级元素可以设置宽高，独占一行

3.简述src和href的区别

1、请求资源类型不同
（1） href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。

（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；

2、作用结果不同
（1）href 用于在当前文档和引用资源之间确立联系；

（2）src 用于替换当前内容；

3、 浏览器解析方式不同
（1）若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

（2）当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

4.什么是css Hack

css hack的意思是浏览器兼容

CSS hack用来解决有些css属性在不同浏览器中显示的效果不一样的问题

5.什么叫优雅降级和渐进增强

渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

6.px和em的区别

px：绝对单位，页面按精确像素展示。

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

7.HTML5 为什么只需写

HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。

8.Http的状态码有哪些

• 200 欢迎回来，主人 （正常；请求已完成。 ）
• 301 人家搬家了 （已移动 — 请求的数据具有新的位置且更改是永久的。 ）
• 307 不是这里，换个地方啦 （重新请求的URL，客户端自动重新请求新的地址）
• 400 不要把奇怪的东西给人家嘛 （错误请求 — 请求中有语法问题，或不能满足请求。 ）
• 403 这里不可以啦！（禁止 — 即使有授权也不需要访问。 ）
• 404 这里什么都没有 — 人家是平的啦。 （找不到 — 服务器找不到给定的资源；文档不存在。 ）
• 405 打开方式不对 （资源被禁止 ）
• 414 这… 太长了啦 （请求 - URI 太长 ）
• 418 我就是个杯具啊 （我是茶壶）
• 500 服务姬坏掉了啦 （内部错误 — 因为意外情况，服务器不能完成请求。 ）
• 503 不要…人家还没准备好啦 （无法获得服务 — 由于临时过载或维护，服务器无法处理请求。 ）
• 101 服务姬傲娇中 （服务器将遵从客户的请求转换到另外一种协议）
• 100 人家… 还要… （初始的请求已经接受，客户应当继续发送请求的其余部分。）

2xx 成功

• 200 正常；请求已完成。
• 201 正常；紧接 POST 命令。
• 202 正常；已接受用于处理，但处理尚未完成。
• 203 正常；部分信息 — 返回的信息只是一部分。
• 204 正常；无响应 — 已接收请求，但不存在要回送的信息。

3xx 重定向

• 301 已移动 — 请求的数据具有新的位置且更改是永久的。
• 302 已找到 — 请求的数据临时具有不同 URI。
• 303 请参阅其它 — 可在另一 URI 下找到对请求的响应，且应使用 GET 方法检索此响应。
• 304 未修改 — 未按预期修改文档。
• 305 使用代理 — 必须通过位置字段中提供的代理来访问请求的资源。
• 306 未使用 — 不再使用；保留此代码以便将来使用。

4xx 客户机中出现的错误

• 400 错误请求 — 请求中有语法问题，或不能满足请求。
• 401 未授权 — 未授权客户机访问数据。
• 402 需要付款 — 表示计费系统已有效。
• 403 禁止 — 即使有授权也不需要访问。
• 404 找不到 — 服务器找不到给定的资源；文档不存在。
• 407 代理认证请求 — 客户机首先必须使用代理认证自身。
• 415 介质类型不受支持 — 服务器拒绝服务请求，因为不支持请求实体的格式。

5xx 服务器中出现的错误

• 500 内部错误 — 因为意外情况，服务器不能完成请求。

• 501 未执行 — 服务器不支持请求的工具。

• 502 错误网关 — 服务器接收到来自上游服务器的无效响应。

• 503 无法获得服务 — 由于临时过载或维护，服务器无法处理请求。

• HTTP 400 - 请求无效

• HTTP 401.1 - 未授权：登录失败

• HTTP 401.2 - 未授权：服务器配置问题导致登录失败

• HTTP 401.3 - ACL 禁止访问资源

• HTTP 401.4 - 未授权：授权被筛选器拒绝

• HTTP 401.5 - 未授权：ISAPI 或 CGI 授权失败

• HTTP 403 - 禁止访问

• HTTP 403 - 对 Internet 服务管理器 (HTML) 的访问仅限于 Localhost

• HTTP 403.1 禁止访问：禁止可执行访问

• HTTP 403.2 - 禁止访问：禁止读访问

• HTTP 403.3 - 禁止访问：禁止写访问

• HTTP 403.4 - 禁止访问：要求 SSL

• HTTP 403.5 - 禁止访问：要求 SSL 128

• HTTP 403.6 - 禁止访问：IP 地址被拒绝

• HTTP 403.7 - 禁止访问：要求客户证书

• HTTP 403.8 - 禁止访问：禁止站点访问

• HTTP 403.9 - 禁止访问：连接的用户过多

• HTTP 403.10 - 禁止访问：配置无效

• HTTP 403.11 - 禁止访问：密码更改

• HTTP 403.12 - 禁止访问：映射器拒绝访问

• HTTP 403.13 - 禁止访问：客户证书已被吊销

• HTTP 403.15 - 禁止访问：客户访问许可过多

• HTTP 403.16 - 禁止访问：客户证书不可信或者无效

• HTTP 403.17 - 禁止访问：客户证书已经到期或者尚未生效

• HTTP 404.1 - 无法找到 Web 站点

• HTTP 404 - 无法找到文件

• HTTP 405 - 资源被禁止

• HTTP 406 - 无法接受

• HTTP 407 - 要求代理身份验证

• HTTP 410 - 永远不可用

• HTTP 412 - 先决条件失败

• HTTP 414 - 请求 - URI 太长

• HTTP 500 - 内部服务器错误

• HTTP 500.100 - 内部服务器错误 - ASP 错误

• HTTP 500-11 服务器关闭

• HTTP 500-12 应用程序重新启动

• HTTP 500-13 - 服务器太忙

• HTTP 500-14 - 应用程序无效

• HTTP 500-15 - 不允许请求 global.asa

• Error 501 - 未实现

• HTTP 502 - 网关错误

9.一次完整的HTTP事务是怎么一个过程

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求，浏览器得到html代码

e. 浏览器解析html代码，并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

10.HTTPS是如何实现加密

HTTPS就是使用SSL/TLS协议进行加密传输，让客户端拿到服务器的公钥，然后客户端随机生成一个对称加密的秘钥，使用公钥加密，传输给服务端，后续的所有信息都通过该对称秘钥进行加密解密，完成整个HTTPS的流程

11.浏览器是如何渲染页面的

1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。

2.构建渲染树（Render Tree）。

3.页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。

3.1重绘（repaint）：屏幕的一部分要重绘。渲染树节点发生改变，但不影响该节点在页面当中的空间位置及大小。譬如某个div标签节点的背景颜色、字体颜色等等发生改变，但是该div标签节点的宽、高、内外边距并不发生变化，此时触发浏览器重绘（repaint）。

3.2重排（reflow）：也有称回流，当渲染树节点发生改变，影响了节点的几何属性（如宽、高、内边距、外边距、或是float、position、display：none;等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。譬如JS为某个p标签节点添加新的样式：“display:none;”。导致该p标签被隐藏起来，该p标签之后的所有节点位置都会发生改变。此时浏览器需要重新生成渲染树，重新布局，即重排（reflow）。

注意：重排必将引起重绘，而重绘不一定会引起重排。Reflow 的成本比 Repaint 的成本高得多的多。

何时回引起重排？

当页面布局和几何属性改变时就需要重排。下述情况会发生浏览器重排：

1、添加或者删除可见的DOM元素；

2、元素位置改变——display、float、position、overflow等等；

3、元素尺寸改变——边距、填充、边框、宽度和高度

4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

5、页面渲染初始化；

6、浏览器窗口尺寸改变——resize事件发生时；

3.3如何减少和避免重排

1. 直接改变className，如果动态改变样式，则使用cssText（考虑没有优化的浏览器）；

2. 让要操作的元素进行”离线处理”，处理完后一起更新；

a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
b) 使用display:none技术，只引发两次回流和重绘；
c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

3.不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存；

12.浏览器的内核有哪些？分别有什么代表的浏览器

• Trident 内核：IE，搜狗高速浏览器等
• Gecko 内核：Mozilla Firefox（火狐浏览器），Netscape6及以上版本
• Webkit 内核：Safari 、曾经的 Chrome
• Presto 内核：Opera 7到Opera12.17（欧朋浏览器）之间的版本采用的内核
• Blink 内核：现在 Chrome 内核是 Blink，Opera现已改用Google Chrome的Blink内核

13.页面导入时，使用link和@import有什么区别

1.老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。 　　
2.加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS 的方式就是使用@import，一边下载一边浏览梦之都网页时，就会出现上述问题）。 　　
3.兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。 　　
4.使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

14.如何优化图像，图像格式的区别

优化图像：

1、不用图片，尽量用css3代替。

2、 使用矢量图SVG替代位图。

3、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。

4、按照HTTP协议设置合理的缓存。

5、使用字体图标webfont、CSS Sprites等。

6、用CSS或JavaScript实现预加载。

7、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。

图像格式的区别

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通道透明;

15.列举你了解Html5. Css3 新特性

1、拖拽释放(Drap and drop) API ondrop

2、自定义属性data-id

3、语义化更好的内容标签(header,nav,footer ,aside, article, section)

4、地理(Geolocation) API

5、表单控件 calendar , date , time , email , url , search , tel , file , number

6、新的技术 webworker, websocket , Geolocation

颜色: 新增RGBA , HSLA模式

文字阴影(text-shadow)

边框: 圆角(border-radius) 边框阴影 : box-shadow

盒子模型: box-sizing

背景:background-size background-origin background-clip

渐变: linear-gradient , radial-gradient

过渡 : transition 可实现动画

自定义动画 animate @keyfrom

媒体查询 多栏布局 @media screen and (width:800px) {…}

border-image

2D转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)

3D转换

字体图标 font-face

弹性布局flex

16.可以通过哪些方法优化css3 animation渲染

CSS动画属性会触发整个页面的重排，重绘,box-shadow和gradients的性能杀手

在使用css3 transtion做动画效果时，优先选择transform，尽量不要使用height，width，margin和padding。

17.列举几个前端性能方面的优化

1、网络方面

减少http请求：合并js文件/合并css文件/雪碧图的使用(css sprite)/使用base64表示简单的图片

减小资源体积：gzip压缩/js混淆/css压缩/图片压缩

缓存：DNS缓存 /CDN部署与缓存 /http缓存

移动端优化：/使用长cache，减少重定向/首屏优化，保证首屏加载数据小于14kb/不滥用web字体

2、渲染和DOM操作方面

优化网页渲染： css的文件放在头部，js文件放在尾部或者异步、尽量避免內联样式

DOM操作优化：避免在document上直接进行频繁的DOM操作、使用classname代替大量的内联样式修改、对于复杂的UI元素，设置position为absolute或fixed、尽量使用css动画、使用requestAnimationFrame代替setInterval操作、适当使用canvas、尽量减少css表达式的使用、使用事件代理

操作细节注意：避免图片或者frame使用空src、在css属性为0时，去掉单位、禁止图像缩放、正确的css前缀的使用、移除空的css规则、对于css中可继承的属性，如font-size，尽量使用继承，少一点设置、缩短css选择器，多使用伪元素等帮助定位

移动端优化： 长列表滚动优化、函数防抖和函数节流、使用touchstart、touchend代替click、HTML的viewport设置、开启GPU渲染加速

3、数据方面

图片加载处理：图片预加载、图片懒加载、首屏加载时进度条的显示

异步请求的优化：使用正常的json数据格式进行交互、部分常用数据的缓存、数据埋点和统计

https://www.cnblogs.com/dream111/p/13458857.html

18.如何实现同一个浏览器多个标签页之间的通信

websocket通讯

WebSocket是HTML5新增的协议，它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道。

定时器setInterval+cookie

使用localstorage

19.浏览器的存储技术有哪些

cookie
cookie会随着每次HTTP请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K。

Flash ShareObject
这种方式能能解决上面提到的cookie存储的两个弊端，而且能够跨浏览器，应该说是目前最好的本地存储方案。不过，需要在页面中插入一个Flash，当浏览器没有安装Flash控件时就不能用了。所幸的是，没有安装Flash的用户极少。
缺点：需要安装Flash插件。

Google Gear
Google开发出的一种本地存储技术。
缺点：需要安装Gear组件。

userData
IE浏览器可以使用userData来存储数据，容量可达到640K，这种方案是很可靠的，不需要安装额外的插件。缺点：它仅在IE下有效。

sessionStorage
使用于Firefox2+的火狐浏览器，用这种方式存储的数据仅窗口级别有效，同一个窗口（或者Tab）页面刷新或者跳转，都能获取到本地存储的数据，当新开窗口或者页面时，原来的数据就失效了。
缺点：IE不支持、不能实现数据的持久保存。

localStorage

localStorage是Web Storage互联网存储规范中的一部分，现在在Firefox 3.5、Safari 4和IE8中得到支持。
缺点：低版本浏览器不支持。

20.css定位方式

1、static（静态定位）：

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

2、relative（相对定位）：

定位为relative的元素脱离正常的文档流，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有移动。

通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级 。

3、absolute（绝对定位）：

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

4、fixed（固定定位）：

生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

21.尽可能多的写出浏览器兼容性问题

浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

问题症状：IE6里的间距比超过设置的间距

解决方案：在display:block;后面加入display:inline;display:table;

浏览器兼容问题五：图片默认有间距

浏览器兼容问题六：标签最低高度设置min-height不兼容

浏览器兼容问题七：透明度的兼容CSS设置

22.垂直上下居中的方法

1、Transforms 变形

这是最简单的方法，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上

top: 50%; left: 50%;

2、在父级元素上面加上上面3句话，就可以实现子元素水平垂直居中。(flex)

3.使用after伪元素清除浮动（推荐使用）

4.使用before和after双伪元素清除浮动

23.响应式布局原理

25.清除浮动的方法

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

26.http协议和tcp协议

TCP协议对应于传输层，而HTTP协议对应于应用层，从本质上来说，二者没有可比性。

27.刷新页面，js请求一般会有哪些地方有缓存处理

1. DNS缓存：短时间内多次访问某个网站，在限定时间内，不用多次访问DNS服务器。
2. CDN缓存：内容分发网络（人们可以在就近的代售点取火车票了，不用非得到火车站去排队）
3. 浏览器缓存：浏览器在用户磁盘上，对最新请求过的文档进行了存储。
4. 服务器缓存：将需要频繁访问的Web页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度

28.如何对网站的文件和资源进行优化

1.文件合并（目的是减少http请求）：使用css sprites合并图片，一个网站经常使用小图标和小图片进行美化，但是很遗憾这些小图片占用了大量的HTTP请求，因此可以采用sprites的方式把所有的图片合并成一张图片 ，可以通过相关工具在线合并，也可以在ps中合并。

2.使用CDN（内容分发网络）加速，降低通信距离。

3.缓存的使用，添加Expire/Cache-Control头。

4.启用Gzip压缩文件。

压缩js和css可以通过服务器动态脚本进行也可以更简单的使用apache服务器可以在网站根目录 .htaccess 中加入以下代码AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/json

Header append Vary Accept-Encoding

这段代码的意思是调用服务器的压缩模块对以上文件输出之前进行GZIP压缩，gzip的压缩之后所有文件都应该能减少30%以上的体积。特别是对于大量使用js的博客有了gzip保驾护航之后速度能提高不少。

5.将css放在页面最上面。

6.将script放在页面最下面。

7.避免在css中使用表达式。

8.将css, js都放在外部文件中。

9.减少DNS查询。

10.文件压缩：最小化css, js，减小文件体积。

11.避免重定向。

12.移除重复脚本。

13.配置实体标签ETag。

14.使用AJAX缓存，让网站内容分批加载，局部更新。

29.你对Web(网页标准)和W3C重要性的理解

web标准

web标准主要分为结构、表现、行为3部分

结构：指我们平时在body里面写的标签，主要是由HTML标签组成

表现：指更加丰富HTML标签样式，主要由CSS样式组成

行为：指页面和用户的交互，主要由JS部分组成

W3C

W3C对web标准提出了规范化的要求，即代码规范

对结构的要求

1、标签字母要小写

2、标签要闭合

3、标签不允许随意嵌套

对表现和行为的要求

1、建议使用外链CSS和js脚本，实现结构与表现分离、结构与行为分离，能提高页面的渲染效率，更快地显示网页内容

30.Http和https的区别

1、HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https 。)

2、HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。

3、HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

31.data-属性的作用

data-属性用于储存私有的自定义数据，data-属性可以让我们在所有html元素上增加自定义data属性，存储的data属性能被JavaScript调用。
data-属性不应该包含任何大写字母，并且在data-后必须最少拥有一个字符，属性值可以是任意字符串

32.如何让Chrome浏览器显示小于12px的文字

-webkit-transform: scale(0.5);

33.哪些操作会引起页面回流（Reflow）

reflow是指浏览器为了重新渲染部分或者全部的文档，重新计算文档中的元素的位置和几何构造的过程

回流会导致整个dom树的重新构造，所以是性能的一打杀手

一下操作引起回流

• 改变窗口

• font-size大小改变

• 增加或者溢出样式表

• 内容变化（input中输入文字会导致）

• 激活css伪类

• 操作class属性、新增或减少

• js操作dom

• offset相关属性计算

• 设置style

  reflow和repaint(重绘)是减缓js的几大主要原因，尤其是reflow

重绘和回流是什么

34.CSS预处理器的比较less sass

35.如何实现页面每次打开时清除本页缓存

36.什么是Virtual DOM,为何要用Virtual DOM

37.伪元素和伪类的区别

38.http的几种请求方法和区别

39.前端需要注意哪些SEO

40.的title和alt有什么区别

41.从浏览器地址栏输入url到显示页面的步骤

42.如何进行网站性能优化

43.语义化的理解

44.HTML5的离线储存怎么使用，工作原理能不能解释一下？

45.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

46.iframe有那些缺点？

47.WEB标准以及W3C标准是什么?

48.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

49.HTML全局属性(global attribute)有哪些

50.Canvas和SVG有什么区别？

51.如何在页面上实现一个圆形的可点击区域？

52.网页验证码是干嘛的，是为了解决什么安全问题

53.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

54.CSS选择器有哪些？哪些属性可以继承？

55.CSS优先级算法如何计算？

56.CSS3有哪些新特性？

57.请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

58.用纯CSS创建一个三角形的原理是什么？

59.常见的兼容性问题？

60.为什么要初始化CSS样式

61.absolute的containing block计算方式跟正常流有什么不同？

62.CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

63.display:none与visibility：hidden的区别？

64.position跟display、overflow、float这些特性相互叠加后会怎么样？

65.对BFC规范(块级格式化上下文：block formatting context)的理解？

66.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

67.上下margin重合的问题

68.设置元素浮动后，该元素的display值是多少？

69.移动端的布局用过媒体查询吗？

70.CSS优化、提高性能的方法有哪些？

71.浏览器是怎样解析CSS选择器的？

72.在网页中的应该使用奇数还是偶数的字体？为什么呢？

73.margin和padding分别适合什么场景使用？

74.元素竖向的百分比设定是相对于容器的高度吗？

75.全屏滚动的原理是什么？用到了CSS的哪些属性？

76.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

77.视差滚动效果？

78.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

79.让页面里的字体变清晰，变细用CSS怎么做？

80.position:fixed;在android下无效怎么处理？

81.如果需要手动写动画，你认为最小时间间隔是多久，为什么？

82.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

83.display:inline-block 什么时候会显示间隙？

84.有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

85.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

86.style标签写在body后与body前有什么区别？

87.CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

88.阐述一下CSS Sprites

89、css解决外边距溢出

溢出就是当内容较大，元素区域较小，就会发生溢出效果。外边距溢出就是在父元素没设置边框情况下，为子元素设置外边距，导致了父元素跟着子元素一起产生位移。

如何解决：
1、给父元素添加上边框或上内边距，弊端：会改变父元素实际占地高度。

2、给父元素添加上内边距，弊端(增加了父元素实际占地高度)

3、在第一个子元素前添加空table元素

<div class="d2">       
     <table></table>     <!-- 这里多了页面结构也不太好 -->
     <div class="d3">  
</div> 

4、使用CSS3伪元素::before给父元素添加内容

.d2::before{
     content:"";
     display:table;
}          //这个的原理就是第4种方法