震惊！面试官竟然爱问这些前端问题

## 震惊！面试官竟然爱问这些前端问题

css篇

1.rem布局的原理？
Rem是css的一个相对单位 相对于html根元素

自适应的原理
可以通过监测屏幕大小改变html的字体大小从而实现自适应大小的效果
rem取值分为两种情况，设置在根元素时和非根元素时，举个例子

/* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/

2…响应式布局如何实现？
响应式布局：
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重
响应式布局的实现方案：
方案①–媒体查询：
CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面.
方案②–百分比布局：
通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，CSS3支持最大最小高，可以将百分比和max(min)一起结合使用来定义元素在不同设备下的宽高。
方案③–rem布局：
rem是CSS3新增的单位，并且移动端的支持度很高，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可（而em是相对于父元素的）。
方案④–视口单位：
css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。使用视口单位来实现响应式有两种做法：
1.仅使用vw作为CSS单位
2.搭配vw和rem
方案⑤–flex弹性布局：
利用flex的属性来对页面进行布局
3.如何用c3属性实现一个倒立三角形？
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

js篇
1…原型和原型链?
原型：JavaScript 的所有对象中都包含了一个 [proto] 内部属性，这个属性所对应的就是自身的原型，除了原型 [proto] 之外，还有 prototype 属性，当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 [proto]
原型链：每个对象都有一个__proto__属性，当我们访问一个对象的属性时，
如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象
（可以理解为父对象）里找，如果父对象也不存在这个属性，
则继续往父对象的__proto__属性所指向的那个对象（可以理解为爷爷对象）里找，
如果还没找到，则继续往上找…直到原型链顶端null，这种链条关系就是原型链
显式原型和隐式原型的理解
隐式原型 （proto）：隐式原型的作用是用来构成原型链，实现基于原型的继承
显式原型（prototype）：用来实现基于原型的继承与属性的共享

2.闭包
当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数的内部变量,且返回的那个函数在外部被执行,就产生了闭包.
闭包的三个特性
1:函数套函数

2:内部函数可以直接访问外部函数的内部变量或参数
3:变量或参数不会被垃圾回收机制回收
GC （垃圾回收机制的算法称为标记 清除，除标记的对象或引用外全部清除）