H5C3,js,ES6面试高频考点

H5C3

  1. H5C3和Html,css相比有什么变化

HTML5 中的一些有趣的新特性:

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素,比如 article、footer、header、nav、section

新的表单控件,比如 calendar、date、time、email、url、search

基本选择器

属性选择器

伪类选择器

CSS3边框与圆角

CSS3圆角border-radius

盒阴影box-shadow

CSS3背景background-image

CSS3渐变 定义:可以在两个或者多个指定颜色之间显示平移的过渡

CSS3过渡 定义:允许css的属性值在一定时间区间内平滑的过渡,在鼠标点击,鼠标滑过或对元素任何改变中触发,并圆滑地以动画形式改变css的属性值。

CSS3变换 定义:让一个元素在一个坐标系统中变形,这个属性包含一系列的变形函数,可以移动,旋转,缩放元素。

CSS3动画 定义:使元素从一种样式逐渐变化到另外一种样式的效果。

  1. 标签元素分类,和特点

一.块级元素 block

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

二.内联元素 inline

1、和其他元素都在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

三.内联块状元素 inline-block

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点.

1、和其他元素都在一行上;

2、元素的高度、宽度、行高以及顶和底边距都可设置。

  1. 圣杯布局(双飞翼布局)有哪几种实现方式
  1. 使用定位的方式

让左右两边的盒子绝对定位,左边盒子left:0,右边盒子:right:0,绝对定位盒子不占位置,中间的盒子padding左右宽度为左右两边盒子的宽度保留左右盒子的位置

  1. 使用浮动加calc计算属性

让所有盒子左浮动,左右两边的盒子宽度固定,中间盒子的宽度通过calc计算属性动态计算得出即中间盒子的宽度为100%减去左右两边的盒子总宽度

  1. 使用flex布局

通过父元素设置flex布局,让盒子在一行显示,左右两边的盒子固定宽度,而父元素的剩余宽度则为中间盒子的宽度flex:1

4.使用calc(100%-宽度)

  1. 弹性盒模型有哪些属性和属性值,什么效果

flex-direction 设置内部项目的排列方向

row、row-reverse、column、column-reverse

flex-wrap 设置一行放不下的话是否换行

flex-flow 上面两种属性的简写,推荐使用

justify 项目在主轴(X轴)上的对齐方式

align-items 项目在交叉轴(Y轴)上的对齐方式

align-content 有多根轴线时的对齐方式。如果项目只有一根轴线,那么该属性不起作用

order 项目的排列顺序,数字越小越靠前

flex-grow 项目放大的比例

flex-shrink 项目缩小的比例

flex-basis 项目占据的主轴空间

flex flex-grow,flex-shrink和flex-basis的简写,推荐使用

align-self 设置个别项目在交叉轴(Y轴)上的对齐方式

justify-content(子元素排列方式及间隔样式):  flex-start、flex-end、center、 spacing-between、spacing-around、spacing-evently

  1. 常见的盒子模型有哪些,有什么区别

box-sizing:content-box;(普通盒模型、默认)          标准盒模型:设置的宽度就等于内容的宽度

box-sizing:border-box;(怪异盒模型、IE盒模型)       怪异盒模型:内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度

  1. 写一个网易云播放动画,图片旋转+撞针来回拨动

图片旋转可以用计时器也可以设置css中的动画属性,装帧可以添加点击事件来使期位置发生改变

  1. 说一下对浮动的理解,(什么是浮动,有什么用,怎么用,有什么问题,怎么清除浮动)

浮动:就是让元素可以向左或向右移动,直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动,都会紧挨着上一个元素)

用法:float:left或者right或者none或者inherit;left:让元素向左浮动;right:让元素向右浮动;none:让元素不浮动;inherit:让元素从父级继承浮动属性

用途:布局网页并定位网页元素、让块元素可以通过浮动来左右相邻

问题:父元素高度塌陷,高度无法撑开、与元素同级的非浮动元素会紧随其后(遮盖现象)、如果一个元素浮动,则该元素之前的元素也需要浮动;否则会影响页面显示的结构

清除方法:在浮动元素末尾添加空标签(不推荐)、为父级元素添加overflow:hidden;(局限于浮动类)、伪元素清除浮动(推荐)、双伪元素清除浮动、 .clearfix {* zoom:1;}

  1. 伪类有哪些,作用和书写顺序

:link     未访问时的表现

:visited  访问过后的表现

:hover    鼠标移入的表现

