1、用纯CSS创建一个三角形的原理是什么？
答案：首先，需要把元素的宽度、高度设为0。然后设置边框样式。
width: 0;height: 0;
border-top: 40px solid transparent; border-left: 40px solid transparent;
border-right: 40px solid transparent; border-bottom: 40px solid #ff0000;
2、为什么要初始化CSS样式
答案：因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
3、CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？
答案：当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。
chrome中，使用collapse值和使用hidden没有区别。
firefox，opera和IE，使用collapse值和使用display：none没有什么区别。
4、在网页中的应该使用奇数还是偶数的字体？为什么呢？
答案：使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。
5、元素竖向的百分比设定是相对于容器的高度吗？
答案：当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
6、html5哪些操作可以SEO优化？
title标签；meta标签；header标签；footer标签
元标签（meta标签）；导航标签（nav标签）；文章标签（article标签）；左或右侧标签（aside标签）
7、简述对Web语义化的理解？
就是让浏览器更好的读懂你写的代码，在进行HTML结构、表现、行为设计时，尽量使用语义化的标签，使程序代码简洁明了，易于进行web操作和网站SEO，方便团队的一种标准，以图实现一种“无障碍”的web开发。
8、box-sizing、transition、translate分别是什么？
a. box-sizing:用来指定模型的大小的计算方式。主要分为border-box(从边框固定盒子大小)、content-box(从内容固定盒子大小)两种计算方式。
b. transition:当前元素只要有"属性"发生变化时，可以平滑的进行过渡。通过transition-propety设置过渡属性；transition-duration设置过渡时间；transition-timing-function设置过渡速度；transition-delay设置过渡延时。
c. translate：通过移动改变元素的位置；有x,y,z三个属性
9、html中 document的作用是什么？
HTML即：超文本标记语言，标准通用标记语言的一个应用，“超文本”就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。
HTML Document即：HTML Document对象，每个载入浏览器的HTML文档都会成为Document对象
由于Document对象是window对象的一部分，所以可通过window.document属性对其进行访问。
10、谈谈你对前端性能优化的理解
a. 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
b. 请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体
c. 缓存利用：使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存
d. 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
e. 代码校验：避免CSS表达式，避免重定向
