面试篇 —— HTML & CSS
1、根据下面效果图设计页面：
两点要求： 1.自适应宽度，左右两栏固定宽度，中间栏优先加载； 2.要考虑到换肤
参考
1、自适应宽度、左右两栏固定宽度，中间栏优先加载，可以采用双飞翼布局。
1 | <style type="text/css"> |
1 | <style> |
1 | <style> |
1 | <style type="text/css"> |
1 | <style type="text/css"> |
2、根据下图编写一段 XHTML
参考
1 | <div class="dialogPractise"> |
3、请简化下面的 CSS 代码：
1 | margin: 0px; |
参考：
1 | margin: 0; |
1 | margin: 0; |
4、有这么一段 HTML，请挑毛病：
1 | <P> 哥写的不是 HTML，是寂寞。<br><br> 我说：<br>不要迷恋哥，哥只是一个传说 |
参考：
1 | <p>哥写的不是 HTML，是寂寞。</p> |
1 | <p>哥写的不是 HTML，是寂寞。</p> |
1 | <p>哥写的不是 HTML，是寂寞。</p> |
1 | <p> |
5、对 WEB 标准以及 W3C 的理解与认识。
参考：
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、 结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更 广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提 供打印版本而不需要复制内容、提高网站易用性。
6、xhtml 和 html 有什么区别。
参考：
HTML 是一种基本的 WEB 网页设计语言，XHTML 是一个基于 XML 的置标语言。
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。 XHTML 文档必须拥有根元素。
7、Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
参考：
用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的 html 文档。
加入 XMl 声明可触发，解析方式更改为 IE5.5 拥有 IE5.5 的 bug。
声明位于文档中的最前面，处于标签之前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点 无法工作。 DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。
8、行内元素有哪些?块级元素有哪些?CSS 的盒模型?
参考：
CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值， 比如 div 默认 display 属性值为“block”，成为“块级”元素； span 默认 display 属性值为“inline”，是“行内”元素。
块级元素：div p h1 h2 h3 h4 form ul ol li dl dt dd
行内元素: a b br i span input select em input select strong
CSS 盒模型:内容，border ,margin，padding
9、CSS 引入的方式有哪些? link 和@import 的区别是?
参考：
1 | 内联 内嵌 外链 导入。 |
10、CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和 important 哪个优先 级高?
参考：
标签选择符 类选择符 id 选择符 继承不如指定 Id>class>标签选择 后者优先级高。
11、前端页面有哪三层构成，分别是什么?作用是什么?
参考：
结构层 Html 表示层 CSS 行为层 js
12、css 的基本语句构成是?
参考：
选择器{属性 1:值 1;属性 2:值 2;„„}
13、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
参考：
Ie(Trident) 火狐（Gecko） 谷歌（Blink WebKit 的分支） opear(Presto 现为 Blink)
14、写出几种 IE6 BUG 的解决方法。
参考： 1.双边距 BUG float 引起的 使用 display。
2.3 像素问题 使用 float 引起的 使用 dislpay:inline -3px。 3.超链接 hover 点击后失效 使用正确的书写顺序 link visited hover active。
4.Ie z-index 问题 给父级添加 position:relative。
5.Png 透明 使用 js 代码改。
6.Min-height 最小高度 ！Important 解决’ 。
7.select 在 ie6 下遮盖 使用 iframe 嵌套。 8.为什么没有办法定义 1px 左右的宽度容器（IE6 默认的行高造成的，使用 over:hidden,zoom:0.08 line-height:1px） 。
15、标签上 title 与 alt 属性的区别是什么?
参考：
Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息。
16、描述 css reset 的作用和用途。
参考：
Reset 重置浏览器的 css 默认属性 浏览器的品种不同，样式不同，然后重置，让他们统 一。
css reset
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。 – 当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小 的情况下初始化。
17、解释 css sprites，如何使用。
参考：
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。
18、浏览器标准模式和怪异模式之间的区别是什么?
参考：
盒子模型 渲染模式的不同 使用 window.top.document.compatMode 可显示为什么模式。
19、你如何对网站的文件和资源进行优化?期待的解决方案包括：
参考：
文件合并 文件最小化/文件压缩 使用 CDN 托管 缓存的使用
20、什么是语义化的 HTML?
参考：
直观的认识标签 对于搜索引擎的抓取有好处。
用正确的标签做正确的事情！ html 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析； 在没有样式 CCS 情况下也以一种文档格式显示，并且是容易阅读的。 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
1 | 去掉或样式丢失的时候能让页面呈现清晰的结构： html 本身是没有表现的，我们看到例如<h1>是粗体，字体大小 2em，加粗；<strong>是 加粗的，不要认为这是 html 的表现，这些其实 html 默认的 css 样式在起作用，所以去掉或 样式丢失的时候能让页面呈现清晰的结构不是语义化的 HTML 结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达 html 的语义，可以说浏览器的默认样式 和语义化的 HTML 结构是不可分割的。 |
21、清除浮动的几种方式，各自的优缺点。
参考： 1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，增加无意义的标签）。 2.使用 overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用 zoom:1 用于兼容 IE）。 3.是用 afert 伪元素清除浮动(用于非 IE 浏览器)
22、img 的 alt 和 title 的异同？
参考：
title 属性为设置该属性的元素提供建议性的信息。比如为链接添加描述性文字。
为不能显示图像、窗体或 applets 的用户代理（UA）， alt 属性用来指定替换文字。
使用 alt 属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。
23、CSS 布局：两列，左边宽度自适应，右边宽度固定 200px。
参考：
1 | <style> |
24、前端页面由哪三层构成，分别是什么?作用是什么?
参考：
网页分成三个层次，即：结构层、表示层、行为层。
网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签， 也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含 任何关于如何显示有关内容的信息。例如， P 标签表达了这样一种语义：“这是一个文本段。”
网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容” 的问题做出了回答。
网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
25、常见兼容性问题？
参考：
1 | png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8。 |
26、html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如 何区分 HTML 和 HTML5？
参考：
1 | HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能 的增加。 |
27、HTML5 的离线储存？
参考：
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
28、iframe 有那些缺点？
参考：
iframe 会阻塞主页面的 Onload 事件；
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以可以绕开以上两个问题。
29、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
参考：
cookie 在浏览器和服务器间来回传递。
sessionStorage 和 localStorage 不会 sessionStorage 和 localStorage 的存储空间更大；
sessionStorage 和 localStorage 有更多丰富易用的接口； sessionStorage 和 localStorage 各自独立的存储空间；
sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会 话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久 化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除非主动 删除数据，否则数据是永远不会过期的。
web storage 和 cookie 的区别
Web Storage 的概念和 cookie 相似，区别是它是为了更大容量存储设计的。Cookie 的 大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中 浪费了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。除此之外，Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie 需 要前端开发者自己封装 setCookie，getCookie。但是 Cookie 也是不可以或缺的：Cookie 的作 用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而 Web Storage 仅仅是为了在本 地“存储”数据而生。
30、如何实现浏览器内多个标签页之间的通信?
参考：
调用 localstorge、cookies 等本地存储方式。
31、webSocket 如何兼容低浏览器？
参考：
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于 长轮询的 XHR。
32、介绍一下 CSS 的盒子模型？
参考：
有两种，
IE 盒子模型、标准 W3C 盒子模型；
IE 的 content 部分包含了 border 和 pading;
盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
33、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有那些？
参考：
1 | 1.id 选择器（ # myid） |
34、CSS3 新增伪类举例
参考：
1 | p:first-of-type 选择属于其父元素的首个元素的每个元素。 |
35、如何居中 div？
参考：
给 div 设置一个宽度，然后添加 margin:0 auto 属性
36、position 的值， relative 和 absolute 定位原点是？
参考：
- absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
- fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
- relative：生成相对定位的元素，相对于其正常位置进行定位。
- static 默认值。没有定位，元素出现在正常的流中。
- （忽略 top, bottom, left, right z-index 声明）。
- inherit 规定从父元素继承 position 属性的值
37、CSS3 有哪些新特性？
参考：
CSS3 实现圆角（border-radius:8px）
阴影（box-shadow:10px）
对文字加特效（text-shadow、）
线性渐变（gradient）
旋转（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放, 定位,倾斜
CSS 选择器
多背景 rgba
38、对 BFC 规范的理解？
参考：
W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。
39、css 定义的权重
参考：
以下是权重的规则：标签的权重为 1，class 的权重为 10，id 的权重为 100，
以下例子是
1 | /*权重为 1*/ |
40、如果需要手动写动画，你认为最小时间间隔是多久，为什么？
参考：
多数显示器默认频率是 60Hz，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60＊1000ms ＝ 16.7ms
41、display:inline-block 什么时候会显示间隙？
参考：
移除空格、使用 margin 负值、使用 font-size:0、letter-spacing、word-spacing
42、Quirks 模式是什么？它和 Standards 模式有什么区别？
参考：
从 IE6 开始，引入了 Standards 模式，标准模式中，浏览器尝试给符合标准的文档在规 范上的正确处理达到在指定浏览器中的程度。
在 IE6 之前 CSS 还不够成熟，所以 IE5 等之前的浏览器对 CSS 的支持很差， IE6 将对 CSS 提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如 果 IE6 支持 CSS 则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲 染机制呢？ 在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的 功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支， 即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这 样就能不破坏原有的程序，又提供新功能。IE6 也是类似这样做的，它将 DTD 当成了这个“参 数”，因为以前的页面大家都不会去写 DTD，所以 IE6 就假定 如果写了 DTD，就意味着这个 页面将采用对 CSS 支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是 Quirks 模式（怪癖模式，诡异模式，怪异模式）。 区别： 总体会有布局、样式解析和脚本执行三个方面的区别。 盒模型：在 W3C 标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和 高度，而在 Quirks 模式下，IE 的宽度和高度还包含了 padding 和 border。
设置行内元素的高宽：在 Standards 模式下，给等行内元素设置 wdith 和 height 都不会生效，而在 quirks 模式下，则会生效。 设置百分比的高度：在 standards 模式下，一个元素的高度是由其包含的内容来决定的， 如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用 margin:0 auto 设置水平居中：使用 margin:0 auto 在 standards 模式下可以使元素水平居中，但在 quirks 模 式下却会失效。
43、div+css 的布局较 table 布局有什么优点？
参考：
- 改版的时候更方便 只要改 css 文件。
- 页面加载速度更快、结构化清晰、页面显示简洁。
- 表现与结构相分离。
- 易于优化（seo）搜索引擎更友好，排名更容易靠前。
44、img 的 alt 与 title 有何异同？b：strong 与 em 的异同？
参考：
- alt(alt text):为不能显示图像、窗体或 applets 的用户代理（UA）， alt 属性用来指定替换
文字。替换文字的语言由 lang 属性指定。 (在 IE 浏览器下会在没有 title 时把 alt 当成 tool tip 显示） - title(tool tip):该属性为设置该属性的元素提供建议性的信息。
- strong:粗体强调标签，强调，表示内容的重要性
- em:斜体强调标签，更强烈强调，表示内容的强调点
45、你能描述一下渐进增强和优雅降级之间的不同吗?
参考：
- 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的 功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器 进行兼容。
- 区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从 一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功 能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
- “优雅降级”观点 “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被 认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对 象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)”的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注 的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
- “渐进增强”观点 “渐进增强”观点则认为应关注于内容本身。 内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作， 还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强” 成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览 器支持 (Graded Browser Support)”策略的原因所在。
46、为什么利用多个域名来存储网站资源会更有效？
参考：
- CDN 缓存更方便
- 突破浏览器并发限制
- 节约 cookie 带宽
- 节约主域名的连接数，优化页面响应速度
- 防止不必要的安全问题
47、简述一下 src 与 href 的区别。
参考：
src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所 在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片 和 frame 等元素。
1 | <script src =”js.js”></script> |
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、 执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么 将 js 脚本放在底部而不是头部。
href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点） 或当前文档（链接）之间的链接，如果我们在文档中添加
1 | <link href=”common.css” rel=”stylesheet”/> |
那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处 理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。
48、知道的网页制作会用到的图片格式有哪些？
参考：
png-8，png-24，jpeg，gif，svg、Webp
WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。 在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%。
49、知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？
参考：
微格式（Microformats）是一种让机器可读的语义化 XHTML 词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。
优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。 （应用范例：豆瓣，有兴趣自行 google）
50、在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理？
参考：
dns 缓存，cdn 缓存，浏览器缓存，服务器缓存。
51、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的 加载，给用户更好的体验。
参考：
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩 略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片 压缩，图片压缩后大小与展示一致
52、谈谈以前端角度出发做好 SEO 需要考虑什么？
参考：
- 了解搜索引擎如何抓取网页和如何索引网页
你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE
robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。 - Meta 标签优化
主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的
隐藏文字比如 Author（作者），Category（目录），Language（编码语种）等。 - 如何选取关键词并在网页中放置关键词
搜索就得用关键词。关键词分析和选择是 SEO 最重要的工作之一。首先要给网站确定
主关键词（一般在 5 个上下），然后针对这些关键词进行优化，包括关键词密度（Density），
相关度（Relavancy），突出性（Prominency）等等。 - 了解主要的搜索引擎
虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有
Google，Yahoo，Bing 等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和
索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如 AOL 网页
搜索用的是 Google 的搜索技术，MSN 用的是 Bing 的技术。 - 主要的互联网目录
Open Directory 自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区
别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收
集的，除了主页外还抓取大量的内容页面。 - 按点击付费的搜索引擎
搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。
最典型的有 Overture 和百度，当然也包括 Google 的广告项目 Google Adwords。越来越多的
人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用
最少的广告投入获得最多的点击。 - 搜索引擎登录
网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是
将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求
你付费来获得收录（比如 Yahoo 要 299 美元），但是好消息是（至少到目前为止）最大的搜
索引擎 Google 目前还是免费，而且它主宰着 60％以上的搜索市场。 - 链接交换和链接广泛度（Link Popularity）
网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜
索引擎以外，人们也每天通过不同网站之间的链接来 Surfing（“冲浪”）。其它网站到你的网
站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会
被搜索引擎认为它的重要性越大，从而给你更高的排名。 - 合理的标签使用
53、有哪项方式可以对一个 DOM 设置它的 CSS 样式？
参考：
外部样式表，引入一个外部 css 文件
内部样式表，将 css 代码放在
内联样式，将 css 样式直接定义在 HTML 元素内部
54、CSS 选择器的优先级是怎么样定义的？
参考：
基本原则：
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级
就越高。
复杂的计算方法：
用 1 表示派生选择器的优先级
用 10 表示类选择器的优先级
用 100 标示 ID 选择器的优先级 ◦div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级 1+100 + 10 + 1
#xxx li 优先级 100 +1
100、css选择器有哪些？哪些属性可以被继承？
参考：
css选择器
元素选择器、类选择器、ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器、伪类、伪元素……
css继承
字体属性
font-size、font-family、font-weight、
font、font-variant、font-style
文本属性
text-indent、text-align、line-height、word-spacing、
letter-spacing、text-transform、color
元素可见性
Visibility
列表属性
list-style、list-style-type、list-style-image
光标属性
cursor
101、为什么要初始化样式
参考：
因为浏览器的兼容问题，不同的浏览器有些标签默认值是不同，如果没有 css 初始化往往会出现浏览器之间的页面显示差异。
102、盒模型
参考：
页面渲染时，dom 元素所采用的布局模式，可以通过 box-sizing 进行设置。根据计算宽高的区域可分为
content-box （ W3C标准盒模型 ）
border-box （ IE盒模型 ）
padding-box
margin-box （浏览器未实现）
box-sizing 属性主要用来控制元素的盒模型的解析模式。默认值是 content-box。
content-box：让元素维持 W3C 的标准盒模型。元素的宽度/高度由 border + padding + content 的宽度/高度决定，设置
width/height 属性指的是 content 部分的宽/高
border-box：让元素维持 IE 传统盒模型（IE6 以下版本和 IE6~7的怪异模式）。设置 width/hegith 属性指的是 border + padding
content
103、BFC
参考：
触发条件：
1 | // 父元素 |
应用
阻止 margin 重叠
清除高度坍塌
自适应两栏布局
可以阻止元素被浮动元素覆盖
104、HTML5 新特性
参考：
(1) 新的语言标签
(2) 增强型的表单（表单2.0）
(3) 音频和视频
(4) Canvas 绘图
(5) Svg 绘图（地图）
(6) 拖放 API
(7) web worker
(8) web storage
(10) web Socket
105、HTML 常见的兼容性问题
（1）超链接点击过后 hover 样式就不出现
被点击访问过的超链接样式不在具有 hover 和 active 样式。
解决方法是改变 CSS 属性的排列顺序：L-V-H-A。
（2）IE 的 z-index 问题
解决办法，理解层叠上下文，层叠级别与 ‘z-index’ 之间的关系。在可能出现定位元素相互覆盖的情况时，明确指定定位元素的 ‘z-index’
特性，避免此类问题的出现。
（3）IE8 不支持 opacity
1 | .opacity { |
106、为什么 HTML5 只需要写<！DOCTYPE html>
HTML4.01 中 的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。
而 HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。
其中，SGML 是标准通用标记语言，简单的说，就是比 HTML、XML 更老的标准，这两者都是由 SGML 发展而来的。
107、css中表示长度的单位有哪些？
em、ex、ch、rem、vw、vh、vmax、vmin;
cm、mm、q、in、pt、pc、px;
108、display:none 和 visibility:hidden 的区别
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它周边的元素会靠拢，当它不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
109、css 中 link 和 @import 的区别是？
（1）link 属于 html 标签，而 @import 是 css 提供的。
（2）页面被加载的时，link 会同时被加载，而 @import 引用的 css 会等到页面被加载完再加载。
（3）import 只在 IE5 以上才能识别，而 link 是 html 标签，无兼容问题。
（4）link 方式的样式的权重 高于 @import 的 权重
110、position:absolute 和 float 属性的异同
共同点：对内联元素设置 float 和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
不同点：float仍会占据位置，position会覆盖文档流中的其他元素。
盒模型
垂直居中方法
三栏布局
选择器权重计算方式
清除浮动的方法
flex
什么是 BFC、可以解决哪些问题
position 属性
如何实现一个自适应的正方形
如何用 css 实现一个三角形
JavaScript
call 和 apply 的区别是什么？哪个性能更好一些
共同点：改变 this 指向
不同点：
call： 传参是一个一个
apply：参数是数组的形式
三个以上参数 call 性能优于 apply
性能测试
1 | console.time("A"); |
实现（5）.add(3).minus(2)，使其输出结果为：6
箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？
防抖和节流
深拷贝
数组去重、数组乱序
手写 call、apply、bind
继承（ES5/ES6）
sleep 函数
实现 promise
实现 promise.all
实现 promise.retry
将一个同步 callback 包装成 promise 形式
写一个函数，可以控制最大并发数
jsonp 的实现
eventEmitter(emit,on,off,once)
实现 instanceof
实现 new
实现数组 flat、filter 等方法
lazyMan
函数 currying
有以下 3 个判断数组的方法，请分别介绍它们之间的区别和优劣
介绍下重绘和回流（Repaint & Reflow），以及如何进行优化
ES6
let、const、var 区别
箭头函数与普通函数的区别
变量的结构赋值
promise、async await、Generator 的区别
ES6 的继承与 ES5 相比有什么不同
js 模块化（commonjs/AMD/CMD/ES6）
浏览器相关知识
从输入 URL 到呈现页面过程
强缓存、协商缓存、CDN 缓存
HTTP2
简单讲解一下 HTTP2 的多路复用
在 HTTP/1 中，每次请求都会建立一次 TCP 连接，也就是我们常说的 3 次握手 4 次挥手，这在一次请求过程中占用了相当长的时间，即使开启了 Keep-Alive ，解决了多次连接的问题，但是依然有两个效率上的问题：
- 第一个：串行的文件传输。当请求 a 文件时，b 文件只能等待，等待 a 连接到服务器、服务器处理文件、服务器返回文件，这三个步骤。我们假设这三步用时都是 1 秒，那么 a 文件用时为 3 秒，b 文件传输完成用时为 6 秒，依此类推。（注：此项计算有一个前提条件，就是浏览器和服务器是单通道传输）
- 第二个：连接数过多。我们假设 Apache 设置了最大并发数为 300，因为浏览器限制，浏览器发起的最大请求数为 6（Chrome），也就是服务器能承载的最高并发为 50，当第 51 个人访问时，就需要等待前面某个请求处理完成。
HTTP2 采用二进制格式传输，取代了 HTTP1.x 的文本格式，二进制格式解析更高效。
多路复用代替了 HTTP1.x 的序列和阻塞机制，所有的相同域名请求都通过同一个 TCP 连接并发完成。在 HTTP1.x 中，并发多个请求需要多个 TCP 连接，浏览器为了控制资源会有 6-8 个 TCP 连接都限制。
HTTP2 中
- 同域名下所有通信都在单个连接上完成，消除了因多个 TCP 连接而带来的延时和内存消耗。
- 单个连接上可以并行交错的请求和响应，之间互不干扰
谈谈你对 TCP 三次握手和四次挥手的理解
A、B 机器正常连接后，B 机器突然重启，问 A 此时处于 TCP 什么状态
HTTP 状态码
三次握手与四次挥手
跨域（JSONP/CORS）
跨域时如何处理 cookie
垃圾回收机制
web 安全
https
什么是 xss，如何预防
什么是 csrf，如何预防
为什么会造成 csrf 攻击
事件循环
框架（Vue）
watch 与 computed 的区别
vue 生命周期及对应的行为
vue 父子组件生命周期执行顺序
组件间通讯方法
如何实现一个指令
vue.nextTick 实现原理
diff 算法
如何做到的双向绑定
虚拟 dom 为什么快
如何设计一个组件
框架（React）
React 中 setState 什么时候是同步的，什么时候是异步的？
React setState 笔试题，下面的代码输出什么？
1 | class Example extends React.Component { |
webpack
用过哪些 loader 和 plugin
loader 的执行顺序为什么是后写的先执行
webpack 配置优化
webpack 打包优化（happypack、dll）
plugin 与 loader 的区别
webpack 执行的过程
如何编写一个 loader、plugin
tree-shaking 作用，如何才能生效
性能优化
首屏加载如何优化
一个网页从请求到呈现花了很长时间，如何排查
NPM
介绍下 NPM 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？
设计模式
介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景
聊聊 Redux 和 Vuex 的设计思想
水平垂直居中
两栏布右侧自适应
双飞翼布局
高度塌陷
flex 布局
vw、em、rem
IE6 双边距离
图片问题
多行显示省略号
移动端 1 像素边框问题
以上是我对下列视频及文章的归纳和总结。
不透明不工作在img在IE8(Opacity not working on img in IE8)√
面试篇 —— HTML & CSS
install_url to use ShareThis. Please set it in _config.yml.