现在不管前端还是后端的程序员都很少会在面试的时候直接让你上机操作，而是先进行面试，通过后再进行笔试，那么在前端面试中会有哪些问题会经常问道呢？下面就总结出10条，供大家参考。
一、HTML部分常见问题
1、怎么让一个不定宽高的DIV，垂直水平居中？
答：1）使用CSS方法：
父盒子设置：display：table-cell；text-align：center；vertical-align：middle；
Div设置：display：inline-block；vertical-align：middl；
2）使用CSS3transform：
父盒子设置：display：relative
Div设置：transform：translate(-50%，-50%)；position：absolute；top：50%；left：50%；
2、position几个属性的作用？
答：position的常见四个属性值：relative，absolute，fixed，static。一般都要配合"left"、"top"、"right"以及"bottom"
属性使用。
1）Static：默认位置，设置为static的元素，它始终会处于页面流给予的位置（static元素会忽略任何top、bottom、left或right声明）。一般不常用。
2）Relative：位置被设置为relative的元素，可将其移至相对于其正常位置的地方，意思就是如果设置了relative值，那么，它偏移的top，right，bottom，left的值都以它原来的位置为基准偏移，而不管其他元素会怎么样。注意relative移动后的元素在原来的位置仍占据空间。
3）Absolute：位置设置为absolute的元素，可定位于相对于包含它的元素的指定坐标。意思就是如果它的父容器设置了position属性，并且position的属性值为absolute或者relative，那么就会依据父容器进行偏移。如
果其父容器没有设置position属性，那么偏移是以body为依据。注意设置absolute属性的元素在标准流中不占位置。
4）Fixed：位置被设置为fixed的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以body为依据的。注意设置fixed属性的元素在标准流中不占位置。
3、px，em，rem的区别？
答：1）px像素（Pixel）。绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。
2）em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
3）rem是CSS3新增的一个相对单位（rootem，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
4）区别：IE无法调整那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。
4、什么是BFC？
答：1）定义：
BFC(Blockformattingcontext)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部的Block-levelBox如何布局，并且与这个区域外部毫不相干。
布局规则：
A.内部的Box会在垂直方向，一个接一个地放置。
B.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
C.每个元素的marginbox的左边，与包含块borderbox的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
D.BFC的区域不会与floatbox重叠。
E.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
F.计算BFC的高度时，浮动元素也参与计算。
3）哪些元素会生成BFC：
A.根元素
B.float属性不为none
C.position为absolute或fixed
D.display为inline-block，table-cell，table-caption，flex，inline-flexF.overflow不为visible
5、表格自动换行怎么实现？
答：word-break：normal使用浏览器默认的换行规则；
break-all允许单词内换行；
keep-all只能在半角空格或连字符处换行
word-wrap：normal是用浏览器默认的换行规则；break-word在长单词或URL地址内部进行换行。
6、box-sizing、transition、translate分别是什么？
答：Box-sizing：用来指定盒模型的大小的计算方式。主要分为boreder-box（从边框固定盒子大小）、content-box（从内容固定盒子大小）两种计算方式。
transition：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。通过transtion-propety设置过渡属性；
transtion-duration设置过渡时间；
trantion-timing-function设置过渡速度；
trantion-delay设置过渡延时
translate：通过移动改变元素的位置；有x、y、z三个属性
7、选择器优先级是怎样的？
答：！important行内样式id选择器类选择器标签选择器通配符继承
权重算法：
（0，0，0，0）==》第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0对
应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的权重。
比较：
先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推
8、Iframe的作用？
答：用法：
Iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样可以在切换页面的时候避免重复下载。
优点：便于修改，模块分离，像一些信息管理系统会用到。但现在基本上不推荐使用。除非特殊需要，一般不推荐使用。
缺点:
（1）iframe的创建比一般的DOM元素慢了1-2个数量级
（2）iframe标签会阻塞页面的加载，如果页面的onload事件不能及时触发，会让用户觉得网页加载很慢，用户体验不好.在Safari和Chrome中可以通过js动态设置iframe的src属性来避免阻塞.
（3）iframe对于SEO不友好，替代方案一般就是动态语言的Incude机制和ajax动态填充内容等.
9、有一个导航栏在chrome里面样式完好？在IE里文字都聚到一起了，是哪个兼容性问题？
答：用了display：flex属性，在ie10以下都是无效的。
10、xhtml和html有什么区别？
答：HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：
XHTML元素必须被正确地嵌套。
XHTML元素必须被关闭。
标签名必须用小写字母。
XHTML文档必须拥有根元素。