前端面试技巧

一、页面布局

题目：假设高度已知，请写出三栏布局，左右各300px，中间自适应。
乍一看是否是很简单吗？那么答案应该回答几种？
思考的你是否是已经有答案了。像这种题，通常的面试者会给出两种答案 一、浮动 二、绝对定位 若是只是这两种答案，那么在面试者看来你尚未让面试者满意嗷。 这种题是一种开放性的题目，这种题写出两种，不及格，三种算是能及格，写出四种给你优秀，能写出五种说明你很优秀。
下面来公布答案来 一、浮动

<section class="sec1">
  <style media="screen">
    .sec1 .left {
      float: left;
    }
    .sec1 .right {
      float: right;
    }
  </style>
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="center">浮动 ： center--center--center--</div>
</section>
复制代码

二、绝对定位

<section class="sec2">
  <style media="screen">
  .sec2 {
    margin-top: 20px;
    position: relative;
  }
  .sec2 > div {
    position: absolute;
  }
  .sec2 .left {
    left: 0;
  }
  .sec2 .right {
    right: 0;
  }
  .sec2 .center {
    left: 300px;
    right: 300px;
  }
  </style>
  <div class="left">left</div>
  <div class="center">绝对定位 ： center--center--center--</div>
  <div class="right">right</div>
</section>
复制代码

三、flexbox

<section class="sec3">
  <style media="screen">
    .sec3 {
      margin-top: 240px;
      display: flex;
    }
    .sec3 .center {
      flex: 1;
    }
  </style>
  <div class="left">left</div>
  <div class="center">flex : center--center--center--</div>
  <div class="right">right</div>
</section>
`
复制代码

四、表格布局

<section class="sec4">
      <style media="screen">
        .sec4 {
          margin-top: 20px;
          display: table;
          width: 100%
        }
        .sec4 > div {
          display: table-cell;
        }
      </style>
      <div class="left">left</div>
      <div class="center">表格布局 : center--center--center--</div>
      <div class="right">right</div>
    </section>
复制代码

五、网格布局

<style media="screen">
.sec5 {
 margin-top: 20px;
 display: grid;
 width: 100%;
 grid-template-columns: 300px auto 300px;
}
</style>
<section class="sec5">
  <div class="left">left</div>
  <div class="center">网格布局 : center--center--center--</div>
  <div class="right">right</div>
</section>
复制代码

二、css盒模型

css盒模型想必你们都很是熟悉，这种看似简单的题实际上是最很差答的。
若是只回答标准模型 和IE模型，那么恭喜你，尚未赢得面试官的芳心欧，那么针对这类的题目咱们该怎么回答呢？本文将会从如下几个方面谈谈盒模型。
基本本概念：标准模型 和IE模型
CSS如何设置这两种模型
JS如何设置获取盒模型对应的宽和高
BFC（边距重叠解决方案）
下面咱们来一一解答
盒模型的组成你们确定都懂，由里向外content,padding,border,margin。
盒模型是有两种标准的，一个是标准模型，一个是IE模型。
回答上盒模型的组成和这两种标准是基本的。 那么若是接下来你能回答出来这两种盒模型之间互相怎样转换？ 那么他们怎么进行相互转换的呢？想必你也不陌生吧。
/* 标准模型 /
box-sizing:content-box;
/ IE模型 */
box-sizing:border-box;
第三个问题，JS怎么获取和设置box的宽高呢，你能想到几种方法？

1. dom.style.width/height

   这种方式只能取到dom元素内联样式所设置的宽高，也就是说若是该节点的样式是在style标签中或外联的CSS文件中设置的话，经过这种方法是获取不到dom的宽高的。

2. dom.currentStyle.width/height

  这种方式获取的是在页面渲染完成后的结果，就是说无论是哪一种方式设置的样式，都能获取到。但这种方式只有IE浏览器支持。

3. window.getComputedStyle(dom).width/height

  这种方式的原理和2是同样的，这个能够兼容更多的浏览器，通用性好一些。

4. dom.getBoundingClientRect().width/height

  这种方式是根据元素在视窗中的绝对位置来获取宽高的

5.dom.offsetWidth/offsetHeight

  这个就没什么好说的了，最经常使用的，也是兼容最好的。 回答到这，面试的你确定让面试官眼前一亮
那么接下来在说一下边距重叠的问题以及边距重叠的解决方案，那么这到题你就回答的基本上完美了。
两个box若是都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。
父子关系的边距重叠： 父元素没有设置margin-top，而子元素设置了margin-top：20px;能够看出，父元素也一块儿有了边距。
边距重叠解决方案(BFC)
首先要明确BFC是什么意思，其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”
BFC的原理
一、内部的box会在垂直方向，一个接一个的放置
二、每一个元素的margin box的左边，与包含块border
box的左边相接触（对于从作往右的格式化，不然相反）
三、box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
四、bfc的区域不会与浮动区域的box重叠
五、bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
六、计算bfc高度的时候，浮动元素也会参与计算
BFC如何产生–

• overflow: auto/ hidden;
  
• position: absolute/ fixed;
  
• float: left/ right;
  
• display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
  在属性值为这些的状况下，都会让所属的box产生BFC。
  

三、DOM事件

一、DOM事件的级别
二、DOM事件的模型
三、DOM事件流
四、描述DOM事件捕获的具体流程
window --> document --> documentElement(html标签) --> body --> .... -->目标对象 五、event对象常见应用
六、自定义事件

四、HTTP协议

一、http协议的特色 二、什么是持久链接 三、什么是管线化

五、javascript面向对象

一、js原型

六、通讯

七、安全

八、算法

九、框架