1、页面布局

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

<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>

2、绝对定位

<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>

3、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>
`

4、表格布局

<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>

5、网格布局

<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>

2、css盒模型

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

dom.style.width/height

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

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

window.getComputedStyle(dom).width/height

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

dom.getBoundingClientRect().width/height

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

5.dom.offsetWidth/offsetHeight

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

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

3、DOM事件

1、DOM事件的级别
2、DOM事件的模型
3、DOM事件流
4、描述DOM事件捕获的具体流程
window --> document --> documentElement(html标签) --> body --> .... -->目标对象 5、event对象常见应用
6、自定义事件

4、HTTP协议

1、http协议的特点 2、什么是持久连接 3、什么是管线化

5、javascript

1、js的数据类型

基本数据类型：null、undefined、boolean、number、string、symbol、BigInt
引用数据类型：function、Array、Object
两种类型的区别：
基本数据类型存储在栈中，占据的空间小、大小固定，属于频繁使用的数据。
引用数据类型占据空间大、大小不固定，存储在堆中，如果存储在栈中会影响性能，变量其实是保存的在栈内存中的一个指针。

2、js的数据类型的类型判断

typeof

typeof对于基本类型的数据，除了null都可以正确显示类型，null在设计之初就是对象。对于引用数据类型，不能区分object、Array

instanceof

能够区分object、Array、function，但是不能区分number、boolean、string
原理：检测右边构造函数的prototype，是否在左边对象的原型链上。
实现instanceof

function instanceof(left, right) {
    //获取右边的原型
    let prototype = right.prototype;
    // 获取左边对象的原型
    let pro = left._proto_
    while(true) {
        if(left == null) { // 如果左侧对象为null，instanceof就会失真，原型链的尽头就是null
            return false;
        } else if(prototype == pro) {
            return true;
        }
        pro = left._proto_
    }
}

obejct.prototype.toString.call()

能准确判断数据类型

判断数组

1、Array.isArray()
2、[] instanceof Array
3、[].constructor === []
4、obejct.prototype.toString.call([])

function isWhat(s) {
  // null
  if (s === null) return 'null'
  const primitive = ['number', 'string', 'undefined',
    'symbol', 'bigint', 'boolean', 'function'
  ]
  let type = typeof s
  //原始类型以及函数
  if (primitive.includes(type)) return type
  //对象类型
  if (Array.isArray(s)) return 'array'
  if (Object.prototype.toString.call(s) === '[object Object]') return 'object'
  if (s.hasOwnProperty('constructor')) return x.constructor.name
  const proto = Object.getPrototypeOf(s)
  if (proto) return proto.constructor.name
  // 无法判断
  return "can't get this type"
}

类型的转换

其他类型转字符串

'1'.toString();  // 1 会先转成对象，然后对象转字符串，并不是三元说的null啊
1.toString();    // 报错 .被认为是小数点
(1).toString();   // "1"
JSON.stringify({age: 12})
null/undefined： null -> 'null', undefined -> 'undefined'。
boolean：true -> 'true', false -> 'false'。
symbol：只允许显示强制类型转换。

其他类型转number

null：0
undefined: NaN
boolean：true -> 1, false -> 0
symbol：不能转换为数字。
解析字符串，如 parseInt()

null和undefined

undefined 只有一个类型值。
1、变量定义了，没有赋值
2、调用函数时，没有提供必要的参数
3、对象没有赋值的属性
4、函数没有返回值
null 只有一个类型值
1、作为函数的参数，表示不是对象 2、原型链的终点

==与===

==判断

1、并不是那么严谨的判断左右两端是否相等
2、优先对比数据类型是否一致
3、数据类型不一致，进行隐士转换，数据类型一致，对比值，得出结果
4、继续判断两个类型是否是null或者undefined，如果是，则返回true
5、判断是否是string和number，如果是则转换为number在进行判断
6、如果一方是boolean，如果是则转换为number再进行对比
7、如果一方是object，另一方是string、number、symbol，则需要把object转换为原始类型再判断

思考？ []==![]
1、[]==!true
2、[]==false
3、[]==0
4、[].toString() ""==0
5、转换成number 0 == 0 返回true

===判断

1、===属于严格判断，直接判断两者的数据类型，数据类型不同，返回false
2、如果相同在进行值的比较
3、对于引用类型的比较，比较的都是引用内存地址，内存地址相同，返回true，否则返回false

const a = []
const b = a
console.log(a === b) //true

---------------

const a = []
const b = []
console.log(a === b) //false

深浅拷贝

浅拷贝

1、object.assign({},obj) 浅拷贝对象
2、展开运算符 obj1 = {...obj2}
3、Object.create({},Object.getOwnPropertyDescriptions(obj))
4、Object.defineProperties(obj,Object.getOwnPropertyDescriptors(obj))

深拷贝

function deepClone() {
    
}

前端技巧