table使用技巧

js
table {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
        table-layout: fixed;

        th,
        td {
            border: 1px solid red;
            padding: 8px;
            box-sizing: border-box;
            width: 50px;
            height: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

        }
        



    }

图片使用

js
   background: url() no-repeat center center;
background-size: 100% 100%;
      
      <img :src="" style="object-fit: contain; width: 100%;"></img>

文字使用

js
// 出现3个点
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

font-weight

js
数值	常见名称
100	Thin（极细）
200	Extra Light
300	Light
400	Regular / Normal
500	Medium
600	SemiBold / DemiBold（半粗）
700	Bold（粗体）
800	Extra Bold
900	Black / Heavy

浏览器事件

js

mousedown	鼠标	鼠标按下
mousemove	鼠标	鼠标移动
mouseup	鼠标	鼠标松开
touchstart	触屏	手指按下
touchmove	触屏	手指移动
touchend	触屏	手指抬起

dom树的宽度

js
dom.style.width：读的是dom树
getComputedStyle($0).width：读到的是计算样式（cssdom树）'71.8906px'
(布局树：不考虑变形):dom.clientWidth：content+padding  没有单位（默认是px）
                  offsetWidth：content+padding+scroll（滚动条）+border

                scrollWidth：可见和不可见的宽度
dom.getBoundingClientRect().width （用户看到的是视觉尺寸）