美文网首页
前端面试题--三

前端面试题--三

作者: 二狗的小仙女 | 来源:发表于2017-07-09 22:14 被阅读0次

    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;

    }

    相关文章

      网友评论

          本文标题:前端面试题--三

          本文链接:https://www.haomeiwen.com/subject/uysehxtx.html