百度一面，面试题整理

1. 如何实现水平垂直居中

• 方案1：position 元素已知宽度
  • width: 100px;
  • height: 100px;
  • position: absolute;
  • left: 50%;
  • top: 50%;
  • margin: -50px 0 0 -50px;
• 方案2：position transform 元素未知宽度
  • position: absolute;
  • left: 50%;
  • top: 50%;
  • transform: translate(-50%,-50%);
• 方案3：flex布局  
  • display: flex;//flex布局
  • justify-content: center;//使子项目水平居中
  • align-items: center;//使子项目垂直居中
• 方案4：table-cell布局
  • display: table-cell;
  • vertical-align: middle;//使子元素垂直居中
  • text-align: center;//使子元素水平居中

2. Position属性的几种区别

• static
  • 默认布局。元素出现在正常的流中
• relative

  • 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性）

  • 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置）

  • 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）

  • 提升层级

• absolute 

• • 使元素完全脱离文档流（在文档流中不再占位）
  • 使内联元素在设置宽高的时候支持宽高（改变内联元素的特性）
  • 使区块元素在未设置宽度时由内容撑开宽度（改变区块元素的特性）
  • 相对于最近一个有定位的父元素偏移（若其父元素没有定位则逐层上找，直到document——页面文档对象）
  • 相对定位一般配合绝对定位使用（将父元素设置相对定位，使其相对于父元素偏移）
  • 提升层级（同相对定位）

• fixed
  • 生成固定定位的元素，相对于浏览器窗口进行定位。

• sticky 粘性定位

  • 粘性定位，该定位基于用户滚动的位置

3. 讲一下盒子模型

• 盒子模型有两种：W3C和IE盒子模型
• 盒子模型包括margin、border、padding、content
• CSS3中新增了一个样式box-sizing

  • content-box：  width=content+padding+border

  • border-box： width=width（样式指定的宽度）

• IE的元素宽度=content+padding+border  等于box-sizing：content-box

• 对于行级元素，margin-top和margin-bottom对于上下元素无效，margin-left和margin-right有效

• 对于相邻的块级元素margin-bottom和margin-top 取值方法

  • 都是正数： 取最大值   距离=Math.max(margin-bottom,margin-top) 

  • 都是负数： 取最小值   距离=Math.min(margin-bottom,margin-top)

  • 上面是正数，下面是负数或者 上面是负数，下面是正数： 正负相加   距离=margin-bottom+margin-top

4. BFC怎么实现

5. 如何实现左右固定，中间自适应的布局

6. 用JS实现一个柯里化函数

7. 用JS实现一个栈

8. 实现一个TS类，如Partial 、Tick

9. JS任务执行机制

10. 给出一段Promise+setTimeout的代码，写出输出顺序

11. Promise有哪些方法

12. 对async/await的理解

13. HTTP请求响应头有哪些

14. HTTPS的是如何进行数据加密的