前端面试题

前端面试题 —— HTML

如何理解 HTML 语义化

• 让人更容易读懂（增加代码的可读性）

• 让搜索引擎更容易读懂（SEO）

块状元素有哪些？ 内联元素有哪些

块状元素的特点：display: block/table;

有 div h1 h2 table ul ol p 等；

内联元素的特点：display: inline/inline-block;

有 span img input button 等；

前端面试题 —— CSS

CSS - 布局（1）

盒模型宽度的计算

标准盒模型：box-sizing: content-box

盒子的宽度 = width + padding + border

怪异盒模型： box-sizing: border-box

盒子的宽度 = width

margin 纵向重叠的问题

相邻的 margin-top 与 margin-bottom 会发生重叠，空白的标签也会被重叠甚至覆盖掉

margin 负值问题

margin-top 和 margin-left 负值， 元素向上、向左移动；

margin-right 负值，右侧元素左移，自身不受影响；

margin-bottom 负值，下方元素上移，自身不受影响；

BFC 理解与应用

BFC(Block format context)，块级格式化上下文 ； 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素；

形成 BFC 的常见条件：

• float 不是 none;
• position 是 absolute 或 fixed;
• overflow 不是 visible;
• display 是 flex inline-block 等

BFC 的常见应用：

• 清除浮动（解决浮动引起的高度塌陷问题）

float 布局

如何实现圣杯布局和双飞翼布局

圣杯布局和双飞翼布局的目的：

• 三栏布局，中间一栏最先加载和渲染（内容最重要）
• 两侧内容固定，中间内容随着宽度自适应
• 一般用于 PC 网页

圣杯布局和双飞翼布局的技术总结

• 使用 float 布局
• 两侧使用 margin 负值，以便和中间内容横向重叠
• 防止中间内容被两侧覆盖，一个用 padding 一个用 margin
• 圣杯布局通过 margin 为两边留白，双飞翼布局通过 padding 为两边留白

手写 clearfix

 { 
  .clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
  } 
  .clearfix { 
    *zoom: 1; /*兼容IE低版本*/ 
  } 
}

flex 布局

flex 常用语法的回顾：

• flex-direction 主轴方向
• justify-content 主轴对齐方式
• align-items 交叉轴的对齐方式
• flex-wrap 换行
• align-self 子元素在交叉轴上的对齐方式

flex 实现一个三个点的色子

筛子: display:flex; justify-content: space-between

点: 第一个点不需要单独设置，第二个点 align-self: center，第三个点 align-self:flex-end

CSS - 定位

absolute 和 relative 分别依据什么定位？

relative 依据自身位置定位

absolute 依据最近一层的定位元素进行定位

居中对齐有哪些实现方式

水平居中：

inline 元素： text-align:center

block 元素： margin:auto

absolute 元素：left:50% + margin-left 负值

垂直居中：

inline 元素： line-height 的值等于 height 值

absolute 元素：top:50% + margin-top 负值

absolute 元素：transform(-50%,50%)

absolute 元素：top,left,bottom,right=0 + margin:auto

CSS - 图文样式

line-height 如何继承

当子元素继承父元素的 line-height 时：

如果父元素的 line-height 带具体单位，如 20px，则子元素的 line-height 也是 20px;

如果父元素的 line-height 不带单位，如 2，则子元素的 line-height 是自身字体大小的两倍

如果父元素的 line-height 是带%的，如 200%，则表示是父元素字体大小的两倍，子元素的 line-height 也是父元素字体大小的两倍

CSS - 响应式

rem 是什么？

rem 是相对根元素（html 字体大小）的长度单位，em 是相对父元素的长度单位。

rem 相对长度单位常用于响应式布局

响应式布局的常见方案

media-query,根据不同的屏幕宽度设置根元素 font-size

 {
  @media only screen and (max-width: 375px) {
    /* iphone5 或者更小的尺寸，以iPhone的宽度（320px）比例设置 font-size */
    html {
      font-size: 86px;
    }
  }
  @media only screen and (max-width: 375px) {
    /* iphone7/8 和 iPhone x */
    html {
      font-size: 100px;
    }
  }
  @media only screen and (max-width: 375px) {
    /* iphone6p 或者更大的尺寸，以iPhone6p的宽度（414px）比例设置 font-size */
    html {
      font-size: 110px;
    }
  }
}

javascript常考问题 

1.filter()函数的作用

对数组中的每个元素都执行一次指定的函数，并且创建一个新的数组，该数组元素是所有回调函数执行时返回值为true的原数组元素

总结：对数组中的每一个元素都执行一次回调函数，过滤掉不满足条件的，把满足条件的元素放入新数组中并返回。

2. 什么是闭包，闭包会带来什么好处与坏处

概念：声明在一个函数中的函数，叫做闭包函数（以前函数内部声明的变量，在函数外部无法放回，但通过闭包的方法，可以让函数外部访问函数内部的变量）

优点：内部函数总是可以访问其所在的外部函数中声明的参数和变量，让外部访问函数内部的变量成为可能

缺点：滥用闭包会造成内存泄漏的问题

3. 箭头函数的this指向问题

箭头函数的this指向函数定义时所在的作用域的this

4. 前后端分离的好处

1.减小服务器的压力，2.后台的错误不会反映到前台

5. 你知道哪些操作数组的方法

1.改变原数组：push(尾部新增)、unshift(头部新增)、pop（尾部删除）、shift（头部删除）、splice（index, num, item1, item2...）（指定索引位置新增、删除、替换）、sort(排序)

6.重绘和回流的区别是什么

重绘：只改变自身样式，不影响其他元素

回流：元素的大小或位置发生改变（页面布局发生改变），触发了重新布局导致渲染树重新计算布局和渲染

回流一定会触发重绘，重绘不一定会触发回流

7.ES6中新增哪些内容

let、const、类、解耦股赋值、剩余参数、展开运算符、模板字符串、对象字面量增强、箭头函数、symbol、promise、set、map

8. 原型和原型链

(自行搜索理解)

9. 捕获和冒泡

(自行搜索理解)

10. 跨域的概念，解决跨域的方法

跨域：当一个请求的协议、域名、端口号任意其一不相同时，叫做跨域请求

解决方案：cors跨域资源共享（后端）、JSONP（通过script标签获取数据）

11. 登录注册的实现思路

12. 函数的深拷贝和浅拷贝

13. 函数节流

14. promise是什么？

15. 数组去重有哪些方法？

Vue常考问题

1.vue生命周期的钩子函数

概念：生命周期从创建到销毁的过程，就是生命周期

生命周期：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed

2.vue的双向绑定是怎么实现的，它的原理是什么？

3. vue中组件是如何通信的

1.父传子：通过props属性传递，或者通过v-model

2.子传父：通过$emit出发事件，父组件监听这个事件

3.兄弟组件：通过eventBus通信

4. 单向数据流的概念

子组件可以使用父组件传递的数据，但不能修改父组件传递的数据

5. 你使用过VUEX吗，它有哪些东西？

6. 购物车的实现思路

7. Non-prop属性是什么

父组件通过属性向子组件传递数据，但子组件没有使用props属性接收，那么这个数据就会自动成为子组件最外层标签的一个属性

其他常考

http三次握手？