前端面试题--三

1.rem  em的区别

  em特点:

       (1). em的值并不是固定的;

       (2). em会继承父级元素的字体大小。

rem:

        rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。


2.有哪项方式可以对一个DOM设置它的CSS样式?

     外部样式表,引入一个外部css文件

    内部样式表,将css代码放在  标签内部

   内联样式,将css样式直接定义在 HTML 元素内部


3.rgba()和opacity的透明效果有什么不同?

    rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)


4.ECMAScript6 怎么写class么,为什么会出现class这种东西?

class Point {

     constructor(x, y) {

     this.x = x;

     this.y = y;

}

toString() {

     return '('+this.x+', '+this.y+')';

}

}


5.数组和对象有哪些原生方法,列举一下?

Array.concat( ) 连接数组

Array.join( ) 将数组元素连接起来以构建一个字符串

Array.length 数组的大小

Array.pop( ) 删除并返回数组的最后一个元素

Array.push( ) 给数组添加元素

Array.reverse( ) 颠倒数组中元素的顺序

Array.shift( ) 将元素移出数组

Array.slice( ) 返回数组的一部分

Array.sort( ) 对数组元素进行排序

Array.splice( ) 插入、删除或替换数组的元素

Array.toLocaleString( ) 把数组转换成局部字符串

Array.toString( ) 将数组转换成一个字符串

Array.unshift( ) 在数组头部插入一个元素


Object.hasOwnProperty( ) 检查属性是否被继承

Object.isPrototypeOf( ) 一个对象是否是另一个对象的原型

Object.propertyIsEnumerable( ) 是否可以通过for/in循环看到属性

Object.toLocaleString( ) 返回对象的本地字符串表示

Object.toString( ) 定义一个对象的字符串表示

Object.valueOf( ) 指定对象的原始值


6.window.onload和documentready的区别

  window.onload 是在dom文档树加载完和所有文件加载完之后执行一个函数        

     document.ready原生中没有这个方法,jquery中有 $().ready(function),在dom文档树加载完之后执行一个函数(注意,这里面的文档树加载完不代表全部文件加载完)。

$(document).ready要比window.onload先执行

window.onload只能出来一次,$(document).ready可以出现多次.


7.什么事rpx?

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。

    以iphone6的物理像素750*1334为视觉稿进行设计,而在小程序中使用rpx为单位

   iphone6下 1px = 1rpx = 0.5pt

   使用rpx小程序会在不同分辨率的设备下自动进行转换,而px不会建议设计团队按iphone6来做设计图,因为

    Iphone6 1px=1rpx

   Iphone6 plus 1px=0.6rpx

     Iphone6换算比较方便。

不是所有的单位都适合rpx,字体不适合rpx,会导致不同设备看不清


8.flex在安卓中的兼容问题

.foo {

  display: box;/* OLD - Android 4.4- */

  display: -webkit-box;/* OLD - iOS 6-, Safari 3.1-6 */

 display: -moz-box;/* OLD - Firefox 19- (buggy but mostly works) */

 display: -ms-flexbox;/* TWEENER - IE 10 */

 display: -webkit-flex;/* NEW - Chrome */

display: flex;

-webkit-box-flex:0 034.4%;/* OLD - iOS 6-, Safari 3.1-6 */

-moz-box-flex:0 034.4%;/* OLD - Firefox 19- */

-webkit-flex:0 034.4%;/* Chrome */

-ms-flex:0 034.4%;/* IE 10 */

flex:0 034.4%;

/*For Android 4.3*/

width:34.4%;

/* 09版 */

-webkit-box-lines: multiple;

/* 12版 */

-webkit-flex-wrap: wrap;

-moz-flex-wrap: wrap;

-ms-flex-wrap: wrap;

-o-flex-wrap: wrap;

flex-wrap: wrap;

/* 09版 */

-webkit-box-align:center;

/* 12版 */

-webkit-align-items:center;

-moz-align-items:center;

    -ms-align-items:center;

    -o-align-items:center;

    align-items:center;

  /* 09版 */

-webkit-box-pack:center;

/* 12版 */

-webkit-justify-content:center;

-moz-justify-content:center;

-ms-justify-content:center;

-o-justify-content:center;

justify-content:center;

}

你可能感兴趣的:(前端面试题--三)