web前端经典面试题有哪些？前端面试必备参考题

前端面试一般有两个流程，先笔试再面试或者机试。机试和面试都好说，到那时笔试如果没有足够的基础好多都会答不上来。今天一起来看看web前端经典面试题有哪些？前端面试必备参考题。

一、.什么是BFC？垂直margin重叠是为什么？怎么解决这个问题？

答：概念：BFC全称Block Formatting Context ，中文意思为块级格式上下文。

通俗的来说：BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子内部的元素无论如何翻江倒海，都不会影响到外部。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。比如清除浮动）并且在一个BFC中，块元素与行元素都会垂直的沿着其父元素的边框排列。

如何触发 BFC：

1.浮动元素，float 除 none 以外的值

2.position的值不为static或者relative

3.display不为none

4.overflow 除了 visible 以外的值

BFC的应用：

1.解决浮动塌陷问题

2.自适应两栏布局（我们还可以运用BFC可以阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。方法：给没有浮动的元素加overflow：hidden。）

3.解决设置margin值重叠问题。

总结：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。它规定了元素与其他元素的关系和相互作用。

二、什么是浮动，有什么作用，有何副作用，以及如何清除浮动？

答：浮动是使用给节点添加float属性，最初的设计是用来实现文字环绕的。

添加了float的节点脱离文档流，同时触发节点的BFC，让节点往一个方向靠，并排成一行。

当一个父节点的子节点全部浮动，就会造成父节点高度塌陷，

解决的办法首先是可以给父节点主动添加高度值，再者利用只要有一个子节点不浮动原理来添加一个不浮动的节点（通常使用伪元素before，after），再者还可以触发父节点的bfc，常用的定位，或者overflow：hidden。

三、CSS里面有哪些相对单位？都是相对什么的？

  答：REM,EM,VW,VH等

      REM：相对于根节点html的font-size

      EM：父节点的font-size

      VW：视口的宽度为 100VW，相对于把视口分为100份。

      VH：视口高度为100VH，同理

    以上单位都可以在移动端做页面适配，但通常使用REM和VW

四、fixed是相对于谁定位的？如果加上transform会出现问题吗？

  答：fixed定位相对于浏览器视口来定位的

      添加上transform以后，fixed定位会失效。如果fixed元素的祖先有transform属性,则fixed元素会相对与这个祖先计算,而不是视口。

五、为什么不推荐用style内联元素？内联元素有什么缺点？（css文件可以缓存）

  答：首先是style是节点的属性，不能被缓存；代码的可读性和可维护性相对弱一些，特别是多人协作开发的时候。但是如果一个页面的style样式足够少的时候，可以使用style元素，因为一次请求最多携带14K的数据，如果足够小，还可以节约一次请求。

web前端经典面试题有哪些？前端面试必备参考题。关注成都前端培训机构，带你了解更多相关问题。