前端面试题收集(一)

1.cs3的新特性

• 新增了一下边框样式

  • border-image
  • border-radius
  • border-shadow

• 背景样式

  • background-image
  • background-size
  • background-origin (背景区域)

• 文字效果

  • text-shadow
  • text-warp

• 过渡

  • transition (属性简写)
  • transition-property 规定应用过渡的 CSS 属性的名称。
  • transition-duration 定义过渡效果花费的时间。默认是 0。
  • transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”
  • transition-delay

• 动画

  • @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
  • 一般采用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

• 转换

  • transform 向元素应用 2D 或 3D 转换
  • 通过 rotate() 方法，元素围绕某轴给定的度数进行旋转。
  • scale() 按照比例缩放—例如给chrome浏览器设置小于12px的字体
  • perspective() 元素转换的透视试图

• 内减盒子

  • box-sizing

• 弹性盒子

  • 是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式,通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器
  • flex-direction 指定了弹性子元素在父容器中的位置
    • row：横向从左到右排列（左对齐），默认的排列方式。
    • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
    • column：纵向排列。
    • column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
  • justify-content 沿着弹性容器的主轴线（main axis）对齐
    • flex-start：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
    • flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
    • center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
    • space-between：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
    • space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）
  • align-items 弹性盒子元素在侧轴（纵轴）方向上的对齐方式
    • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
    • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
    • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
    • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
    • stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制
  • flex-wrap 属性 指定弹性盒子的子元素换行方式
    • nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
    • wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
    • wrap-reverse -反转 wrap 排列
  • align-content 设置各个行的对齐
    • stretch - 默认。各行将会伸展以占用剩余的空间。
    • flex-start - 各行向弹性盒容器的起始位置堆叠。
    • flex-end - 各行向弹性盒容器的结束位置堆叠。
    • center -各行向弹性盒容器的中间位置堆叠。
    • space-between -各行在弹性盒容器中平均分布。
    • space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半

2.h5的新特性

• 新增了一些语义化的标签
  • header nav aside main footer(常用的)
• 新标签
  • canvas 画布
  • video 视频
  • audio 音频
• 拖放
  • drag 拖
  • drop 放
• Geolocation（地理定位）
• 存储
  • localStorage 用于长久缓存,不会自动删除
  • sessionStorage 用于临时保存在同一窗口的数据,关掉窗口就清楚(可临时保存账户密码)
• webwork
  • 一个在后台独立运行的js服务,不会影响性能
• websocket
  • h5提供的单个全双工通讯协议,解决了浏览器与服务器三次握手四次挥手的问题,数据一旦链接,就不会关闭,除非手动关闭

3.es6的新特性

• 箭头函数
  • 解决了传统函数中this指向的不确定性
  • 传统js中的this,只有在函数执行中才能确定,但实际上他的this的最终指向是调用他的对象
  • 箭头函数中的this,是定义函数的时候绑定的,简单来说函数在定义的时候,this就继承了定义函数的对象
• 变量声明
  • let 不会进行变量提升 变量名不能重复
  • const 值不能改变
• 解构语法
  • 对象解构
  • 数组解构
  • 字符串的解构赋值
• promise
  • 解决了回调地狱的问题
    • promise一旦被创建,就马上自行了一次
    • 有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）

function getDate(value) {
  let p = new Promise((resolve, reject) => {
    if (resolve) {
      resolve(value)
    } else {
      reject(err)
    }
  })

  return p
}

getDate(value)
.then(res=>{})
.then({})
......

• proxy
  • vue3.0 的双向绑定可能将用到proxy
  • 优化了defineProperty中只能监听到设置的属性的值,而proxy可以定义一个空对象,监听所有的值的改变