学习周记（10.4-10.10）

多行文本省略号

    // html 
    <div class="ellipse">
      学习周记学习周记学习周记学习周记学习周记学习周记学习周记学习周记学习周记
      学习周记学习周记
    </div>
    
    // css
    .ellipse {
      display:-webkit-box; /* 先让容器变成一个弹性伸缩盒子 */
      width: 200px;
      overflow:hidden;
      text-overflow:ellipsis;
      -webkit-line-clamp:2;  /* 最大显示的文本行数 */
      -webkit-box-orient:vertical;  /* 设置或检索伸缩盒对象的子元素的排列方式  */
    }
    
    // 上述css中的-webkit-box是css3新添加的盒子模型属性（box-flex），
    可以用来布局垂直等高、水平均分、按比例划分。不过，目前box-flex属性
    还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的
    私有属性定义firefox(-moz)、opera(-0)、chrome/safari（-webkit)。

文件下载

/** 
* @param {file} blob 下载文件内容 
* @param {String} fileName 下载文件名
*/
function downloadFile (blob, fileName) { 
  if (navigator.msSaveBlob) { // 判断当前环境是否存在原生下载方法
    navigator.msSaveBlob(blob, fileName) 
  } else { 
    let OA = document.createElement('a') 
    OA.href = window.URL.createObjecURL(new Blob([blob]), {type: type})
    OA.download = fileName OA.click() 
  } 
}

Scss样式内calc计算错误

/* 错误 */
div {
  display: inline-block;
  width: calc(100% - 20px)
}

/* 结果计算后成了width: 80% */

/* 正确 */
div {
  display: inline-block;
  width: calc(~"100% - 20px")
}

弹幕效果

• html与css实现弹幕效果，且鼠标上移弹幕的时候会停止动画，移开后继续动画

    <!-- html -->
    <div class="content">
      <div class="comment">哈哈哈哈</div>
      <div class="comment">不想上班</div>
      <div class="comment">学习周记</div>
    </div>

    /* css */
    .content {
      height: 2000px;
      background-color: #999999;
      margin: 200px;
      position: relative;
      overflow: hidden;
    }
    .comment {
      background-color: #fff;
      animation: move 5s infinite linear;
      animation-play-state: running;   // 控制动画暂停与进行
      position: absolute;
      white-space: nowrap;
    }
    .content .comment:nth-of-type(1) {
      top: 20px;
    }
    .content .comment:nth-of-type(2) {
      top: 80px;
    }
    .content .comment:nth-of-type(3) {
      top: 140px;
    }
    .comment:hover {
        animation-play-state: paused;  // 鼠标上移的时候暂停动画
    }
    @keyframes move {
      0% {
        left: 110%;
      }
      100% {
        left: -10%;
      }
    }

• 本周小结：这周作为开始，记录每周学习到的知识点，本周的东西主要是css相关