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;
}