1.html5新增那些内容？
（1）header，footer，main，nav等语义化标签
（2）video，audio媒体标签
（3）canvas画布
（4）input的placeholder
（5）cs3的圆角，阴影，滤镜，vwvh单位，flex布局，媒体查询，过渡动画，伪类等
（5）webAPI：localStorage sessionStorage querySelector webSocket requestAnimationFrame Worker(类似分线程) 地理位置
2.什么是HTML语义化？HTML语义化的好处是什么？
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析; 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的; 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO（搜索引擎优化）;使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
3.Css中Position定位都有哪些方式，分别是什么效果。
Static(默认)， 静态定位，流式布局
Relative，相对定位，参与流式布局，可以使用left等在原有位置上进行位置调整。
Absolute，绝对定位，脱离文档流，相对于另一个元素进行定位。
Fixed，固定定位，脱离文档流，相对于浏览器窗口定位，不随页面滚动而改变位置。
Sticky，粘性定位，可实现动态fixed。
4.Absolute定位的元素相对于哪个元素进行定位。
相对于离自己最近的、position为非static的祖先元素进行定位。
5.前端页面中动画都有哪些实现方式，各自分别适用于哪些场景？
Transition：简单的动画，只需要在两个状态之间变化的动画。
keyframeAnimation：适合需要在多个状态连续进行的动画。
js动画：功能最强的动画，但是效率最低。
6.怎么隐藏页面中的某个元素？
Display:none; 隐藏且不占用位置。
Visibility:hidden; 隐藏但保留位置。
Opacity:0; 隐藏但保留位置。
7.行元素和块元素的区别是什么？
行元素：会在水平方向排列，设置宽高无效，上下边距无效
块元素：各占据一行，垂直方向排列。可设置宽高,内外边距
行内块元素: 会在水平方向排列,可设置宽高,内外边距
同时,可通过display属性修改标签元素类型
8.如何解决行内块间距问题。
给父元素设置font-size:0
使用弹性布局或浮动布局
使用固定定位或者绝对定位
9.标准盒模型和IE怪异盒模型的区别
在标准模式下，块的总宽度= width + margin(左右) + padding(左右) + border(左右)
怪异模式下，块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
10.Css3中transition和animation的区别
-
transition只有开始和结束两个状态，并且需要通过事件触发
-
animation可以通过定义关键帧指定多个动画状态，可以自动播放
11.单行文本溢出显示为省略号
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
12.页面中常用哪些单位, 有什么区别
px 以物理像素为基准
em以当前元素font-size为基准
-
rem以html font-size为基准
-
vw/vh以浏览器窗口宽高为基准 100vw=浏览器窗口宽度
rpx 适用于小程序或uniapp中可以实现自适应 750rpx=屏幕宽度
13.什么是响应式页面，是依赖什么技术实现的。
能够根据不同的浏览器尺寸，显示不同的布局方式。依赖媒体查询实现
14.怎么在页面上显示一条斜线？一条折线？一线曲线？
方法一: 使用canvas绘图画出来 (比较麻烦)
方法二: 使用div边框线 + 视图转换(旋转/倾斜)或边框圆角实现(简单方便)
方法三: 使用背景的线性渐变或经向渐变实现(较耗性能)
15.在页面头部显示导航条，不随页面滚动，在页面左侧显示垂直菜单栏，不随页面滚动，你会怎么实现？如何避免导航条、菜单栏盖住页面上的内容？
使用 position:fixed 固定定位实现, 头部设置top属性, 左侧的设置left属性 并使用z-index属性设置显示层级, 值越大越不容易被覆盖
16.怎样实现元素上下左右都居中？
（1）实现元素本身内容居中：text-align:center+行高。
（2）实现子元素在父元素中居中：绝对定位+上下左右设置0+margin:auto。
（3）使用flex弹性布局
（4）绝对定位+left,top:50%+transform:translate:-50%。
17.flex弹性布局很强大，可以实现几乎所有的布局效果，包括以往很难实现的弹性效果，但什么情况不能用flex弹性布局实现？
Flex布局是css3的新特性, 在一些低版本的浏览器上(如IE8)不支持flex布局
18.怎样在不使用新元素的情况下清除浮动？
在浮动元素的父元素上添加一个class,为这个class添加后缀.after样式，其中写content:””;display:block;clear:both
19.Css文件中@import，@font-face，@keyframes,@media这4个关键字的作用是什么？
@import，导入另一个css文件，@font-face，导入一个字体文件，@keyframes声明一个关键帧动画，@media声明一个媒体查询条件。
- Less/Sass比css高级到哪了？
支持嵌套
支持变量定义
支持“模板函数
21.常见兼容性问题有哪些？
兼容问题大多出现老版本浏览器不支持新样式或渲染不统一的情况下 png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。 对于老IE浏览器使用css hack解决兼容问题。 IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。） Retina屏幕手机浏览器的1px边框问题，通过前后缀伪元素或者缩放解决。
22.什么是元素盒模型，包含哪几部分？计算元素尺寸时从哪部分开始计算？
元素从结构上分为4层，内容，内间距，边框，外间距。
通过box-sizing设置计算方式，默认为content-box,及计算内容盒，可以设置为border-box,计算到边框盒。
23.::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
24.常用的浏览器有哪些？他们分别是什么内核？
（1）chrome、safari属于webkit内核。
（2）老IE(10和10以下) 属于Trident内核。
（3）firefox属于Gecko内核。
（4）新IE属于Edge内核。
（5）360等特殊浏览器：多内核浏览器。
25.什么叫优雅降级和渐进增强？
都是解决网站对于老旧版本浏览器的兼容问题。
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功 能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器 进行兼容。 区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个 非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰 减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为 “过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限 定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无 妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏 览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被 直接忽略。 “渐进增强”观点 “渐进增强”观点则认为应关注于内容本身。 内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有 的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为 一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器 支持 (Graded Browser Support)”策略的原因所在。 那么问题来了。现在产品经理看到 IE6,7,8 网页效果相对高版本现代浏览器少了很多圆角， 阴影（ CSS3），要求兼容（使用图片背景，放弃 CSS3），你会如何说服他？
26.栅格布局原理
随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列(也可以自己定制多少列都行)。
通过一系列的行（row）与列（column）的组合创建页面布局
通过定义容器大小，平分12份，再调整内外边距，最后结合媒体查询，实现强大的响应式网格系统。
27.高度坍塌的解决方式
高度坍塌：在流式布局中十分常见。当父元素没有高度，子元素全部设置float时。
原因：子元素脱离文档流，无法撑开父元素
(1):
<div style="clear:both"></div>
(2)：
.box:after{
clear: both;
content: '';
display: block;
height: 0;
overflow: hidden;
}
.box{ zoom:1; } /** 兼容ie触发hasLayout */
28.用 css 画一条 0.5px 的线
移动端开发时, 由于屏幕是 retina, 即高清屏幕. 当写 1px 时, 实际的线宽为 2px. 会显得很粗.此时就有了 0.5px 的需求: 主要应对iPhone
<style>
.parent{
position: relative;
&:after{
/* 绝对定位到父元素最低端，可以通过left/right的值控制边框长度或者定义width:100%;*/
position: absolute;
bottom: 0;
left: 0;
right: 0;
/* 初始化边框 */
content: '';
box-sizing: border-box;
height: 1px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
/* 以上代码，实现了一个边框为1px的元素，下面实现0.5px边框*/
transform: scaleY(0.5); // 元素Y方向缩小为原来的0.5
transform-origin: 0 0; // CSS属性让你更改一个元素变形的原点。
}
}
</style>
<div class="parent"></div>
29.用 css 画一个三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
</style>
</head>
<body>
<div id="triangle-up"></div>
</body>
</html>
30.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
IE: trident 内核
Firefox：gecko 内核
Safari:webkit 内核
Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核
Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发)
- 每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的 吗？
32.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 模式下却会失效。 （还有很多，答出什么不重要，关键是看他答出的这些是不是自己经验遇到的，还是说都是看文章看的，甚至完全不知道。）
33.div+css 的布局较 table 布局有什么优点？
改版的时候更方便 只要改 css 文件。 页面加载速度更快、结构化清晰、页面显示简洁。 表现与结构相分离。 易于优化（seo）搜索引擎更友好，排名更容易靠前。
34.img 的 alt 与 title 有何异同？ strong 与 em 的异同？
a:alt(alt text):为不能显示图像、窗体或 applets 的用户代理（ UA），alt 属性用来指 定替换文字。替换文字的语言由 lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt 当成 tool tip 显示) title(tool tip):该属性为设置该属性的元素提供建议性的信息。 strong:粗体强调标签，强调，表示内容的重要性 em:斜体强调标签，更强烈强调，表示内容的强调点
35.为什么利用多个域名来存储网站资源会更有效？
CDN 缓存更方便
突破浏览器并发限制
节约 cookie 带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题
36.请谈一下你对网页标准和标准制定机构重要性的理解
网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发者遵循统一的标准，降 低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各种 BUG、安全问题， 最终提高网站易用性。
37.请描述一下 cookies，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 仅仅是为 了在本地“存储”数据而生。
38.简述一下 src 与 href 的区别。
src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。 src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在 位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片 和 frame 等元素。
<scriptsrc =”js.js”></script>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行 完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。 href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点） 或当前文档（链接）之间的链接，如果我们在文档中添加
<link href=”common.css” rel=”stylesheet”/>
那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的理。 这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。
39.知道的网页制作会用到的图片格式有哪些？
png-8，png-24，jpeg，gif，svg。 但是上面的那些都不是面试官想要的最后答案。面试官希望听到是 Webp。（是否有关注新 技术，新鲜事物） 科普一下 Webp：WebP 格式，谷歌（ google）开发的一种旨在加快图片加载速度的图片格式。 图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。 Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。 在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%
- 知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？
微格式（ Microformats）是一种让机器可读的语义化 XHTML 词汇的集合，是结构化数据的开 放标准。是为特殊应用而制定的特殊格式。 优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应 用范例：豆瓣，有兴趣自行 google）
41.在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一 次 js 请求一般情况下有哪些地方会有缓存处理？
dns 缓存，cdn 缓存，浏览器缓存，服务器缓存。
42.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化 这些图片的加载，给用户更好的体验。
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置到浏览器顶端 的距离和到页面低端的距离，如果前者小于后者，优先加载。 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先 下载。 如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图， 以提高用户体验。 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩， 图片压缩后大小与展示一致。
43.有哪项方式可以对一个 DOM 设置它的 CSS 样式？
外部样式表，引入一个外部 css 文件
内部样式表，将 css 代码放在 标签内部
内联样式，将 css 样式直接定义在 HTML 元素内部
- CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范 围内？
最基本的：
设置 display 属性为 none，或者设置 visibility 属性为 hidden
技巧性：
设置宽高为 0，设置透明度为 0，设置 z-index 位置在-1000em
45.超链接访问过后 hover 样式就不出现的问题是什么？如何解决？
被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的排列顺序: L-V-H-A（link,visited,hover,active）
- 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可 设置吗？
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性： 和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边 距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的），就是里面文字或图片的大小，内容区域的大小是由内容撑 开的。 那么问题来了，浏览器还有默认的天生 inline-block 元素（拥有内在尺寸，可设置高宽， 但不会自动换行），有哪些？
答案： 、 、 、 、。
47.什么是外边距重叠？重叠的结果是什么？
外边距重叠就是 margin-collapse。 在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠 外边距。
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
48.rgba()和 opacity 的透明效果有什么不同？
rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内 的所有内容的透明度， 而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明 效果！）
49.css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
垂直方向：line-height
水平方向：letter-spacing
那么问题来了，关于 letter-spacing 的妙用知道有哪些么？
答案:可以用于消除 inline-block 元素间的换行符空格间隙问题。
50.px 和 em 的区别。
px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。
em 得值不是固定的，并且 em 会继承父级元素的字体大小。 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
51.描述一个”reset”的 CSS 文件并如何使用它。知道 normalize.css 吗？你了 解他们的不同之处？
重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置 CSS 文件并知道如何使用它 们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的 默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。 你可能会用 Normalize 来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了 一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗 体的标题）。 在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用 考虑的怪癖，像 HTML 的 audio 元素不一致或 line-height 不一致。
