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 （用户看到的是视觉尺寸）

监听元素的尺寸发生变化

js

createResizeObserver() {
  let timer = null;

  this.ro = new ResizeObserver(() => {
    clearTimeout(timer);

    timer = setTimeout(() => {
      this.$refs.chart?.resizeChart();
    }, 100);
  });

  this.ro.observe(this.$refs.rightCharts);
}

高度atuo

js
 .box {
        display: grid;
        grid-template-rows: 0fr;
        width: fit-content;
        max-width: 100px;
        background-color: rgb(0, 128, 255);
        border-radius: 6px;
        transition: grid-template-rows 0.3s ease;
      }

      .box.open {
        grid-template-rows: 1fr;
      }

      .box > div {
        overflow: hidden;
        padding: 6px;
      }
      
       <button onclick="document.querySelector('.box').classList.toggle('open')">
      点击展开收起
    </button>

    <div class="box">
      <div class="content">内容测色踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩</div>
    </div>

label使用

js
<label for="agree">同意协议</label>
    <input id="agree" type="checkbox" />
    <label>
      <input id="agree" type="checkbox" />
      a
    </label>