1.什么是盒模型
盒模型（内容（content）,内边距（padding）,边框（border）,外边距（margin））,值得注意的是，块级元素可以设置宽高，内边距，边框，外边距 行内元素宽高自动，并排显示。
2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？
CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，
如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p（3）常见的空元素：
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>3.简述src和href的区别
src和href都是属于外部资源的引用，像一些图片，css文件，js文件，或者其他的web页面
他们的之间的主要关系可以用这样的一句话来概括：src用于替换这个元素，而href用于建立这个标签与外部资源的关系
href (Hypertext Reference) 表示超文本引用，href这个属性指定web资源的位置，从而定义当前元素（如锚点a）或当前文档（如链接）与目标锚点或目标资源之间的联系
src (Source)源这个属性是将资源嵌入到当前文档中元素所在的位置
当浏览器解析到src引用的js文件代码时，页面的加载和解析都会暂停直到浏览器拿到并执行完这个js文件。这就像是把js文件里的内容全部注入到这个script标签中，类似于img，img标签是一个空标签，它的内容就是由src这个属性定义，浏览器会暂停加载直到这个图片加载完成。这也是为什么要将js文件的加载放在body最后的原因（在前面）
4.什么是css Hack
css hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差(比如我们常说错位)的处理。
5.什么叫优雅降级和渐进增强
渐进增强 progressive enhancement： 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 区别： a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给 b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要 c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
6.px和em的区别
一、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
二、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
三、em是相对于其父元素来设置字体大小的，一般都是以<body>的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
总之：对于em和rem的区别一句话概括：
em相对于父元素，rem相对于根元素
7.HTML5为什么只需要写<!DOCTYPE HTML>?
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。BUT，HTML5不是的。
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。作用：告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以怪异模式呈现。
8.Http的状态码有哪些
200 OK //客户端请求成功
301 Moved Permanently（永久移除)，请求的 URL 已移走。Response 中应该包含一个 Location URL, 说明资
源现在所处的位置
302 found 重定向
400 Bad Request //客户端请求有语法错误，不能被服务器所理解
401 Unauthorized //请求未经授权，这个状态代码必须和 WWW-Authenticate 报头域一起使用
403 Forbidden //服务器收到请求，但是拒绝提供服务
404 Not Found //请求资源不存在，eg：输入了错误的 URL
500 Internal Server Error //服务器发生不可预期的错误
503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常
9.一次完整的HTTP事务是怎么一个过程
域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户
11.浏览器是如何渲染页面的
解析文档构建DOM树--构建渲染树----布局与绘制渲染树
- rident 内核：IE，搜狗高速浏览器等
- Gecko 内核：Mozilla Firefox（火狐浏览器），Netscape6及以上版本
- Webkit 内核：Safari 、曾经的 Chrome
- Presto 内核：Opera 7到Opera12.17（欧朋浏览器）之间的版本采用的内核
- Blink 内核：现在 Chrome 内核是 Blink，Opera现已改用Google Chrome的Blink内核
14.如何优化图像，图像格式的区别
优化图像：
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页面上。
15.列举你了解Html5. Css3 新特性
- 合并js文件
- 合并css文件
- 雪碧图的使用(css sprite)
- 使用base64表示简单的图片
1.2减小资源体积：可以通过以下几个方面进行实施：
- gzip压缩
- js混淆
- css压缩
- 图片压缩
1.3缓存：可以通过以下几个方面来描述：
- DNS缓存
- CDN部署与缓存
- http缓存
1.4移动端优化：使用以下几种方式来加快移动端网络方面的优化：
- 使用长cache，减少重定向
- 首屏优化，保证首屏加载数据小于14kb
- 不滥用web字体
优化网页渲染：
- css的文件放在头部，js文件放在尾部或者异步
- 尽量避免內联样式
18.如何实现同一个浏览器多个标签页之间的通信
https://blog.csdn.net/liwenfei123/article/details/79996161 见
19.浏览器的存储技术有哪些
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进行层次分级。
定位为absolute的层脱离正常文档流，但与relative的区别是其在正常流中的位置不再存在。
这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。
4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。21.尽可能多的写出浏览器兼容性问题
方法一:
绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）
方法二:
绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值
方法三：
绝对定位方法：绝对定位下top left right bottom 都设置0，margin:auto
方法四:
flex布局方法：当前div的父级添加flex css样式
.box{ height:800px; -webkit-display:flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; border:1px solid #ccc;}div.child{ 600px; height:600px; background-color:red;}方法五:
table-cell实现水平垂直居中: table-cell middle center组合使用
display: table-cell; vertical-align: middle; text-align: center;border: 1px solid deeppink;
overflow: hidden;
}
3.使用after伪元素清除浮动（推荐使用）
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
4.使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
27.刷新页面，js请求一般会有哪些地方有缓存处理
28.如何对网站的文件和资源进行优化
29.你对网页标准和W3C重要性的理解
30.Http和https的区别
31.data-属性的作用
32.如何让Chrome浏览器显示小于12px的文字
33.哪些操作会引起页面回流（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
src和href都是属于外部资源的引用，像一些图片，css文件，js文件，或者其他的web页面
他们的之间的主要关系可以用这样的一句话来概括：src用于替换这个元素，而href用于建立这个标签与外部资源的关系
href (Hypertext Reference) 表示超文本引用，href这个属性指定web资源的位置，从而定义当前元素（如锚点a）或当前文档（如链接）与目标锚点或目标资源之间的联系
src (Source)源这个属性是将资源嵌入到当前文档中元素所在的位置
当浏览器解析到src引用的js文件代码时，页面的加载和解析都会暂停直到浏览器拿到并执行完这个js文件。这就像是把js文件里的内容全部注入到这个script标签中，类似于img，img标签是一个空标签，它的内容就是由src这个属性定义，浏览器会暂停加载直到这个图片加载完成。这也是为什么要将js文件的加载放在body最后的原因（在前面）