整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
积跬步无以至千里，下面的内容是对网上原有的前端面试题集及答案进行了全面修订之后给出的负责任的题目和答案。原来的题目中有很多重复题目和无价值的题目，还有不少的参考答案也是错误的。修改后的前端面试题集去掉了过时的技术和框架，补充了现代前端开发所需的相关知识，包括HTML5、CSS3、JavaScript最新特性和最佳实践、响应式设计、前端性能优化、前端框架等内容。同时，修改后的题目集还对常见的面试算法题和设计模式等进行了深入剖析，相信对准备前端工程师职位的候选人一定有所帮助。
这里会不断收集和更新web前端相关的面试题，目前已收集100题。
转发本文+关注+私信【学习】获取以下完整面试PDF
SS
Web前端面试题及答案
本周面试题及答案题分享，请注意收藏哟~
Q:
Px 、em 、 rem、的区别？
A:
像素px是相对于显示器屏幕分辨率而言的。
em指的是一个字体的大小，它会继承父级元素的字体大小，因此并不是一个固定的值。
rem是CSS3新增的一个相对单位，相对的只是HTML根元素。
Q:
BFC 是什么? 在什么时候会触发? 触发方式有哪些?
A:
BFC：块级格式化上下文，它是一块独立的区域，它决定了区域内部的块级元素怎么布局，并且内部的布局不影响外部
触发：· float的值不为none；· overflow的值不为visible；·
display的值为inline-block、table-cell、table-caption；· position的值为absolute或fixed；
Q:
css3新增属性?
A:
新增选择器如：nth-child(), :not()等
其他：圆角radius 多列布局column 阴影和反射:shadow\reflect 文本特效text-shadow 文本渲染：text-decoration 线性渐变：gradient
Q:
如何设置阴影? 有哪些值?
A:
box-shadow: 10px 10px 5px #888888;
box-shadow: 水平 垂直 距离 尺寸 color inset 后面4个可选
Q:
relative和absolute分别是相对于谁进行定位的？
A:
relative 生成相对定位的元素，相对于其自身在普通流中的位置进行定位。
absolute 生成绝对定位的元素，相对于其向上查找第一个不为 static 定位的其他定位祖先元素进行定位。
Q:
介绍一下box-sizing，常用的属性有哪些？分别有什么作用？
A:
box-sizing: content-box|border-box|inherit;
content-box：在宽度和高度之外绘制元素的内边距和边框。常规
border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
Inherit：规定应从父元素继承 box-sizing 属性的值。
Q:
div+css的布局较table布局有什么优点？
A:
1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。
2.布局精准，网站版面布局修改简单。
3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。
4.节约站点所占的空间和站点的流量。
5.用只包含结构化内容的HTML代替嵌套的标签，
6.提高搜索引擎对网页的搜索效率。
往期回顾
Review of previous periods
●科普| 那些年，我们错过的Web前端成长之路
●初级前端工程师面试指南——先从做题开始！
●Web| 关于HTML的面试题了解一下！（内含福利）
大家如果觉得这些面试题太少太简单，
或者对以上问题答案有疑问！
那可以私信发送【微信】加朗妹儿微信沟通哟
备注“面试题”
即可免费获得更多面试题及答案哟~
法
用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，确保全部使用双引号，绝不要使用单引号。
不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。
不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。
实例：
<!DOCTYPE html><html>
HTML5 doctype
为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
实例：
<!DOCTYPE html><html>
语言属性
根据 HTML5 规范：
强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。
lang 属性的知识可以从 此规范 中了解。
这里列出了语言代码表。
<html lang="zh-CN">
IE 兼容模式
IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
字符编码
通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。
<head>
引入 CSS 和 JavaScript 文件
根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。
HTML5 spec links
Using link
Using style
Using script
<!-- External CSS --><link rel="stylesheet" href="code-guide.css"><!-- In-document CSS --><style>
实用为王
尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
属性顺序
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
class
id, name
data-*
src, for, type, href
title, alt
aria-*, role
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。
<a class="..." id="..." data-modal="toggle" href="#">
布尔（boolean）型属性
布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。
更多信息请参考 WhatWG section on boolean attributes：
元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。
如果一定要为其赋值的话，请参考 WhatWG 规范：
如果属性存在，其值必须是空字符串或 [...] 属性的规范名称，并且不要在首尾添加空白符。
简单来说，就是不用赋值。
<input type="text" disabled><input type="checkbox" value="1" checked><select>
减少标签的数量
编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。请看下面的案例：
<!-- Not so great --><span class="avatar">
JavaScript 生成的标签
通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
*请认真填写需求信息，我们会在24小时内与您取得联系。
