每日思考（2020/09/01）

题目概览

• 写出以下几个HTML标签：字体、居中、文字加粗、下标
• 行内css和important哪个优先级高
• 实现一个js的持续动画
• 对Git的branch, diff, merge的理解

题目解答

写出以下几个HTML标签：字体、居中、文字加粗、下标

• html标签

  <font>字体：</font>
  <center>居中：</center>
  <strong>文字加粗：</strong> <b>文字加粗</b>
  <sub>下标：</sub>
  

• 对应的css样式

  字体：font
  居中：text-align: center
  文字加粗：font-weight: bold
  下标：vertical-align:sub
  

行内css和important哪个优先级高

• !important 将覆盖行内css
• css优先级：行内css>id选择器(#)>伪类(:)>属性选择器([])>类选择器(.) > 类型选择器(div p a等) > 通用选择器(*)

实现一个的持续动画

• 定时器

  let dv = document.getElementById('dv');
  let left = 0;
  let timeId = setInterval(()=>{
      if(left >= 100){
          clearInterval(timeId)
      }else{
          left++;
          dv.style.left = left + 'px';
      }
  },1000/60)
  

• requestAnimationFrame

  //兼容性处理
  window.requestAnimFrame = (function(){
      return window.requestAnimationFrame       ||
             window.webkitRequestAnimationFrame ||
             window.mozRequestAnimationFrame    ||
             function(callback){
                  window.setTimeout(callback, 1000 / 60);
             };
  })();
  
  var e = document.getElementById("e");
  var flag = true;
  var left = 0;
  
  function render() {
      left == 0 ? flag = true : left == 100 ? flag = false : '';
      flag ? e.style.left = ` ${left++}px` :
          e.style.left = ` ${left--}px`;
  }
  
  (function animloop() {
      render();
      requestAnimFrame(animloop);
  })();
  

• css

  animation:mymove 5s infinite;
  
  @keyframes mymove {
      from {top:0px;}
      to {top:200px;}
  }
  

对Git的branch, diff, merge的理解

• branch git分支相关操作，可用于查看、新建、删除分支以及分支的重命名操作
• diff 用于对比两次修改的差异 可以通过自定义参数来指定对比哪两次修改
• merge 用于合并分支或者某次提交 一般用于将分支或修改的内容合并到master上