HTML
Doctype作用？有什么作用？标准模式与兼容模式各有什么区别?
告诉浏览器按照何种规范解析页面
文档头声明、告诉浏览器其排版模式和JS运行是否以该浏览器的最高标准运行、若没有则模拟老师浏览器、以防止站点无法工作
1）、<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
HTML5 为什么只需要写 ？
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
SGML(标准通用标记语言)
DTD(文档类型定义)DTD概念缘于SGML，每一份SGML 文件，均应有相对应的DTD
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
1）、快级元素：div、ul、ol、li、dl、dt、dd、p、table、form、h1、h2、h3、header、footer、section、figure
2）、行内元素：a、img、span、input、em、i、textarea、label、button、select、sub、sup
3）、常见的空元素：<br>、<hr>、<img>、<input>、<link>、<meta>
em和strong的区别？img的alt与title有何异同？
1)、em 表示强调，strong 表示更强烈的强调。(重要性、严重性或内容的紧迫性对着)
2)、em 用来局部强调，strong 则是全局强调。
3)、em强调是有顺序的、阅读到某处才会注意到，strong强调是一种随意无序的、某个文字或界面立刻凸显
<i>表示无意义的斜体
alt：在不能显示图像时、alt属性用来指定替换文字(在IE下载没有title时、会把alt当做title显示)
title：为设置该属性的元素提供建议性的信息
页面导入样式时，使用link和@import有什么区别？
1）、link属于XHTML标签，而@import是CSS提供的，只能用于加载CSS;
2）、页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
简述一下src与href的区别
src 引入(页面中必不可少的)
href 引用(与页面有关联的)当前文档和引用资源之间确认联系
<script src =”js.js”></script>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
<link href=”common.css” rel=”stylesheet”/>
那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强：针对低版浏览器进行页面构建、保证最基本的功能、在针对高级浏览器进行效果、交互等改进和追加功能以达到更好的用户体验
优雅降级：一开始就构建完整的功能、然后再针对低版浏览器进行兼容
区别：
优雅降级针对高级浏览器做开发、对低版本浏览器减少用户体验供给的方案(低版本浏览器给予简陋却无妨的浏览体验)
渐进增强以基础开始、对不同的浏览器不断的扩充功能以适应未来的环境需求
为什么利用多个域名来存储网站资源会更有效？
突破浏览器并发限制
因为在:同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞因此需要使用多个域名来存储网站资源
节约cookie带宽
CDN缓存更方便
解决主域名的连接数、优化页面响应速度
防止不必要的安全问题
新的浏览器加大了并发数的限制，但却仍控制在8以内。
IE6、7HTTP1.1和HTTP1.0 限制为2和4
HTTP/2.0
1、提升网站访问速度
2、降低服务器压力
3、部分替代异步加载的使用
4、保护网站安全(HTTP/2.0现阶段必须使用https)
介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎(排版引擎)：负责取得网页的内容、整理信息、以及计算网页的显示方式输出
JS引擎：解析和执行javascript来实现网页的动态效果。
常见的浏览器内核有哪些？
Trident内核：IE
Gecko内核：FF
Webkit内核：Safari
Blink内核(WebKit的分支)：Opera、Chrome
简述一下你对HTML语义化的理解？
用正确的标签做正确的事情。
1、样式丢失、页面呈现清晰的结构
2、爬虫依赖、确定上下文和各个关键字的权重(爬虫很大程度上忽略用于表现的标记、而只注重语义标记)
3、便于团队开发和维护
HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
易于后期维护
利于SEO优化、爬虫依赖于HTML标记来确定上下文和各个关键字的权重
即使在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的;
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
新特性:
新增的用于媒介回放的 video 和 audio 元素;
语意化更好的内容元素，比如 footer、header、nav、sectionarticle;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
表单控件，calendar、date、time、email、url、search;
移除的元素：big、s
HTML5新标签的浏览器兼容：直接使用成熟的框架html5shim
如何区分HTML5： DOCTYPE声明新增的结构元素
HTML5的离线储存怎么使用，工作原理能不能解释一下？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)
通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。
之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
1、页面头部像下面一样加入一个manifest的属性；
2、
离线存储的manifest一般由三个部分组成:
1.CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
2.NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
3.FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。
![enter description here][1]
[有趣的HTML5：离线存储](https://segmentfault.com/a/1190000000732617)
浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件
如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。
如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，
然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，
如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie是网站为了标示用户身份而储存在用户本地终端上的数据。
cookie数据始终在同源的http请求中携带，记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
iframe有那些缺点？
1)、iframe会阻塞主页面的Onload事件；
2)、搜索引擎的检索程序无法解读这种页面，不利于SEO;
3)、iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以绕开以上两个问题。
Label的作用是什么？是怎么用的？
label标签来定义表单控制间的关系、当用户选择该标签时、浏览器会自动将脚钉转移到和标签相关的表单控件上
书写一：
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
书写二：
<label><input type="text"/>111111111111</label>
如何实现浏览器内多个标签页之间的通信? (阿里)
调用localstorge、cookies等本地存储方式
实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
页面可见性（Page Visibility）API 可以有哪些用途？
在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；
HTML5的form如何关闭自动完成功能？
## 给不想要提示的 form 或下某个input 设置为 autocomplete=off。
知道的网页制作会用到的图片格式有哪些？
png-24、jpeg、fig、svg、Webp
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%
知道什么是微格式吗？谈谈理解。
微格式是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。
是为特殊应用而制定的特殊格式。
一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
重构的方案：CSSsprite、Iconfont、Base64
逻辑的方案：懒加载、预先加载、若图片过大(使用有损压缩、后在展示原图、提高用户体验)
谈谈以前端角度出发做好SEO需要考虑什么？
Meta标签优化
主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。
合理的标签使用
沟通的重要性、在拿到设计稿之前查看原型、对着原型捋一遍
对模棱两可的事情找UE确认。
先做孙子、再做爷
不要脸、以后才有脸
CSS
CSS的盒子模型？
（1）有两种， IE 盒子模型(box-sizing: border-box;IE8+)标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
box-sizing: border-box;令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
有哪项方式可以对一个DOM设置它的CSS样式？
（1）外部样式表，引入一个外部css文件
（2）内部样式表，将css代码放在 head 标签内部
（3）内联样式，将css样式直接定义在 HTML 元素内部
CSS都有哪些选择器？哪些属性可以继承？
1、id选择器（# myid）
2、类选择器（.myclassname）
3、标签选择器（div, h1, p）
4、相邻选择器（h1 + p）
5、子选择器（ul > li）
6、后代选择器（li a）
7、通配符选择器（ * ）
8、属性选择器（a[rel = "external"]）
9、伪类选择器（a: hover, li: nth - child）
可继承的样式：font-size font-family color
不可继承的样式： border padding margin width height
CSS3新增伪类有那些？
li:first-child{}
li:last-child{}
li:nth-child(){}
li:nth-last-child(){}
li:first-of-type{}
li:last-of-type{}
li:nth-of-type(){}
li:nth-last-of-type(){}
ul li:only-child{选择属于其父元素的唯一子元素的每个 元素。}
CSS优先级算法如何计算？
载入样式以最后载入的定位为准;
!important > id > class > tag
!important比内联优先级高
(1) !important声明高于一切。
(2) 内嵌样式次之。
(3) 样式表中声明按选择器的权重排序。
(4) 最后按浏览器执行样式表的顺序，遵循"后来居上"原则匹配样式。
当然最后还要强调一点：如果没有设置样式的，则自动继承父级节点的样式。
CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？
display: none;
visibility: hidden;
height: 0;overflow: hidden;
position: absolute;top: -999em;
opacity: 0;filter: Alpha(opacity=0);
position: absolute;visibility: hidden;
display: none;和visibility: hidden;的区别
// 1、空间占据
display:none;// 隐藏的元素不占文档流
visibility:hidden;// 隐藏的元素空间存在(占茅坑、不拉屎)
// 2、回流和重绘(reflow/repaint)
display:none;// 引发回流和重绘
visibility:hidden;// 无回流和重绘
// 3、株连九族
display:none;// 其内的标签元素全部隐藏、无论如何挣扎都无济于事
visibility:hidden;// 其元素若添加visibility:visible;则会显示出来
行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？
1)、内联元素，和其他元素都在一行上。
2)、内联元素中宽高，行高及顶和底边距不可设置。
3)、内联元素，只能容纳文本或者其他内联元素。
行内元素可以设置padding值、左右margin值、若行内元素浮动则上下margin生效
超链接访问过后hover样式就不出现的问题是什么？如何解决？
被点击访问过的超链接样式不在具有hover和active了
更改css属性的排列顺序( L-V-H-A )
a:link{}
a:visited{}
a:hover{}
a:acitve{}
px和em的区别
px的值是固定的
em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？
body,div,dl,dt,dd,del,ul,ol,li,h1,h2,h3,h4,h5,h6,input,p,figure{padding: 0;margin: 0;}
a{text-decoration: none;}
ul,ol{list-style: none;}
img{border: 0;}
h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;font-style: normal;}
.clearfix{zoom:1;}
.clearfix:after{content:"",display: block;height: 0;visibility: hidden;clear: both;}
Normalize.css 保留浏览器原有的样式并且做到每个浏览器显示一致(没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。)
CSS Reset 相反吧浏览器默认样式全部重置
http://jerryzou.com/posts/aboutNormalizeCss/
Sass、LESS是什么？大家为什么要使用他们？
是CSS预处理器
1、结构清晰(语法嵌套)
2、可以轻松实现多重继承。
3、定义变量、定义
4、声明@mixin 使用@include调用。一处书写多次调用
5、占位选择器$ 通过@extend调用
6、函数(px转换rem就使用的)
7、强大的运算符()
@function pxRem($px){
@return $px / $baseFontSize * 1rem;
}
如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
1、margin: 0 auto;
2、position: absolute;left: 50%;transform: translateX(-50%);
3、position: absolute;left: 50%; 200px;margin-left: -100px;
4、position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;
5、position: relative;left: 50%; 300px;margin-left: -150px;background-color: pink;
display有哪些值？说明他们的作用。
block
inline-block
table-cell
flex(设置Flex布局后、子元素的float、clear、vertical-align属性将失效)
请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
CSS3有哪些新特性？
border-radius: 8px;
box-shadow: 8px;
text-shadow
translate: translate() rotate() scale() skew();
linear-gradient
用纯CSS创建一个三角形的原理是什么？
#demo{
0;height: 0;border- 20px;border-style: solid;
border-color: transparent transparent red transparent;
}
左箭头(尖细)
sReturn{
display: block;content: ''; 10px;height: 10px;
border- 2px;border-style: solid;
border-color: #fff transparent transparent #fff;
position: absolute;top: 50%;left: 15px;
transform: translateY(-50%) rotate(-45deg);
}
左箭头(钝)
#demo1{
10px;height: 10px;
position: absolute;top: 50%;
border-left: 2px solid red;
border-top: 2px solid red;
transform: rotate(-45deg) translateY(-50%);
}
一个满屏 品 字布局 如何设计?
1、上div宽度100%、下面两个div分别50%、使用float或者inline-block使其不换行
什么是 inline-block？为什么会产生水平间隙？如何去掉inline-block产生的空隙？
inline-block 前世今生
去掉空隙：font-size: 0;
inline-block元素创建一个行级的块容器、该元素内部被格式化为一个块元素、同时元素本身
则是被格式化为一个行内元素（一个格式化为一个行内元素的块容器）
默认就存在空隙(是空白符 white space)
IE6、7 block元素inline-block后不产生空隙才是Bug
因为inline-block触发hasLayout hasLayout具有独立性(因此独立元素之间互不影响)
IE6、7总的inline-block不等同于css2.1总的inline-block;
更好的还原视觉设计搞，很多时候我们需要去掉 inline-block(默认) 产生的空隙。
HTML 中的换行符、空格符、制表符等产生了空白符，而这些归根结底都是字符，那么它们的大小都是 受 font-size 来控制的，字体大小直接导致 inline 或者 inline-block 后元素之间空隙的大小，把 inline-block 元素间的空隙认为总是某个固定大小是错误的。
1、当 font-size:0 的时候元素间的空隙都为0了
低版本的 chrome 浏览器为了不让文字过小不利于阅读，默认是不支持 font-size:0 的，还好我们有 -webkit-text-size-adjust 这个私有属性来控制，当设为 none 时就支持字体大小为 0 了。我已经记不清楚 chrome 从哪个版本开始支持 font-size:0 了，反正我用 chrome 19 是支持了（有知道的朋友，烦请告诉一丝一声，最好有官方更新说明）。但是，-webkit-text-size-adjust:none; 会直接导致页面文字无法缩放，这对于用户来说显然是不友好的。所以-webkit-text-size-adjust:none; 一定要慎用，确保使用的地方没有大面积的文字。
2、
使用 font-size:0经测试发现，chrome、firefox、IE8+、opera，inline 或 block 元素都没有空隙了；
Safari 5.1.7 由于不支持 font-size:0 ，仍然存在空隙；
3、
产生 inline-block 空隙的根本性原因是：HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，因此产生了元素间的空隙。
4、
慎用 -webkit-text-size-adjust:none，它将会导致页面无法通过缩放来改变字体大小。
5、
font-size: 0;/*所有浏览器*/
letter-spacing: -5px;/*Safari 5.1.7等不支持字体大小为0的浏览器*/
letter-spacing: normal;
word-spacing: -1px;/*IE6、7*/
上述所有操作都是在父元素设置的
那么子元素都会继承这些属性，字体大小为0了，子元素就什么都看不到了，这并不是我们想要的。 同时字符和单词间距我们也要把它重置为默认值。
font-size: 12px; letter-spacing: normal; word-spacing: normal;
.dib-wrap {
font-size:0;/* 所有浏览器 */
*word-spacing:-1px;/* IE6、7 */
}
.dib-wrap .dib{
font-size: 12px;
letter-spacing: normal;
word-spacing: normal;
vertical-align:top;
display: inline-block;
*display: inline;
*zoom:1;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
/* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
.dib-wrap{
letter-spacing:-4px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
}
}
经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？说说你所知道的各浏览器存在的兼容问题？
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
浏览器是怎样解析CSS选择器的？
浏览器css匹配核心算法的规则是以 right-to-left 方式匹配节点的。
rgba()和opacity的透明效果有什么不同？
gba()和opacity都能实现透明效果
1、opacity作用于元素，以及元素内的所有内容的透明度，
2、rgba()只作用于元素的颜色或其背景色（设置rgba透明的元素的子元素不会继承透明效果！）
css中可以让文字在垂直和水平方向上重叠的两个属性是什么？
垂直方向：line-height
水平方向：letter-spacing
关于letter-spacing的妙用知道有哪些么？
可以用于消除inline-block元素间的换行符空格间隙问题。
absolute的containing block(容器块)计算方式跟正常流有什么不同？
无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素
CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。
如果这个元素是table相关的元素,它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。
在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别。
在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。
对BFC规范(块级格式化上下文：block formatting context)的理解？
一块独立的渲染区域(规定了内部的block-level-Box如何布局、并且与这个区域外部毫不相干)
生成BFC的元素
1、float: left right;
2、position: absolute fixed;
3、display: inline-block table-cell flex inline-flex table-caption;
4、overflow: hidden;
布局规则：BFC就是页面上的一个隔离的独立容器、容器里面的子元素不会影响到外面的元素、反之亦然
1、想快级元素一样一列一列的放置
2、Box垂直方向的距离由marign决定、属于同一个BFC的两个相邻Box的margin会发生叠加(上下margin叠加问题、可以额外添加元素使其触发BFC)
3、BFC区域不会与Float Box重叠(自适应两列布局、左右两侧会自适应大小)
4、每个元素Margin Box的左边、与包含快的Border Box的左边相接处、即使存在浮动也是如此
5、计算BFC的高度时、如东元素也是参与计算的(overflow: hidden;清除内部浮动)
position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
'display'、'position' 和 'float' 的相互关系？
['display'、'position' 和 'float' 的相互关系](http://blog.csdn.net/jiaw127/article/details/48370247)
类似优先级的问题
"position:absolute" 和 "position:fixed" 优先级最高，有它存在的时候，浮动不起作用
解释下浮动和它的工作原理？清除浮动的技巧？
浮动元素从正常文档流中被抽取出来、并沿着它的容器的左边或右边放置、而文字和行为元素要环绕着这个元素。
清除浮动：使用clear: both;组织这个元素盒子的边和前面浮动元素相邻的行为
闭合浮动：使float元素可以撑高父元素
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
1、overflow: hidden;
2、设置宽高
3、.clearfix:after{content:'',display: block;clear: both;height: 0;visibility: hidden;}
针对移动端的布局？
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
布局和PC一样、添加新的meta标签、使用rem或者传统/2方案适配
说说你对rem的理解？
根据改变根节点的font-size值、进行移动端大小的适配
Flexible会将视觉稿分成100份、而每一份被称为一个单位a、同时1rem单位被认定为10a。
1a = 7.5px
1rem = 75px
大漠Rem介绍：https://github.com/amfe/article/issues/17
lib.flexible开源项目：https://github.com/amfe/lib-flexible
<script type="text/javascript" src="js/flexible.js"></script>
@function Rem(){
@return ($px / 75) * 1rem;
}
用法:
.sCutimg{ Rem(640);height: Rem(685);margin: 0 auto;padding-top: 40px;}
CSS优化、提高性能的方法有哪些？
抽离样式模块怎么写，说出思路，有无实践经验？(抽离样式模块、结构分割成一个个小的复用模块、根据业务需求、内容的大小大部分是相对的值。命名规则则是跟其他的所有类型对待区别。比如加上moduleCss的前缀)
元素竖向的百分比设定是相对于容器的高度吗？(容器的宽度)
全屏滚动的原理是什么？用到了CSS的那些属性？
fullpages.js transfrom: translate;
## ::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
单冒号(:)用于CSS3伪类、想某些选择器添加特殊效果
双冒号(::)用于CSS3伪元素(css3规范中引入)。将特殊效果添加到某些选择器
## 如何修改chrome记住密码后自动填充表单的黄色背景 ？
-webkit-box-shadow: 0 0 0px 1000px white inset;
## 你对line-height是如何理解的？
## 设置元素浮动后，该元素的display值是多少？（自动变成display:block）
## 怎么让Chrome支持小于12px 的文字？
-webkit-text-size-adjust:none
## 让页面里的字体变清晰，变细用CSS怎么做？
```css
-webkit-font-smoothing: antialiased;
font-style属性可以让它赋值为“oblique” oblique是什么意思？
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
position:fixed;在android下无效怎么处理？
模拟滚动条
overflow-y: auto;
-webkit-overflow-scrolling: touch;
html, body {
height: 100%;overflow: hidden;
}
使用isroll.js解决。。。
如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms
display:inline-block 什么时候会显示间隙？(携程)
移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
overflow: scroll时不能平滑滚动的问题怎么处理？
-webkit-overflow-scrolling: touch;
png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
png可以储存透明
jpg适用于摄影图片，以及色彩丰富的图片。
GIF可以构建简单的动画
WebP格式图像的体积要比JPEG格式图像小40%、火狐和ie暂时还不支持webp格式
美中不足的是，WebP格式图像的编码时间“比JPEG格式图像长8倍”。
使用iSparta、智图 转换webP格式：http://isparta.github.io/、http://zhitu.isux.us/
有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。(等高布局)
css定义的权重
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现
讲讲自己遇到的最严重的兼容性case
1、需求是什么
2、一开始怎么做的
3、怎么发现有问题
4、怎么找到问题的原因
5、有哪些解决方案
6、最后选了哪一种
7、为什么选这种方式
8、这个过程里学到了什么
9、做一次类似case会有什么改变
10、将来怎么避免
问题反问
1、您说的是哪个浏览器的哪类问题？
2、还是常用浏览的（前端）API差异？
3、Layout渲染差异？
4、谈谈浏览器为什么存在兼容问题？
5、兼容存在的历史原因？
想了解你常用的常见到的常解决到的，或者近期刚刚解决过的一些浏览器兼容问题
1、IE低版本的事件怎么绑定？标准怎么绑定？阻止事件的API分别是什么（Pas）
2、jQuery怎么事件委托呢？
3、给你这个方法和这个方法，怎么实现jQuery这种形式的事件委托。
4、不要去了解如何兼容旧 IE，而是要更加符合趋势，关注优秀的、流行的东西。
对过时浏览器的兼容性问题是沉重的知识包袱， 关键是这种知识没有延续性，会影响你学习和使用新技术
5、如果问移动浏览器的兼容性还可以原谅，如果还拿ie8一下说事，立马走人不干了！
让面试官满意最好的办法
1、多表达自己，免得让面试官主动问你
2、让对方看到你的发光点
3、一般面试官问一个大而无当的问题多半是他还没想到一个合适的问题，拖延一下时间，你可以和他一起把问题细化。
4、这个其实是需要分类去答，css兼容性网上很多，至于js的兼容性，看看jquery代码里面的注释就可以了
著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：郑海波
链接：https://www.zhihu.com/question/28954391/answer/43246616
来源：知乎
线性提问
1、能简单聊聊 行内级元素 和 块级元素 的区别吗
1)、内联元素，和其他元素都在一行上。
2)、内联元素中宽高，行高及顶和底边距不可设置。
3)、内联元素，只能容纳文本或者其他内联元素。
2、行内元素 能够定义宽度和高度吗？
不能
3、说说你熟悉的行内元素
行内元素：a、img、span、input、em、i、textarea、label、button、select、sub、sup
a、img、span、input、em、strong、select、label、textarea、button
4、img 能定义宽度和高度么
能
5、行内元素不能定义宽高 吗？为什么 img 可以？
不是所有的行内元素都不能设置宽高的、行内置换元素是可以设置的，
比如刚刚说的行内元素里面的：img， input，select，textarea，button
元素本身拥有固定的尺寸的元素、被称之为"置换元素"
置换元素：
JavaScript
介绍js的基本数据类型。
Undefined、Null、Boolean、Number、String
介绍js有哪些内置对象？
Object是JavaScript中所有对象的父对象
数据封装类对象：Array、Boolean、Number、String、object
其他对象：Function、Arguments、Math、Date、Error、RegExp
说几条写JavaScript的基本规范？
1、不要在一行声明多个变量
2、请使用===/!==来比较true/false或数值
3、请使用对象字面量方式代替new Array这种形式
4、不要使用全局函数、变量(函数不应该有时候有返回值、有时候没有返回值)
5、Switch语句必须带default分支
6、For循环必须使用大括号
7、If语句必须使用大括号
8、for-in循环中的变量、应该使用var关键字明确限定其作用域、从而避免作用域的污染
JavaScript原型、原型链？有什么特点？
什么是原型：原型是一个对象、其他对象可以通过它实现属性继承(任何对象都可以成为原型)
所有对象在默认情况下都有一个原型(原型本身就是个对象)
什么是对象(任何无序键值对的集合)如果它不是基本数据类型、那它就是一个对象
原型链：当我们访问这个对象的属性时、如果这个对象内部不存在这个属性、那么他就回去prototype里去查找、这个prototype又有自己的prototype属性。这样一直找下去。就是平时说的原型链概念
关系：instance.constructor.prototype = instance.__proto__
当我们需要一个属性时、JavaScript引擎会先查看当前对象中是否有这个属性
如果没有、就会查找他的prototype对象是否有这个属性、依次递推下去、一直检索到Object内检对象
function Func(){}
Func.prototype.name = "shen";
Func.prototype.getInfo = function(){
return this.name;
}
var person = new Func();
console.log(person.getInfo());
console.log(Func.prototype);
var a = {};
a.__proto__ = Array.prototype;
a.length;
创建a、然后通过a的原型来达到继承Array这个已经存在的对象的功能。
原型真正的美丽提现在多个实例、共用一个通用原型
原型对象的属性一旦定义、就可以被多个引用它的实例所继承、性能和未还的意义是很强的(这也是构造函数存在的意义)
每个函数都有一个原型属性。JavaScript没有在构造函数(constructor)和其他函数之间做区分。
JavaScript有几种类型的值？能画一下他们的内存图吗？
堆：原始数据类型(Undefined、Null、Boolean、Number、String)
栈：引用数据类型(对象、数组、函数)
两种类型的区别是：存储位置不同
原始数据类型：直接存储在栈(stack)中的简单数据段、占据空间小、大小固定、属于被"频繁"使用的数据
引用数据类型：存储在堆(heap)中、占据空间大、大小不固定、如果存储在栈中、将会影响程序运行的性能、
引用数据类型在栈中存储了指针、该指针指向堆中该实体的起始地址。
当解析器寻找引用值时、会首先检索其在栈中的地址、取得地址后从堆中获得
JavaScript如果实现继承？
1、构造函数继承
2、原型链继承
3、实例继承
4、拷贝继承
原型prototype机制或apply和call方法去实现较简单、建议使用构造函数与原型混合方式
function Parent(){
this.name = "shen";
}
function Child(){
this.age = 23;
}
Child.prototype = new Parent();
var Demo = new Child();
console.log(Demo.age);
console.log(Demo.name);
JavaScript创建对象的几种方式？
JavaScript创建对象、无非就是使用内置对象或者各种自定义对象。当然还可以使用JSON
1、对象字面量方式
person = {name:"shen",age:"23",eyecolor:"blue"};
2、用function来模拟无参的构造函数
function Person(){}
var person = new Person();// new 实例化
person.name = "Mark";
person.age = "23";
person.work = function(){
console.log(paerson.name + "hello...");
};
perosn.work();
3、用function来模拟构造函数来实现(用this关键字定义构造的上下文属性)
function Pet(name,age,hobby){
this.name = name;
this.age = age;
this.hobby = hobby;
this.eat = function(){
alert("我叫"+this.name+",我喜欢"+this.hobby+",是个哲学家");
}
}
var maiDou = new Pet("麦兜",25,"coding");//实例化、创建对象
maiDou.eat();
4、用工厂方式来创建(内置对象)
var wcDog =new Object();
wcDog.name="旺财";
wcDog.age=3;
wcDog.work=function(){
alert("我是"+wcDog.name+",汪汪汪......");
}
wcDog.work();
5、用原型方式来创建
function Dog(){
}
Dog.prototype.name="旺财";
Dog.prototype.eat=function(){
alert(this.name+"是个吃货");
}
var wangcai =new Dog();
wangcai.eat();
6、用混合方式创建
function Car(name,price){
this.name=name;
this.price=price;
}
Car.prototype.sell=function(){
alert("我是"+this.name+"，我现在卖"+this.price+"万元");
}
var camry =new Car("凯美瑞",27);
camry.sell();
Javascript作用链域?
全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。
当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，
直至全局函数，这种组织形式就是作用域链。
eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
null，undefined 的区别？
null：表示这个对象被定义了、值为"空"
undefined：表示不存在这个值
typeof undefined: "undefiend"
typeof null: "object"
注意：
在验证null时，一定要使用 === ，因为 == 无法分别 null 和 undefined
(undefined == null)
true
(undefined === null)
false
什么是window对象? 什么是document对象?
Window对象是所有浏览器脚本的基础、Window对象是浏览器自动定义的顶层对象
Document对象是文档的根节点。Window.document属性就是指向这个对象(只要浏览器开始载入HTML文档、这个对象就开始存在了、可以直接调用)、表示窗口中显示的当前文档对象
谈谈This对象的理解。
著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：萧强
链接：https://www.zhihu.com/question/19636194/answer/25081397
来源：知乎
javascript 中的 this 有 五种情况：
1.全局范围：它 会指向 全局对象（ 浏览器下指window）
2.全局函数调用：它 还是指向全局对象。
3.对象函数调用：调用某个对象的函数， 它指向 当前对象。
4.使用 new 实例化对象时：它指向 新创建的 对象。
5.调用某些方法时：如： Function.prototype 上的 call 或者 apply 方法 以及 with等它指向 传入的对象。
什么是闭包？为什么使用它？
定义在闭包中的函数可以"记忆"它创建时候的环境
闭包允许将函数与其所操作的某些数据(环境)关联起来
(如果不是因为某些特殊任务而需要闭包。在没有必要的情况下。在其他函数中创建函数是不明智的选择。因为闭包对脚本性能具有负面影响、包括处理速度和内除消耗)
在创建新的对象或者类时、方法通常应该关联对象的原型、而不是定义到对象的构造器中。原因是这将会导致每次构造函数被调用。方法都会被重新被赋值一次。
闭包是指有权访问另一个函数作用域中变量的函数
创建闭包的最常见方式就是在一函数内创建另一个函数、通过另一个函数访问这个函数的局部变量。(利用闭包可以突破作用域)
将函数内部的变量和方法传递到外部
闭包的特性：
1、函数内再嵌套函数
2、内部函数可以引用外层的参数和变量
3、参数和变量不会被GC回收
function say667() {
var num = 666;
var sayAlert = function() {
alert(num);
}
num++;
return sayAlert;
}
var sayAlert = say667();
sayAlert()
如何判断一个对象是否属于某个类
if(spear instanceof Array){console.log('yes');}
JavaScript代码中的"use strict"是什么意思？使用它区别是什么？
"use strict"是ECMAscript5添加的严格运行模式、这种模式使得JavaScript在更严格的条件下运行、使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。
提高编译器效率，增加运行速度；
为未来新版本的Javascript标准化做铺垫。
new操作符具体干了什么？
1、创建一个空对象、并且this变量引用该函数、同事还继承了该函数的原型
2、属性和方法被添加到this引入的对象中
3、新创建的对象由this说引用、并且最后隐式的返回this
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
JavaScript中、有一个函数、执行对象查找时、永远不会去查找原型、这个
hasOwnProperty：当前函数返回的是一个布尔值、指出一个对象是否具有指定名称的属性、此方法无法检查该对象的原型链中是否具有该属性(该属性必须是对象本身的一个成员属性)
object.hasOwnProperty(prName);
参数object是必选项、一个对象是实例
参数proName是必选项。一个属性名称的字符串值。
如果object具有制定名称的属性、那么JavaScript中的hasOwnProperty函数方法返回true、反之则返回false
谈谈This对象的理解。
javascript 中的 this 有 五种情况：
1.全局范围：它 会指向 全局对象（ 浏览器下指window）
2.全局函数调用：它 还是指向全局对象。
3.对象函数调用：调用某个对象的函数， 它指向 当前对象。
4.使用 new 实例化对象时：它指向 新创建的 对象。
5.调用某些方法时：如： Function.prototype 上的 call 或者 apply 方法 以及 with等它指向 传入的对象。
JSON的了解？
JSON一种轻量级的数据交换格式
它是基于JavaScript的一个子级。
数据格式简单、易于读写、占用带宽小
{
"name":"Ros",
"age":"32"
}
jQuery
针对jQuery的优化方法
1、基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。
2、频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。
var $oStr = $("a").attr("href");
for(var i = 0; i < arr.length; i++){}
for循环每一次循环都查找了数组(arr)的.length属性。在开始循环的时候设置一个变量来存储这个数字、可以让循环跑的更快
for(var i = 0,length = arr.length; i < length; i+=){}
Zepto的点透问题如何解决？
用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()
$("#cbFinish").on("touchend", function (event) {
//很多处理比如隐藏什么的
event.preventDefault();
});
对前端工程师这个职位是怎么样理解的？它的前景会怎么样？
前端是最贴近用户的程序员
让产品从 90分进化到 100 分，甚至更好。
1、与团队成员、UI设计、产品经理的快速、高效的沟通
2、快速高质量完成实现效果图
3、做好的页面结构，页面重构和用户体验
4、处理hack，兼容、写出优美、高复用的代码格式
5、针对服务器的优化、拥抱最新前端技术