‘壹’ 伪类 伪元素 如何区分
伪类 按现在的规范应当书写成 :weilei伪元素 按现在的规范 应当书写成 ::weiyuansu
但是 以前规范不明确的时候 伪元素 和 伪类 都是写成 :weiyuansu :weilei
为了兼容过去的写法
所以 你的伪元素 写成一个引号的形式 也是可以被解析的
伪元素主要有：E:first-letter/E::first-letter E:first-line/E::first-line E:before/E::before E:after/E::after E::placeholder E::selection
伪类主要有：E:link E:visited E:hover E:active E:focus E:lang(fr) E:not(s) E:root E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n) E:first-of-type E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-last-of-type(n) E:empty E:checked E:enabled E:disabled E:target @page:first @page:left @page:right
单冒号 双冒号 主要是为了区别 伪元素还是伪类
‘贰’ Web前端岗位面试题有哪些
前端面试题汇总，基本上会有四大类问题，具体如下：
一、HTML
1、Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
2、HTML5 为什么只需要写 <!DOCTYPE HTML>？
3、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
4、页面导入样式时，使用link和@import有什么区别？
5、介绍一下你对浏览器内核的理解？
6、常见的浏览器内核有哪些？
7、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
8、简述一下你对HTML语义化的理解？
9、HTML5的离线储存怎么使用，工作原理能不能解释一下？
10、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
11、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
12、iframe有那些缺点？
13、Label的作用是什么？是怎么用的？（加 for 或 包裹）
14、HTML5的form如何关闭自动完成功能？
15、如何实现浏览器内多个标签页之间的通信? (阿里)
16、webSocket如何兼容低浏览器？(阿里)
17、页面可见性（Page Visibility）API 可以有哪些用途？
18、如何在页面上实现一个圆形的可点击区域？
19、实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、网页验证码是干嘛的，是为了解决什么安全问题？
21、tite与h1的区别、b与strong的区别、i与em的区别？
二、css
1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
2、CSS选择符有哪些？哪些属性可以继承？
3、CSS优先级算法如何计算？
4、CSS3新增伪类有那些？
5、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
6、display有哪些值？说明他们的作用。
7、position的值relative和absolute定位原点是？
8、CSS3有哪些新特性？
9、请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
10、用纯CSS创建一个三角形的原理是什么？
11、一个满屏 品 字布局 如何设计?
三、常见兼容性问题？
1、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
2、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
3、为什么要初始化CSS样式。
4、absolute的containing block计算方式跟正常流有什么不同？
5、CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
6、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
7、对BFC规范(块级格式化上下文：block formatting context)的理解？
8、CSS权重优先级是如何计算的？
9、请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
10、移动端的布局用过媒体查询吗？
11、使用 CSS 预处理器吗？喜欢那个？
12、CSS优化、提高性能的方法有哪些？
13、浏览器是怎样解析CSS选择器的？
14、在网页中的应该使用奇数还是偶数的字体？为什么呢？
15、margin和padding分别适合什么场景使用？
16、抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]
17、元素竖向的百分比设定是相对于容器的高度吗？
18、全屏滚动的原理是什么？用到了CSS的那些属性？
19、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
20、视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）
21、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
22、如何修改chrome记住密码后自动填充表单的黄色背景 ？
23、你对line-height是如何理解的？
24、设置元素浮动后，该元素的display值是多少？（自动变成display:block）
25、怎么让Chrome支持小于12px 的文字？
26、让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）
27、font-style属性可以让它赋值为“oblique” oblique是什么意思？
28、position:fixed;在android下无效怎么处理？
29、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
30、display:inline-block 什么时候会显示间隙？(携程)
31、overflow: scroll时不能平滑滚动的问题怎么处理？
32、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
33、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
34、什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
35、style标签写在body后与body前有什么区别？
四、JavaScript
1、介绍JavaScript的基本数据类型。
2、说说写JavaScript的基本规范？
3、JavaScript原型，原型链 ? 有什么特点？
4、JavaScript有几种类型的值？（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的内存图吗？
5、Javascript如何实现继承？
6、Javascript创建对象的几种方式？
7、Javascript作用链域?
8、谈谈This对象的理解。
9、eval是做什么的？
10、什么是window对象? 什么是document对象?
11、null，undefined的区别？
12、写一个通用的事件侦听器函数(机试题)。
13、[“1”, “2”, “3”].map(parseInt) 答案是多少？
14、关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
15、什么是闭包（closure），为什么要用它？
16、javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？
17、如何判断一个对象是否属于某个类？
18、new操作符具体干了什么呢?
19、用原生JavaScript的实现过什么功能吗？
20、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
21、对JSON的了解？
22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗？
23、js延迟加载的方式有哪些？
24、Ajax 是什么? 如何创建一个Ajax？
25、同步和异步的区别?
26、如何解决跨域问题?
27、页面编码和被请求的资源编码如果不一致如何处理？
28、模块化开发怎么做？
29、AMD（Moles/Asynchronous-Definition）、CMD（Common MoleDefinition）规范区别？
30、requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）
31、让你自己设计实现一个requireJS，你会怎么做？
32、谈一谈你对ECMAScript6的了解？
33、ECMAScript6 怎么写class么，为什么会出现class这种东西?
34、异步加载的方式有哪些？
35、documen.write和 innerHTML的区别?
36、DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
37、.call() 和 .apply() 的含义和区别？
38、数组和对象有哪些原生方法，列举一下？
39、JS 怎么实现一个类。怎么实例化这个类
40、JavaScript中的作用域与变量声明提升？
41、如何编写高性能的Javascript？
42、那些操作会造成内存泄漏？
43、JQuery的源码看过吗？能不能简单概况一下它的实现原理？
44、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？
45、jquery中如何将数组转化为json字符串，然后再转化回来？
46、jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
47、jquery.extend 与 jquery.fn.extend的区别？
48、jQuery 的队列是如何实现的？队列可以用在哪些地方？
49、谈一下Jquery中的bind(),live(),delegate(),on()的区别？
50、JQuery一个对象可以同时绑定多个事件，这是如何实现的？
51、是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？
52、jQuery 是通过哪个方法和 Sizzle 选择器结合的？（jQuery.fn.find()进入Sizzle）
53、针对 jQuery性能的优化方法？
54、Jquery与jQuery UI有啥区别？
55、JQuery的源码看过吗？能不能简单说一下它的实现原理？
56、jquery 中如何将数组转化为json字符串，然后再转化回来？
57、jQuery和Zepto的区别？各自的使用场景？
58、针对 jQuery 的优化方法？
59、Zepto的点透问题如何解决？
60、jQueryUI如何自定义组件?
61、需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
62、如何判断当前脚本运行在浏览器还是node环境中？（阿里）
63、移动端最小触控区域是多大？
64、jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?
65、把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？
66、移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？（click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。）
67、知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?
68、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？
69、解释JavaScript中的作用域与变量声明提升？
70、那些操作会造成内存泄漏？
71、JQuery一个对象可以同时绑定多个事件，这是如何实现的？
72、Node.js的适用场景？
(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
73、解释一下 Backbone 的 MVC 实现方式？
74、什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
75、知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?
76、如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
77、前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
78、简述一下 Handlebars 的基本用法？
79、简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？
80、用js实现千位分隔符?(来源：前端农民工，提示：正则+replace)
检测浏览器版本版本有哪些方式？
81、我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获
‘叁’ 参加Web前端面试必备的CSS知识点
今天小编要跟大家分享的文章是关于参加web前端面试必备的CSS知识点。css基本内容包括，类选择符，id选择符，伪类，伪元素，结构，继承，特殊性，层叠，元素分类，颜色，长度，url，文本，字体，边框，块级元素，浮动元素，内联元素，定位。下面来和小编一起看一看吧！
链接：
link标签：
样式：
h1{color:red;};
@import指示引入多个外部样式表的链接
@importurl(styles.css);
p{color:red};
css注解
/*dashucoding*/
内联样式：
规范：
选择符+声明
p{color:red;}//选择符属性值
p{font-weight:bold;}
伪类和伪元素
属性说明
:link超链接是一个未访问过的地址
:visited访问过的网页
:active处于活跃的状态
a{color:red;};a:visited{color:red;};
伪元素：
:first-letter和:first-line首字母和首行
p:first-letter{color:red;}
css有个特点是继承，可以依赖于祖先-后代关系。
!important有这个标记，表示这条规则优先
p{color:red!important;}
元素分类：
三种类型：块级元素，内联元素，列表项元素
块级元素有段落，标题，列表，表格，div，body等。内联元素有a，em，span等。列表项元素有li元素。
dispaly:block|inline|list-item|none
颜色：
rgb(100%,100%,100%)红蓝绿，白色
单位：
em给字体的font-size值
文本：
文本缩进
text-indent<长度>|<百分比>
p{text-indent:-4em;}
text-align属性
用于元素中文本行的对齐方式
text-align:left|center|right|justify
white-space空白
white-spacepre|nowrap|normal
p{white-space:normal;}将如何空白压缩成单个空白符
white-space属性值为pre，可以将元素内的空白忽略。
p{white-space:pre;}
行高：
line-height文本行的基线间的距离。
纵向对齐，vertical-align
vertical-align:baseline使元素的基线同父元素的基线对齐。
vertical-align:sub;vertical-align:super;
低端对齐：vertical-align
顶端对齐：vertical-align
vertical-align:top;vertical-align:text-top;
中间对齐：
vertical-align:middle;
文字间隔：
word-spacing长度|normal
word-spacing:0.3em;
字母间隔：
letter-spacing:长度|normal
文本转换：
text-transformuppercase|lowercase|capitalize|none
文本修饰：
text-decoration:none|overline|line-through
框：
width长度|百分比|auto
height长度|auto
margin长度|百分比|auto
margin:toprightbottomleft
margin-top
margin-right
margin-bottom
margin-left
border-width//thinmediumthick
border-style:none;
padding
浮动与清除
float:left|right|none
float:none用于防止元素浮动
清除浮动元素
clearleft|right|both|none
clear原理是增加元素的上边界，使它在低于浮动元素的位置结束，清除元素的上边界宽度当有效地忽略。
list-style-typedisc
disc|circle|square|decimal|upper-alpha|lower-alpha|upper-roman
|lower-roman|none
list-style-type
disc为实心圆
circle为空心圆
square实心或空心方块
列表项图像
list-style-image
列表项位置：list-style-position
list-style-position:inside|outside
定位：
position:static|relative|absolute|fixed|inherit
溢出：
overflow:visible|hidden|scroll|auto|inherit
溢出剪切：
overflow-clip:rect|auto|inherit
元素剪切：
cliprect|auto|inherit
元素可见性：
visibility:visible|hidden|collapse|inherit
相对定位：
position:relative;
绝对定位：
position:relative;
固定定位：
position:fixed;
层叠定位：
z-index:integer|auto
轮廓：
outline,outline-color,outline-style,outline-width
边框：
border-top-color,border-right-color,border-bottom-color
border-left-color,border-top-style
border-right-style,border-left-style
实例：
以上就是小编今天为大家分享的关于参加web前端面试必备的CSS知识点的文章，希望本篇文章能够对准备参加web前端面试的小伙伴没呢有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的web前端工程师。
文章来源：原创Jeskson达达前端
‘肆’ 前端开发工程师面试题目大全
HTML
Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
HTML5为什么只需要写？
行内元素有哪些？块级元素有哪些？空(void)元素有那些？
页面导入样式时，使用link和@import有什么区别？
介绍一下你对浏览器内核的理解？
常见的浏览器内核有哪些？
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
简述一下你对HTML语义化的理解？
HTML5的离线储存怎么使用，工作原理能不能解释一下？
浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
请描述一下cookies，sessionStorage和localStorage的区别？
iframe有那些缺点？
Label的作用是什么？是怎么用的？（加for或包裹）
HTML5的form如何关闭自动完成功能？
如何实现浏览器内多个标签页之间的通信?(阿里)
webSocket如何兼容低浏览器？(阿里)
页面可见性（PageVisibilityAPI）可以有哪些用途？
如何在页面上实现一个圆形的可点击区域？
实现不使用border画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
网页验证码是干嘛的，是为了解决什么安全问题？
title与h1的区别、b与strong的区别、i与em的区别？
CSS
介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
CSS选择符有哪些？哪些属性可以继承？
CSS优先级算法如何计算？
CSS3新增伪类有那些？
如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
display有哪些值？说明他们的作用。
position的值relative和absolute定位原点是？
CSS3有哪些新特性？
请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
用纯CSS创建一个三角形的原理是什么？
css多列等高如何实现？
一个满屏品字布局如何设计?
经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
为什么要初始化CSS样式?
absolute的containingblock计算方式跟正常流有什么不同？
CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
position跟display、margincollapse、overflow、float这些特性相互叠加后会怎么样？
对BFC规范(块级格式化上下文：blockformattingcontext)的理解？
CSS权重优先级是如何计算的？
请解释一下为什么需要清除浮动？清除浮动的方式
zoom:1的清楚浮动原理?
移动端的布局用过媒体查询吗？
使用CSS预处理器吗？喜欢那个？
CSS优化、提高性能的方法有哪些？
浏览器是怎样解析CSS选择器的？
在网页中的应该使用奇数还是偶数的字体？为什么呢？
margin和padding分别适合什么场景使用？
抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]
元素竖向的百分比设定是相对于容器的高度吗？
全屏滚动的原理是什么？用到了CSS的那些属性？
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）
::before和:after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。
如何修改chrome记住密码后自动填充表单的黄色背景？
你对line-height是如何理解的？
设置元素浮动后，该元素的display值是多少？（自动变成display:block）
怎么让Chrome支持小于12px的文字？
让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing:antialiased;）
font-style属性可以让它赋值为“oblique”oblique是什么意思？
position:fixed;在android下无效怎么处理？
如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
display:inline-block什么时候会显示间隙？(携程)
overflow:scroll时不能平滑滚动的问题怎么处理？
有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
png、jpg、gif这些图片格式解释一下，分别什么时候用。有没有了解过webp？
什么是Cookie隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
style标签写在body后与body前有什么区别？
什么是CSS预处理器/后处理器？
JavaScript
介绍JavaScript的基本数据类型。
说说写JavaScript的基本规范？
JavaScript原型，原型链?有什么特点？
JavaScript有几种类型的值？（堆：原始数据类型和栈：引用数据类型），你能画一下他们的内存图吗？
Javascript如何实现继承？
Javascript创建对象的几种方式？
Javascript作用链域?
谈谈this对象的理解。
eval是做什么的？
什么是window对象?什么是document对象?
null，undefined的区别？
写一个通用的事件侦听器函数(机试题)。
["1","2","3"].map(parseInt)答案是多少？
关于事件，IE与火狐的事件机制有什么区别？如何阻止冒泡？
什么是闭包（closure），为什么要用它？
javascript代码中的"usestrict";是什么意思?使用它区别是什么？
如何判断一个对象是否属于某个类？
new操作符具体干了什么呢?
用原生JavaScript的实现过什么功能吗？
Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
对JSON的了解？
[].forEach.call($$("*"),function(a){a.style.outline="1pxsolid#"+(~~(Math.random()*(1<<24))).toString(16)})能解释一下这段代码的意思吗？
js延迟加载的方式有哪些？
Ajax是什么?如何创建一个Ajax？
同步和异步的区别?
如何解决跨域问题?
页面编码和被请求的资源编码如果不一致如何处理？
模块化开发怎么做？
AMD（Moles/Asynchronous-Definition）、CMD（CommonMoleDefinition）规范区别？
requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）
JS模块加载器的轮子怎么造，也就是如何实现一个模块加载器？
谈一谈你对ECMAScript6的了解？
ECMAScript6怎么写class，为什么会出现class这种东西?
异步加载的方式有哪些？
documen.write和innerHTML的区别?
DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
.call()和.apply()的作用和区别？
数组和对象有哪些原生方法，列举一下？
JS怎么实现一个类。怎么实例化这个类
JavaScript中的作用域与变量声明提升？
如何编写高性能的Javascript？
那些操作会造成内存泄漏？
JQuery的源码看过吗？能不能简单概况一下它的实现原理？
jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？
jquery中如何将数组转化为json字符串，然后再转化回来？
jQuery的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
jquery.extend与jquery.fn.extend的区别？
jQuery的队列是如何实现的？队列可以用在哪些地方？
谈一下Jquery中的bind(),live(),delegate(),on()的区别？
JQuery一个对象可以同时绑定多个事件，这是如何实现的？
是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？
jQuery是通过哪个方法和Sizzle选择器结合的？（jQuery.fn.find()进入Sizzle）
针对jQuery性能的优化方法？
Jquery与jQueryUI有啥区别？
JQuery的源码看过吗？能不能简单说一下它的实现原理？
jquery中如何将数组转化为json字符串，然后再转化回来？
jQuery和Zepto的区别？各自的使用场景？
针对jQuery的优化方法？
Zepto的点透问题如何解决？
jQueryUI如何自定义组件?
需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
如何判断当前脚本运行在浏览器还是node环境中？（阿里）
移动端最小触控区域是多大？
jQuery的slideUp动画，如果目标元素是被外部事件驱动,当鼠标快速地连续触发外部元素事件,动画会滞后的反复执行，该如何处理呢?
把Script标签放在页面的最底部的body封闭之前和封闭之后有什么区别？浏览器会如何解析它们？
移动端的点击事件的有延迟，时间是多久，为什么会有？怎么解决这个延时？（click有300ms延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。）
知道各种JS框架(Angular,Backbone,Ember,React,Meteor,Knockout...)么?能讲出他们各自的优点和缺点么?
Underscore对哪些JS原生对象进行了扩展以及提供了哪些好用的函数方法？
解释JavaScript中的作用域与变量声明提升？
那些操作会造成内存泄漏？
JQuery一个对象可以同时绑定多个事件，这是如何实现的？
Node.js的适用场景？
(如果会用node)知道route,middleware,cluster,nodemon,pm2,server-siderendering么?
解释一下Backbone的MVC实现方式？
什么是“前端路由”?什么时候适合使用“前端路由”?“前端路由”有哪些优点和缺点?
知道什么是webkit么?知道怎么用浏览器的各种工具来调试和debug代码么?
如何测试前端代码么?知道BDD,TDD,UnitTest么?知道怎么测试你的前端工程么(mocha,sinon,jasmin,qUnit..)?
前端templating(Mustache,underscore,handlebars)是干嘛的,怎么用?
简述一下Handlebars的基本用法？
简述一下Handlerbars的对模板的基本处理流程，如何编译的？如何缓存的？
用js实现千位分隔符?(提示：正则+replace)
检测浏览器版本版本有哪些方式？
WhatisaPolyfill?
做的项目中，有没有用过或自己实现一些polyfill方案（兼容性处理方案）？
我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？
使用JS实现获取文件扩展名？
答案自己先慢慢找哈。
‘伍’ Web前端面试之css高频面试题
今天小编要跟大家分享的文章是关于web前端面试之css高频面试题。想要参加web前端面试的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。
1.什么是BFC机制
BFC(BlockFormattingContext)，块级格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
·___シ⑻跫(以下任意一条)
§_loat的值不为none
§_verflow的值不为visible
§_isplay的值为table-cell、tabble-caption和inline-block之一
§_osition的值不为static或则releative中的任何一个
在IE下,Layout,可通过zoom:1_シ
·___FC布局与普通文档流布局区别:
BFC布局规则:
1._浮动的元素会被父级计算高度(父级元素触发了BFC)
2._非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
3._margin不会传递给父级(父级触发BFC)
4._属于同一个BFC的两个相邻元素上下margin会重叠
5._普通文档流布局:浮动的元素是不会被父级计算高度
6._非浮动元素会覆盖浮动元素的位置
7._margin会传递给父级元素
8._两个相邻元素上下的margin会重叠
·___⒅械挠τ
§_柚_argin重叠
§_梢园《亍宄诓扛《(清除浮动的原理是两个div都位于同一个BFC区域之中)
§_允视α嚼覆季
§_梢宰柚乖乇桓《馗哺
2.CSS3中新增的选择器以及属性
这里只是列出来,具体的使用,请查看我的关于css3新增选择器与属性文章
·___粜匝≡衿
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
属性选择器
含义描述
E[att^="val"]
属性att的值以"val"开头的元素
E[att$="val"]
属性att的值以"val"结尾的元素
E[att*="val"]
属性att的值包含"val"字符串的元素
·___峁刮崩嘌≡衿
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
选择器
含义描述
E:root
匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)
匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)
匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)
与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)
与:nth-last-child()作用类似，但是仅匹配使用同种标签的元素
E:last-child
匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type
匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type
匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child
匹配父元素下仅有的一个子元素，等同于:first-child:last-child或:nth-child(1):nth-last-child(1)
E:only-of-type
匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)
E:empty
匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素
·___ss3新增属性
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
属性
含义描述
兼容
transition
设置过渡效果
transform
变换效果(移动、缩放、转动、拉长或拉伸)
animation
动画效果
box-shadow
阴影效果
FF3.5,Safari4,Chrome3
text-shadow
文本阴影
FF3.5,Opera10,Safari4,Chrome3
border-colors
为边框设置多种颜色
FF3+
boder-image
图片边框
FF3.5,Safari4,Chrome3
text-overflow
文本截断
IE6+,Safari4,Chrome3,Opera10
word-wrap
自动换行
IE6+,FF3.5,Safari4,Chrome3
border-radius
圆角边框
FF3+,Safari4,Chrome3
opacity
不透明度
all
box-sizing
控制盒模型的组成模式
FF3+,Opera10,Safari4,Chrome3
outline
外边框
FF3+,safari4,chrome3,opera10
background-size
不指定背景图片的尺寸
safari4,chrome3,opera10
background-origin
指定背景图片从哪里开始显示
safari4,chrome3,FF3+
background-clip
指定背景图片从什么位置开始裁切
safari4,chrome3
rgba
基于r,g,b三个颜色通道来设置颜色值,通过a来设置透明度
safari4,chrome3,FF3,opera10
3.居中布局
·___骄又
1._行内元素:_ext-align:center
2._块级元素:_argin:0auto
3._绝对定位和移动:_bsolute+transform
4._绝对定位和负边距:_bsolute+margin
5._flex布局:_lex+
justify-content:center
·___怪本又
1._子元素为单行文本:_ine-height:height
2._absolute+transform
3._flex+align-items:center
4._table:_isplay:table-cell;vertical-align:
middle
5._利用position和top和负margin
·___酱怪本又_HAPE*MERGEFORMAT
1.已知元素宽高:绝对定位+margin:auto:
_div{
___idth:200px;
___eight:200px;
___ackground:
green;
___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_
2.已知元素宽高:_远ㄎ+负margin
_div{
___idth:200px;
___eight:200px;
___ackground:
green;
___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_
3.absolute+transform
_div{
__width:200px;
__height:200px;
__background:
green;
__position:absolute;
__left:50%;_/*定位父级的50%*/
__top:50%;
__transform:translate(-50%,-50%);/*自己的50%*/
_}
4.flex+justify-content
+align-items
.box{
_height:600px;
_display:flex;
_justify-content:center;//子元素水平居中
_align-items:center;__//子元素垂直居中
__/*aa只要三句话就可以实现不定宽高水平垂直居中。*/
__
.box>div{
__ackground:
green;
__idth:200px;
__eight:200px;
_
4.清除浮动有哪些方法,各有什么优缺点
·___褂_lear属性的空元素
在浮动元素后使用一个空元素如
‘陆’ css中伪类和伪元素的区别和他们的具体解释
伪元素的权重比伪类高，比如一个容器的为元素和伪类都定义了同一属性，但值不一样，那么将采用伪元素的。
从规范的角度伪元素一个页面只使用一次，而伪类可以多次使用。
‘柒’ css伪元素和伪类的区别
伪类和伪元素的区别，其实很简单，从字面上就可以理解。它们有一个共同的修饰词“伪”，那么“伪”是什么意思呢?就是假的。所以，伪类就是假的类，伪元素就是假的元素，这就是在字面上它们之间的区别。
定义
伪类：
CSS3给出的定义是：
The pseudo-class concept is introced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.
大致翻译过来的意思就是：伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。
通过上面的概念我们知道了伪类的功能有两种：
1.格式化DOM树以外的信息。比如：标签的:link、:visited 等。这些信息不存在于DOM树中。
2.不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。
所以，你可以理解伪元素本质上是创建了一个虚拟容器(元素)了吧。
除了上面这个本质区别以外，在CSS3中：
3.伪类用单冒号:表示;而伪元素用双冒号::表示。
4.一个选择器可以同时使用多个伪类(但有的伪类会互斥);而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。
关于CSS的更多详解，可以下看这个详细直观的视频教程，网页链接
希望我的回答能帮到你