:active   鼠标单机的表现

  1. 如何去掉相邻两个图片中间的白边

设置字体大小为零,设置成为行内块在浮动

  1. 如何实现文字垂直水平居中,盒子垂直水平居中

文本水平居中:设置text-align:center;文本的垂直居中:可以设置line-height:xxpx;

盒子的水平居中:设置宽度后,设置margin:auto;盒子的垂直居中:通过弹性布局改变主轴方向以及设置justify-content:center;

  1. 单行文本溢出显示省略号,多行文本溢出显示省略号

单行显示省略号:white-spacing:nowrap;

规定某行显示省略号:-webkit-line-climp:n;

overflow:hidden;display:-webkit-box;

text-overflow:ellipsis;

-webkit-box-orient:vertical;

    overflow:hidden;

JS+ES6

  1. js数据类型有哪些

基本类型:数字类型(NUMBER)、字符串类型(String)、布尔类型(Boolean)、空型(null)、未定义型(undef)、唯一值型(symbol)

引用数据类型:数组、函数、对象、set、map

  1. 内置对象有哪些

值属性类:Infinity、NaN、undefined、null等;函数属性类:eval()、parseFloat()、parseInt() 等;基本对象类:Object、Function、Boolean、Symbol、Error 等;

数字和日期对象类:Number、Math、Date等;字符串类:String、RegExp等;可索引的集合对象类:Array;使用键的集合对象类:Map、Set、WeakMap、WeakSet等;

矢量集合类:SIMD ;结构化数据类:JSON ;控制抽象对象类:Promise、Generator 等;反射类:Reflect、Proxy;其他:arguments;

  1. 数组方法有哪些

join (原数组不受影响):该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。返回值:返回一个新的字符串

split (原数组不受影响): 该方法是用过指定的分隔符,将字符串分割成数组。返回值:返回一个新的数组

push(改变原数组):该方法可以在数组的最后面,添加一个或者多个元素;结构: arr.push(值);返回值:返回的是添加元素后数组的长度.

pop(改变原数组):该方法可以在数组的最后面,删除一个元素;结构: arr.pop();返回值:返回的是刚才删除的元素.

unshift(改变原数组):该方法可以在数组的最前面,添加一个或者几个元素;结构: arr.unshift(值);返回值: 返回的是添加元素后数组的长度

shift(改变原数组):该方法可以在数组的最前面,删除一个元素;结构: arr.shift();返回值: 返回的是刚才删除的元素.

reverse 翻转数组(改变原数组):结构:arr.reserse()

sort(改变原数组):该方法可以对数组进行排序.默认从大到小,其中的参数是一个函数

concat(原数组不受影响):该方法可以把两个数组里的元素拼接成一个新的数组;返回值: 返回拼接后的新数组

slice 截取(原数组不受影响):该方法可以从数组中截取指定的字段,返回出来;返回值:返回截取出来的字段,放到新的数组中,不改变原数组

splice(改变原数组):结构1: arr.splice(start,deletedCount) 纯删除;从start下标开始,删除几个

                      结构2: arr.splice(start,deletedCount,item) 替换;从start下标开始,删除几个,并在该位置添加item

                      结构3: arr.splice(start,0,item) 纯添加;从start下标开始,删除0个,并在该位置添加item,start开始全部往后移动

indexOf:该方法用来查找元素在数组中第一次出现的位置;结构: arr.indexOf(元素)

lastIndexOf:该方法用来查找元素在数组从后往前第一次出现的位置;结构: arr.lastIndexOf(元素)

forEach():该方法等同于for循环,没有返回值

map():映射,该方法使用和forEach大致相同,但是该方法有返回值,返回一个新数组,新数组的长度和原数组长度相等

filter():filter方法: 有返回值, 过滤出符合条件的元素

some:判断数组中有没有符合条件的项(只要有,就返回true),如果一个都没有,才返回false

every:判断数组中所有的项是否满足要求,如果全都满足,才返回true,否则返回false

find:找到符合条件的项,并且返回第一项

findIndex:找到符合条件的项的下标,并且返回第一个

  1. 数组去重几种方式

1、定义一个新数组,并存放原数组的第一个元素,然后将元素组一一和新数组的元素对比,若不同则存放在新数组中。

2、先将原数组排序,在与相邻的进行比较,如果不同则存入新数组。

3、利用对象属性存在的特性,如果没有该属性则存入新数组。

4、利用数组的indexOf下标属性来查询。

5、利用数组原型对象上的includes方法。

