【面筋烧烤手册】20210312

CSS

BFC的理解

position的值

两种盒子模型

box-sizing的值

动画animation、transition、transform、translate

transition

元素从这个属性(color)的某个值(red)过渡到这个属性(color)的另外一个值(green)，这是一个状态的转变，需要一种条件来触发这种转变，比如我们平时用到的:hoever、:focus、:checked、媒体查询或者JavaScript。

• 需要事件触发，所以没法在网页加载时自动发生
• 是一次性的，不能重复发生，除非一再触发
• 只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态
• 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
  

animation

先来看看keyframes这个关键点，它定义了一个动画组合叫changebox，里面的10%，50%，70%，100%代表在变化中不同时间点的属性值，比如这个动画的总时间是1s，那么10%就是在0-0.1s中的动画，通过这个我们可以较精确的控制动画变化中任何一个时间点的属性效果，这大大提高了我们对动画的把控，是做复杂动画的基础

transform

• 移动：translate(x,y)
• 旋转：rotate(angle)
• 缩放：scale(x[,y]?)
• 倾斜：skew(x-angle,y-angle)

实现打字机的效果

:root {
  font-size: 20px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

h1 {
  font-size: 6rem;
  margin: 0;
  padding: 0;
  font-family: monospace;
  position: relative;
}

h1::after {
  content: '';
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 6rem;
  background-color: #000;
  border-radius: 2px;
  right: -30px;
}

h1.ended::after {
  animation: 1.1s cursor steps(2, jump-none) infinite;
}

@keyframes cursor {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

h1 span {
  --delay: 10s;
  
  display: inline-block;
  overflow: hidden;
  width: 0ch;
  animation: 0.1s text-in ease-in-out forwards;
  animation-delay: var(--delay);
}

@keyframes text-in {
  from {
    width: 0ch;
  }
  to {
    width: 1ch;
  }
}

const h1 = document.querySelector('h1')
// h1.innerHTML = h1.textContent.replace(/\S/g, "<span>$&</span>")

// Support Space:
h1.innerHTML = h1.textContent
  .replace(/\S/g, "<span>$&</span>")
  .replace(/\s/g, "<span>&nbsp;</span>")

let delay = 0
document.querySelectorAll('span').forEach((span, index) => {
  delay += 0.1
  
  if (index === 6) delay += 0.3
  
  span.style.setProperty('--delay', `${delay}s`)
})

h1.addEventListener('animationend', (e) => {
  if (e.target === document.querySelector('h1 span:last-child')) {
    h1.classList.add('ended')
  }
})

position属性

移动端的适配问题

• rem布局
• vh 根据视口高度和宽度
• %
• 弹性布局
• Grid布局

三角形

JS

拿到一个JS代码过后是怎么执行这个JS代码的

语法错误

预编译阶段：变量提升、作用域、this指向问题

执行阶段：入出、异步操作…调用…

JS基础类型

垃圾回收机制

事件循环

阻止事件冒泡

event.stopPropagation() 

或者 ie 下的⽅法

event.cancelBubble = true;

this指向的修改

bind的理解、返回的是什么

HTML

输入URL到渲染完毕（CSS tree和HTML tree没答好）

碎碎念环节

学校的网+4G也太爆炸了，不过还是勉强解决了，现在有一万个想法想下次Interview在室内进行，毕竟之前几次inRoom-Interview都是室内，主要室外的话有点影响因素在里面，听不清楚MI-Interviewer在讲什么。
其实MI-Interviewer都考的很基础，只是我自己觉得答得不是很好。