web前端工程师面试题更新了，找工做必背的面试题 一

一、用纯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;

二、为何要初始化CSS样式

答案：由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别。

三、CSS里的visibility属性有个collapse属性值？在不一样浏览器下之后什么区别？

答案：当一个元素的visibility属性被设置成collapse值后，对于通常的元素，它的表现跟hidden是同样的。

chrome中，使用collapse值和使用hidden没有区别。

firefox，opera和IE，使用collapse值和使用display：none没有什么区别。

四、在网页中的应该使用奇数仍是偶数的字体？为何呢？

答案：使用偶数字体。偶数字号相对更容易和 web 设计的其余部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 十二、1四、16 px 这三个大小的点阵，而 1三、1五、17 px时用的是小一号的点。（即每一个字占的空间大了 1 px，但点阵没变），因而略显稀疏。

五、元素竖向的百分比设定是相对于容器的高度吗？

答案：当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，可是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

六、html5哪些操做能够SEO优化？

title标签；meta标签；header标签；footer标签

元标签（meta标签）；导航标签（nav标签）；文章标签（article标签）；左或右侧标签（aside标签）

七、简述对Web语义化的理解？

就是让浏览器更好的读懂你写的代码，在进行HTML结构、表现、行为设计时，尽可能使用语义化的标签，使程序代码简洁明了，易于进行web操做和网站SEO，方便团队的一种标准，以图实现一种“无障碍”的web开发。

八、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三个属性

九、html中 document的做用是什么？

HTML即：超文本标记语言，标准通用标记语言的一个应用，“超文本”就是指页面内能够包含图片、连接、甚至音乐、程序等非文字元素。

HTML Document即：HTML Document对象，每一个载入浏览器的HTML文档都会成为Document对象

因为Document对象是window对象的一部分，因此可经过window.document属性对其进行访问。

十、谈谈你对前端性能优化的理解

a. 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域

b. 请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon作成字体

c. 缓存利用：使用CDN，使用外部JavaScript和CSS，添加Expires头，减小DNS查找，配置ETag，使AjaX可缓存

d. 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出

e. 代码校验：避免CSS表达式，避免重定向