css使用心得

最新推荐文章于 2024-07-18 17:34:14 发布

Burcher

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量21

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_37682007/article/details/131300528

版权

元素整体缩放，大小不变；

    width: 125%;
    transform: scale(0.8);

获取文本宽度方法：

    // 网页插入标签，获取offsetWidth
   function getTextWidth2(text, fontSize, fontWeight = 'normal', family = 'sans-serif') {
      const _span = document.createElement('span');
      _span.style.position = 'absolute';
      _span.style.visibility = 'hidden';
      _span.style.fontSize = fontSize + 'px';
      _span.style.fontWeight = fontWeight;
      _span.innerText = text;
      document.body.appendChild(_span);
      let width = _span.offsetWidth;
      document.body.removeChild(_span);
      // 返回span宽度
      return width
   }
   // canvas获取
   function getTextWidth(text, fontSize = 12, fontWeight = 'normal', family = 'sans-serif') {
      if(getTextWidth.canvas) {
        getTextWidth.canvas = null
      }
      getTextWidth.canvas = document.createElement("canvas")
      var ctx = getTextWidth.canvas.getContext("2d"); 
      ctx.font = 'bold ' + fontSize + 'px' + family;
      var metrics = ctx.measureText(text);
      return metrics.width;
   }

修改Chrome、Firfox浏览器默认滚动条样式

   /* chrome start */

  /* 滚动条 */
  ::-webkit-scrollbar {
    width: 8px;
  }
  /* 滚动条上下按钮 */
  ::-webkit-scrollbar-button {
    display: none;
  }
  /* 滚动条内部滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #ddd;
    cursor: pointer;
  }
  ::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background-color: rgb(210, 210, 210);
  }
  /* 滚动条背景色 */
  ::-webkit-scrollbar-track {
    border-radius: 4px;
    background-color: white;
  }

  /* chrome end */

  /* firfox start */
  /* scrollThumbColor scrollTrackColor */
  scrollbar-color: #ddd white;
  /* auto/thin/none/len */
  scrollbar-width: thin;

  /* firfox end */