常见的H5C3的面试题

前端小菜凯

已于 2022-11-20 21:32:46 修改

阅读量1.7k

点赞数 1

文章标签： css css3 javascript

于 2022-11-20 21:24:09 首次发布

本文链接：https://blog.csdn.net/gkx19898993699/article/details/127953643

版权

一、H5C3

（一）H5C3和Html，css相比有什么变化

1.H5：

H5新增元素：	header、footer、section、aside、nav、article、button、progress(进度条标签)、
H5的新增表单属性：	placeholder(input输入框的提示信息)、 autofocus(input页面加载后自动获取焦点)、 required(输入框的值不能为空，表单提交时判断)、 maxlength(最大长度)、minlength(最小长度)、 novalidate(不验证表单)、autocomplete(设置是否自动完成)
H5新增的表单输入框类型:	email(提交时验证是否有@符号)、 url(提交时验证是否含有http://或者https://)、 number (只能输入数字)、 search(右侧有×号，点击清空内容)、 range(显示滚动条范围)、 color(显示拾色器)、time(显示小时和分钟时间)、 data(显示年月日)、month(显示年月)
audio(音频)	Controls:音频控件 Loop:循环播放 Muted:静音
video(视频)	Controls:视频控件 Loop:循环播放 Muted:静音 Height：高度 Width：宽度

2.C3：

属性选择器

选择所有带有x属性元素	[属性名]
选择所有带有x属性=y属性的元素	[x=”y”]
选择所有带有x属性=y-开头属性的元素	[x\|=”y”]
选择所有带有x属性=y属性值开头的元素	[x^=”y”]
选择所有带有x属性=y属性值结尾的元素	[x$=”y”]
选择所有带有x属性=包含y属性值子字符的元素	[*x=”y”]**

伪类选择器

:first-child	获取指定选择器的第一个元素
:last-child	获取指定选择器的最后一个元素
:nth-child(n)	获取指定选择器的第n个元素（所有子元素的顺序）
:nth-last-child	获取指定选择器的第n个元素（从最后一个开始计数）
:nth-of-type(n)	获取指定选择器的第n个元素（所有指定选择器的顺序）
:nth-last-of-type(n)	获取指定选择器的第n个元素（从最后一个开始计数）

伪元素选择器

::first-letter	选中文本内容的第一个汉字或者字母
::first-line	选中文本内容的第一行
::before	在当前元素的内部的前边添加
::after	在当前元素的内部的后边添加

CSS3新增

CSS3颜色：	新增RGBA，HSLA模式
CSS3阴影：	box-shadow(盒子阴影)，text-shadow(文本阴影)
CSS3圆角边框：	border-radius
CSS3盒子模型：	box-sizing
CSS3背景：	background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点 background-clip 设置背景图片的裁切区域
CSS3渐变：	linear-gradient(线性渐变)、radial-gradient(径向渐变)
CSS3过渡：	transition-property (css属性) transition-duration(过渡的周期) transition-timing-function(过渡的时间速度曲线)：ease(默认的)、linear(匀速的) transition-delay(过渡的延迟)
CSS3自定义动画：	animation-name动画的名称 animation-duration动画的周期 animation-timing-function动画的时间速度曲线 animation-delay动画的延迟 animation-iteration-count动画的次数（infinite无限） animation-paly-state:paused动画的暂停动画的开始：@keyframes动画的名称开始From{} 结束to{}
CSS3-2D转换：	transform：translate(x，y)平移 rotate(x，y)旋转 skew(x，y)扭曲 scale(x，y)缩放拉伸
CSS3-3D转换：	transform-style：preserve-3d；

2.标签元素分类，和特点

块状元素：

hn/p/div/ul/ol/dl/li/dd/dt/table/thead/tbody/caption/tr/form/header/footer/section/nav/article/aside

特点：（1）有默认的宽高，宽是父元素的100%，高是内容撑起来的实际高度（table除外，p标签不能包含块状元素）

（2）宽高可以设置

（3）可以包含任意元素

（4）独占一行

（5）四个方向的内外边距都是可以设置的

行内元素：

Span/a/b/strong/i/em/u/ins/s/del

特点：（1）有默认的宽高，都是内容所撑起来的

（2）设置宽高无效

（3）一般只能包含行内元素和文本内容

（4）相邻的行内元素在同一行上显示

（5）水平方向的外边距可以设置，垂直方向设置无效。内边距四个方向都可以设置

行内块元素：

Img/audio/video/input/button/labe;/select/option/textarea

特点：（1）有默认的宽高，由本身特点所决定

（2）宽高可以设置

（3）一般不包含其他元素

（4）相邻的行内块元素在同一行显示

（5）四个方向的内外边距都是可以设置的

3.圣杯布局（双飞翼布局）有哪几种实现方式

（1）calc ：中间盒子宽度设置为width：calc(100%-两边宽度之和),左中右三个盒子都设置为float：left

（2）浮动：左右两个盒子分别设置为float：left/float：right，中间盒子设置左右内边距padding；

（3）定位position：左右两个盒子设置为position：absolute；top：0；left：0/right:0; 中间盒子设置左右内边距padding；

（4）弹性布局扩张因子：左右两个盒子设置固定宽度；body设置display：flex；中间盒子设置flex-grow：1；

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

display:flex	当前的容器时弹性父容器
flex-directionsh设置项目排列方向（主轴）	Row默认值从左向右 Row-reverse从右向左 Column从上到下 Column-reverse从下向上
justify-content设置项目在主轴方向上的对齐方式	flex-start（默认值）：左对齐； flex-end：右对齐； center：居中； space-between：两端对齐，项目之间的间隔都相等； space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍；
align-items设置项目在交叉轴方向上对齐方式	stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。
flex-warp设置超出容器的项目是否换行	nowrap（默认值）：项目显示在一行中，默认情况下会缩小它们以适应Flex容器的宽度; wrap：如果需要，从左到右和从上到下，弹性项目将显示在多行中; wrap-reverse：如果需要，从左到右和从下到上，弹性项目将显示在多行中;
align-content设置项目换行的对齐方式	flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。
Item项目的属性	order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
align-self	align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

5.常见的盒子模型有哪些，有什么区别

"box-sizing：content-box；（普通盒模型、默认）	标准盒模型：设置的宽度就等于内容的宽度
box-sizing：border-box；（怪异盒模型、IE盒模型）	怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度"

普通盒模型会因内外边距和边框的设置而改变大小

不会因设置内外边距和边框而改变盒子的大小

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .pointer1 {
      position: absolute;
      top: -200px;
      left: 15px;
      width: 10px;
      height: 100px;
      background-color: red;
      transform-origin: left top;
      transform: rotate(-30deg);
      transition: transform 1s linear;
    }
    .pointer2 {
      position: absolute;
      top: -200px;
      left: 15px;
      width: 10px;
      height: 100px;
      background-color: red;
      transform-origin: left top;
      transition: transform 1s linear;
    }
    .altum {
      margin: auto;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-color: coral;
      text-align: center;
      line-height: 200px;
    }
    .play {
      position: relative;
      margin: auto;
      width: 40px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background-color: chartreuse;
      color: white;
    }
  </style>
</head>
<body>
    <div class="altum" id="altum">转圈</div>
    <div class="play" id="play">
      播放
      <div class="pointer1" id="pointer"></div>
    </div>
</body>
<script>
  let n = 0;
  let flag = false;
  var timer;
  let pointer = document.getElementById('pointer');
  let altum = document.getElementById('altum');
  let play = document.getElementById('play');
  play.onclick = () => {
    this.flag = !this.flag;
    if(this.flag){
      timer = setInterval(() => {
        altum.style.transform = `rotate(${n+=10}deg)`;
      },200);
      pointer.className = 'pointer2';
    }else {
      clearInterval(timer);
      pointer.className = 'pointer1';
    }
  }
</script>
</html>

7.说一下对浮动的理解，（什么是浮动，有什么用，怎么用，有什么问题，怎么清除浮动）

浮动：元素脱离标准流，漂浮到指定位置的过程，设置浮动的初衷是实现文字环绕图片的效果

有什么用: 块级元素相邻

怎么用：float：left左浮动right右浮动

问题：添加浮动后的子元素撑不开父元素的高度（因为浮动不占位置）

清除浮动：

（1）额外标签法：给子元素添加额外的兄弟元素（不规范。不够语义化）

（2）为父级元素添加overflow：hidden；（局限于浮动类）

（3）伪元素清除浮动（推荐）

（4）双伪元素清除浮动、 .clearfix {* zoom：1；}

8.伪类有哪些，作用和书写顺序

：link	未访问时的表现
：visited	访问过后的表现
：hover	鼠标移入的表现
：active	鼠标单机的表现

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

(1)转为块级元素再浮动

(2)为父元素添加font-size：0；

10.如何实现文字垂直水平居中，盒子垂直水平居中

文字垂直居中：设置line-height的值和为div盒子的height值

文字水平居中：text-algin:center;

盒子垂直居中: 通过弹性布局改变主轴方向以及设置justify-content：center；

盒子水平居中: margin：auto；

11.单行文本溢出显示省略号，多行文本溢出显示省略号

单行：white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

多行：height:auto;

-webkit-line-clamp:3;

display:-webkit-box;

-webkit-box-orient:vertical;

overflow:hidden;

二、JS+ES6

1.js数据类型有哪些

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

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

2.内置对象有哪些

内置对象：数学对象Math、日期对象new Data()、数组对象new Array()、字符串对象new String()

数学对象:

Math.PI // 圆周率

Math.random() // 生成随机数 (0-1)

Math.floor() // 向下取整

Math.ceil() / /向上取整

Math.round() // 取整，四舍五入

Math.abs() // 绝对值

Math.max() // 求最大

Math.min() //求最小值

日期对象:

var date = new Date() //当前的时间

var year = date.getFullYear() //获取年

var month = date.getMonth()+1 //获取月

var dates = date.getDate() // 获取日

var h = date.getHours() // 获取小时

var m = date.getMinutes() // 获取分钟

var s = date.getSeconds() // 获取秒

var ms = date.getMilliseconds() // 获取毫秒

var week = date.getDay(); //获取周

数组对象：

var arr = new Array() //创建数组对象

判断是否是数组的方式：1、instanceof 2、Array.isArray(变量/值)

数组添减：1、前面添加unshift() 2、后面添加push() 3、去掉最后一个pop() 4、去掉第一个shift()

reverse 方法，数组翻转

sort方法，数组排序

concat方法，连接字符，拼接字符串，返回一个新数组不会改变原来的大小

slice 方法，选取数组的一部分，并返回一个新数组。

splice 方法，用于添加或删除数组中的元素

indexOf方法，从前往后找找到最近的为止然后输出索引值，如果寻找的值在该数组中并不存在则会输出-1

lastIndexOf方法，从后往前找找到最近的为止然后输出索引值，如果寻找的值在该数组中并不存在则会输出-1

join方法，数组转化为字符串，如果括号中什么都不加也是默认以逗号隔开，如果添加符号就会以添加的符号隔开

foreach 方法遍历数组

some 方法用以判断数组中某一项是否满足条件

every方法，判断数组中所有元素是否满足条件，返回boolean值

map方法，相当于中间处理函数，返回映射数组

filter方法，用于创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

find方法，返回通过测试（函数内判断）的数组的第一个元素的值。 findIndex 则是返回索引

字符串对象：

indexOf方法，从前往后找找到最近的为止然后输出索引值，如果寻找的值在该数组中并不存在则会输出-1

lastIndexOf方法，从后往前找找到最近的为止然后输出索引值，如果寻找的值在该数组中并不存在则会输出-1

substr(start,length)，从start位置开始（索引号），length取的个数

substring(start,end)，从start位置开始，截取到end位置，end取不到，基本和slice相同，但是不接受负值。

concat(str1,str2,str3…)，concat()方法用于连接两个或多个字符串。拼接字符串，等效于+,+更常用

slice(start,end)，从start位置开始，街取到end位置，end取不到（他们俩都是索引号）

charAt(index)，获取指定位置字符

trim()，去除字符串前后的空白

split(‘分隔符’), 字符转换为数组

replace(‘被替换的字符’,‘替换为的字符’)，替换字符串

search()，检索位置，用于检索字符串中指定的子字符串，返回子字符串的起始位置

3.数组方法有哪些

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	找到符合条件的项的下标,并且返回第一个

4.数组去重几种方式

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

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

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

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

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

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

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

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

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

10、利用 ES6的set 方法。

详情见之前的文章——

(5条消息) 常用的数组去重的几种方式_终将抵达丶的博客-CSDN博客

5.数组深拷贝几种方式

1、for循环实现

2、slice方法

3、concat方法

4、ES6扩展运算符实现

6.对象深拷贝几种方式

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

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

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

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

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

7.定时器有几种，有什么区别

分为setTimeout、setInterval、requeTanimationFrame（动画API）

setTimeout只执行一次、setInterval可以执行多次；清除setTimeout，clearTimerout、清除setInterval，clearInterval

8.说下对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，只是代表形式上的一个异步操作；什么是形式上的异步操作：就是说，我们只知道它是一个异步操作，但是它做什么具体的异步事情，目前还不清楚

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

导出变量：export{}

导入变量：import{}

注意：

整体导入所有的变量 import * as 自定义对象 from ‘url’

默认导出（只能导出一个）export default

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

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

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

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

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

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

箭头函数没有自己的arguments

箭头函数没有prototype

11.Js实现约瑟夫环问题（m个人留1个或者留n-1个）

    // sum代表多少个人，score代表报什么数组排除
function ring (sum,  score) {
      var numbers = [];
      for (var i = 1; i <= sum; i++) {
        numbers.push(i);
      }
      var flag = 0;
      while (numbers.length > 1) {
        l = numbers.length;
        for (var j = 0; j < l; j++) {
          flag++;
          // 为3时，用splice方法从numbers数组中去掉，改变元数组 
          // 因原数组长度-1，所以索引-1，循环的长度-1
          // 当编号为100时，flag = 1，重新开始报数是1的flag为2，解决的龙摆尾报数的问题
          if (flag == score) {
            flag = 0;
            numbers.splice(j, 1); 
            j--;
            l--;
          }
        }
      }
      return numbers[0];
    };
    console.log(ring(100, 3));
    console.log(ring(200, 3));
ring(100, 3) // 91
ring(100, 5) // 47
ring(200, 3) // 128