前端面试题目整理（一）

一、HTML CSS

1、盒模型

  标准盒模型（W3C）：box-sizeing：content-box（默认值）
标准盒模型总宽度/高度：margin+border+padding+内容区宽度/高度（ 即 width/height 不包含 padding 和 border 值 ））
  怪异盒模型（IE盒模型)：box-sizing:border-box
标准盒模型总宽度/高度：margin+ (内容区宽度/高度 + padding + border) （ 即 width/height 包含 padding 和 border 值 ））

2、块元素和行内元素、行内块元素

块元素：独占一行，宽高以及内外边距都可以控制 ，是一个容器盒子，里面可以加行内元素或块级元素（文字类标签内部不能放p、h），默认宽度为父盒子宽度   

例：<h1>~<h6>、<div>、<p>、<ul>、<ol>、<li>、

行内元素：一行可以显示多个，宽高设置无效，默认宽度为内容宽度，里面只能放文本或者其他行内元素（a里面不能放a，但是可以放块级元素）

例：<span>、<a>、<strong>、<b>、<i>、<del>、<u>、

行内块元素：同时具有行内元素和块元素的特点，相邻元素在同一行，但之间有缝隙，默认宽度为内容宽度、宽高以及内外边距都可以控制

转化为块元素 display:block

转化为行内元素：display:inline

转化为行内快元素：display:inling-block

3、CSS实现居中

 水平居中：

行内元素

text-align:center

块元素

margin：0 auto

使用定位实现（子绝父相 left 50%，maigin-left为-盒子宽度一半）

弹性布局实现 

display:flex;

flex-direction: row;  //弹性项排列方向

justify-content: center;//主轴方向排列方式

align-items:center;   //辅轴方向居中

flex布局的其他设置：

Flexbox支持对弹性项的灵活控制。Flex的意思为可伸缩，这体现在以下三个属性中：

1. flex-basis：基础值

2. flex-grow：拉伸弹性系数，如果容器宽度减去弹性项的基础值之和之后还有剩余空间，那么就按照弹性系数比例去分配剩余空间

3. flex-shrink：缩减弹性系数，和拉伸弹性系数逻辑相反

这三个属性应用给弹性项，而不是容器。

flex: 1 0  0%   属性，该属性的三个值分别为flex-grow、flex-shrink和flex-basis，表示：当有剩余空间时均匀分配剩余空间、当超出容器宽度时不进行缩放、弹性项的基础值都为容器的0%。此时可以看到四个每个"li"标签的宽度都为125px，分别占据了容器的1/4。单独给第一个"li"标签设置"flex-grow: 2"属性，此时又会发现所有"li"标签的宽度比值为2:1:1:1。

使用transform居中

.children-inline {

 position: relative;

 left: -50%;

 -webkit-transform : translate3d(0, -50%, 0);

 transform : translate3d(0, -50%, 0);

 background-color: black;

 color:white;

}

垂直居中：

line-height = height

弹性布局

margin-top:50%

4、语义化标签

什么是HTML语义化标签
语义化的标签，旨在让标签有自己的含义。

<p>一行文字</p>
<span>一行文字</span>

如上代码，p 标签与 span 标签都区别之一就是，p 标签的含义是：段落。而 span 标签责没有独特的含义。

优势
代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
有利于搜索引擎优化（SEO）。
5、伪类和伪元素区别

两者的定义
    伪类（pseudo-class）是一个以冒号作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前添加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际不在文档树中。

区别
伪类是通过在元素选择器上加入伪类改变元素状态。伪元素通过对元素的操作进行对元素的改变。

6、常见选择器及优先级
类选择器、id选择器、元素选择器、通配符选择器、伪类选择器、属性选择器、并集选择器、后代选择器、子代选择器、兄弟选择器、伪类选择器

优先级：!importent>行内样式（无穷）>id选择器>类选择器、伪类选择器>元素选择器>通配符选择器、继承

可叠加不进位

7、长度单位

px：像素 相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em：

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

• 1. em的值并不是固定的；
• 2. em会继承父级元素的字体大小。

rem: 使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可      谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有         字体大小，又可以避免字体大小逐层复合的连锁反应。

选择：

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

8、浮动塌陷

   由于子元素设置浮动脱离文档流，撑不开父元素导致

  解决方法：

• 给父元素设置高度
• 清除浮动（给父元素添加overflow属性。设置为hidden、auto、scroll溢出部分无法显示  父元素添加after伪元素或者添加双伪元素）

9、定位分类

 relative:相对自身原来位置 原有位置会保留

abosolute：相对最近一级祖先元素移动位置，没有父元素则相对浏览器窗口，不保留原有位置

fixed：固定于页面可视区位置，在浏览器页面滚动时元素位置不会改变

以浏览器的可视窗口作为参照点移动元素（与父元素无关），不占有窗口位置

粘性定位

Position:sticky

特点：

以浏览器的可视窗口为参照点移动，战友原先位置，必须添加top\left

10、BFC与IFC

链接

(49条消息) 【前端中css基础——系列5】BFC与IFC；绝对定位与相对定位和固定位置_让子弹飞一会儿=>的博客-CSDN博客

 二、js篇

1、原型链

 函数有prototype属性，对象有__proto__属性

原型链：

js里万物皆对象，所以一直访问对象的__proto__属性会形成一条链条  而链条的尽头是null

当js引擎查找对象的属性时，会先判断对象本身是否存在该属性

不存在的属性就会沿着原型链向上查找。

2、js怎么实现继承

