## 震惊!面试官竟然爱问这些前端问题
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 (垃圾回收机制的算法称为标记 清除,除标记的对象或引用外全部清除)