最近常用知识

Chrome不能显示小于12px的字体

transform:scale(0.5);// 只针对有固定宽高的 
display:inline-block;// 行内元素可以加这句


-webkit-text-size-adjust: none; 

ios 手机不支持时间格式字符串-：

activityStartTime.replace(/\./g, "/")
activityStartTime.replace(/\-/g, "/")

阴影css3:

box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：必需。水平阴影的位置。允许负值。
v-shadow：必需。垂直阴影的位置。允许负值。
blur：可选。模糊距离。
spread：可选。阴影的尺寸。
color：可选。阴影的颜色。请参阅 CSS 颜色值。
inset：可选。将外部阴影 (outset) 改为内部阴影。


外阴影：
box-shadow:-10px 0px 10px red,   /*左边阴影*/ 
                     0px -10px 10px #000,  /*上边阴影*/ 
                     10px 0px 10px green,  /*右边阴影*/ 
                      0px 10px 10px blue;" /*下边阴影*/

内阴影：inset
box-shadow: 0px 0px 10px red inset

点击按钮滚动到指定位置(vue)：

methods: {
    btnJump() {
      let that = this;
      that.$nextTick(() => {// vue操作dom异步 所以需要保证dom可执行
        let toTop = that.$refs.descRef.offsetTop;
        window.scrollTo(0, toTop);
      });
    },
}

或者动态滑动：// scroll.js
function scrollAnimation(currentY, targetY) {
  // 计算需要移动的距离
  let needScrollTop = targetY - currentY;
  let _currentY = currentY;
  setTimeout(() => {
    // 一次调用滑动帧数，每次调用会不一样
    const dist = Math.ceil(needScrollTop / 10);
    _currentY += dist;
    window.scrollTo(_currentY, currentY);
    // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
    if (needScrollTop > 10 || needScrollTop < -10) {
      scrollAnimation(_currentY, targetY);
    } else {
      window.scrollTo(_currentY, targetY);
    }
  }, 100);
}
// 暴露此方法
export default scrollAnimation;

调用到地方.vue：
import scrollAnimation from "./scroll.js";
 methods: {
    btnJump() {
      let that = this;
      that.$nextTick(() => {
        let toTop = that.$refs.descRef.offsetTop;
        scrollAnimation(0, toTop);
      });
    },
}

CSS书写顺序

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color, text-align等)
4.背景(background, border等)
5.其他(animation, transition等)