• 原型链的继承  让新实例的原型等于父类的实例  可复用不能传参
• 用构造函数实现  用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的                            自执行（复制））   可传参不能复用
• 组合继承（组合原型链继承和借用构造函数继承）（常用）可传参复用
• 原型式继承     重点：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个                          可以随意增添属性的实例或对象。object.create()就是这个原理。不可复用
• 寄生式继承      就是给原型式继承外面套了个壳子。不能复用
• 寄生组合式继承（常用）
• 　　　　寄生：在函数内返回对象然后调用
• 　　　　组合：1、函数的原型等于另一个实例。2、在函数中用apply或者call引入另一个构造函                   数，可传参　
• 3、call、apply、bind方法的作用与区别

• call、apply、bind都是用来改变this指向的，

  call和apply调用时候立即执行，bind调用返回新的函数。

  当需要传递参数时候，call直接写多个参数，apply将多个参数写成数组。

  bind在绑定时候需要固定参数时候，也是直接写多个参数。

• 4、js数据类型

• js数据类型有6种：

  number

  string

  boolean

  object

  function

  undefined

  其中number、string、boolean、undefined是值类型，function和object是引用类型。

• 5、闭包理解等

• 对闭包的理解：

  （1）. 什么是闭包？函数和函数内部能访问到的变量的总和，就是一个闭包。

  （2）. 如何生成闭包? 函数嵌套 + 内部函数被引用。

  （3）. 闭包作用？隐藏变量，避免放在全局有被篡改的风险。

  （4）. 使用闭包的注意事项？不用的时候解除引用，避免不必要的内存占用。

  为什么有闭包的这种特性：如果形成闭包，外部函数执行完后，其中的局部变量可能被内部函数使用，所以不能销毁，因此内部函数能一致访问到这些局部变量，直到引用解除。

  为什么需要闭包？隐藏变量，避免放在全局有被篡改的风险。

  闭包的缺点：使用时候不注意的话，容易产生内存泄漏。

• 6、NULL和undefined区别

• undefined
  • 这个变量从根本上就没有定义
  • 隐藏式 空值
• null
  • 这个值虽然定义了，但它并未指向任何内存中的对象
  • 声明式 空值

7、判断一个数据是否为数组

      typeof 是无法判断一个变量是否为数组类型的

•    （1）  使用 instanceof 运算符
  •      

        （2）利用构造函数来判断他的原型是否为Array， 用法： 变量.constructor === 变量类型

            let arr = [1, 2, 3]
            console.log(arr.constructor === Array)

  •     （3）利用的一个专门的方法 isArray()， 用法：Array.isArray(变量)，返回true，则说明该变       量是数组类型；反之，说明该变量不是数组类型

    •     （4）调用Object.prototype.toString.call()，返回true，则说明该变量是数组类型

    •     （5）通过对象的原型方式来判断，

    • let arr = [1, 2, 3]
      console.log(arr.__proto__ === Array.prototype)

   （6）Object.getPrototypeOf()来判断是否为数组类型，例如

let arr = [1, 2, 3]
console.log(Object.getPrototypeOf(arr) === Array.prototype)

  （7） 通过 isPrototypeOf() 方法来判断是否为数组类型，例如

let arr = [1, 2, 3]
console.log(Array.prototype.isPrototypeOf(arr))

 8、防抖和节流

本质上是优化高频率执行代码的一种手段

如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能

为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用 防抖（debounce） 和 节流（throttle） 的方式来减少调用频率

#定义

• 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
• 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

 9、深拷贝、浅拷贝的区别？如何实现深拷贝和浅拷贝？

基本数据类型 的数据赋值后，更改赋值后的变量，两者互不影响；
引用数据类型 的数据赋值后，将存放在栈内存中的地址赋值给接收的变量，更改赋值后的变量，会影响到原来的数据

 浅拷贝：

创建的新对象拥有原始对象属性值的全部，如果是基本类型，拷贝的事基本类型的值；如果是引用类型，拷贝的是内存地址，所以两个对象会互相影响。

实现  

Object.assign()

ES6中拷贝对象的方法，接受的第一个参数是拷贝的目标，剩下的参数是拷贝的源对象（可以是多个）

语法：Object.assign(target, ...sources)

concat()

语法：concat() 合并两个或多个数组，返回一个新数组。原数组不变

扩展运算符

如果对象中的属性都是基本数据类型的话,使用扩展运算符更加方便

let obj1 = {
	name: "小李",
	age: 18
}
let obj2 = {...obj1}

深拷贝：

不管原数据中值是什么类型的数据，拷贝后的新数据跟原数据是相互独立，没有关联的

实现：

        利用json数据和json字符串之间的转换
JSON.stringify() 将对象转换成JSON字符串

JSON.parse() 反序列化将JSON字符串变成一个新的对象

对于日常的开发需求(对象和数组)，使用这种方法是最简单和快捷的

缺点： 无法实现对对象中 方法 的拷贝，会显示为undefined
        $.extend()方法

        利用递归遍历原对象赋值给新对象

10、var、const、let区别

var定义全局变量，可后续改变多次声明，但在函数中使用var时是局部对象。函数内部不使用var直接定义（如 a=30）是全局变量

let定义的变量只在let所在代码块生效（es6新增）

const定义只读变量 定义时必须赋值。

区别：

var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined

let和const不存在变量提升，即它们所声明的变量一定要在声明后使用，否则报错

var不存在暂时性死区

let和const存在暂时性死区，只有等到声明变量的那一行代码出现，才可以获取和使用该变量

var不存在块级作用域

let和const存在块级作用域

var允许重复声明变量

let和const在同一作用域不允许重复声明变量

var和let可以

const声明一个只读的常量。一旦声明，常量的值就不能改变

能用const的情况尽量使用const，其他情况下大多数使用let，避免使用var