6、利用数组原型对象上的 filter 和 includes方法。

7、利用数组原型对象上的 forEach 和 includes方法。

8、利用数组原型对象上的 splice 方法。

9、利用数组原型对象上的 lastIndexOf 方法。

10、利用 ES6的set 方法。

  1. 数组深拷贝几种方式

1、for循环实现

2、slice方法

3、concat方法

4、ES6扩展运算符实现

  1. 对象深拷贝几种方式

1、通过JSON.stringify() 和 JSON.parse() 将对象转为字符串之后在转为对象。当值为undefined、function、symbol会在转换过程中被忽略。

2、es6解构赋值,只能深度拷贝对象的第一层,如果对象中的属性也是对象的话,没有办法进行深度拷贝的。

3、for in 循环遍历对象,只能深度拷贝对象的第一层

4、Object.assign() 对象的合并,第一个参数必须是空对象,只能深度拷贝对象的第一层

5、利用循环和递归的方式,在循环递归中需要注意设置临界值(typeof obj[key] == ‘object’),否则会造成死循环。

  1. 定时器有几种,有什么区别

分为setTimeout、setInterval、requeTanimationFrame(动画API)

setTimeout只执行一次、setInterval可以执行多次;清除setTimeout,clearTimerout、清除setInterval,clearInterval

  1. 说下对Promise的理解

1、Promise是一个构造函数,可以通过 new Promise()得到一个 Promise 的实例;

2、在 Promise 上,有两个函数,分别叫做 resolve(成功之后的回调函数) 和 reject(失败之后的回调函数) ;

3、在 Promise 构造函数的 Prototype 属性上,有一个 .then() 方法,也就说,只要是 Promise 构造函数创建的实例,都可以访问到这个  .then() 方法 ;

4、Promise 表示一个 异步操作;每当我们 new 一个 Promise 的实例,这个实例,就表示一个具体的异步操作;

5、既然 Promise 创建的实例,是一个异步操作,那么,这个 异步操作的结果,只能有两种状态:

                      状态1: 异步执行成功了,需要在内部调用 成功的回调函数 resolve 把结果返回给调用者;

                      状态2: 异步执行失败了,需要在内部调用 失败的回调函数 reject 把结果返回给调用者;

6、由于 Promise 的实例,是一个异步操作,所以,内部拿到 操作的结果后,无法使用 return 把操作的结果返回给调用者; 这时候,只能使用回调函数的形式,来将成功 或 失败的结果,返回给调用者;

7、我们可以在 new 出来的 Promise 实例上,调用 .then() 方法,预先为 这个 Promise 异步操作,指定成功(resolve) 和 失败(reject) 回调函数;

8、我们 new 出来的 Promise, 只是代表形式上的一个异步操作;什么是形式上的异步操作:就是说,我们只知道它是一个异步操作,但是它做什么具体的异步事情,目前还不清楚

  1. 说下对模块导入导出的理解

ES6模块化导入与导出有三种方式,1默认导入导出,2按需导入导出,3默认导出和整体导出一起使用

优点:避免命名冲突,更好分离,更高复用,可维护性高,更好实现高内聚低耦合

  1. 箭头函数和普通函数的区别

箭头函数比普通函数更加简洁

箭头函数没有自己的this,它只会在自己作用域的上一层继承this

箭头函数继承来的this指向永远不会改变

call()、apply()、bind()等方法不能改变箭头函数中this的指向

箭头函数不能作为构造函数使用

箭头函数没有自己的arguments

箭头函数没有prototype

  1. Js实现约瑟夫环问题(m个人留1个或者留n-1个)

function countOff(num,m){

  let players=[];

  for(let i=1;i<=num;i++){

    players.push(i);

  }

  let flag=0;

  while(players.length>1){// 剩下一人,结束条件

    let outPlayerNum=0,len=players.length;

    for(let i=0;i

      flag++;

      if(flag===m){

        flag=0;

        console.log("出局:"+players[i-outPlayerNum]);

        players.splice(i-outPlayerNum,1);

        outPlayerNum++;

      }

    }

  }

  // return players[0];

  console.log("剩下:"+players[0]);

}

// console.log("剩下:"+find(100,5))

countOff(100,5)

  1. 数组排序的几种写法

1、利用sort()方法排序

2、冒泡排序法

3、选择排序法:选一个最大或最小的进行比较排序

4、插入排序法:选定一个数据,遍历数组不断比较

你可能感兴趣的:(css,css3,html)