木子李

Appearance

ant-design-vue 1.7.8 高度滚动的时候宽度不对齐问题 ​

1.7.8是vue2的版本 只需要在样式上加上

vue
<style scoped lang="less">
    /deep/.ant-table-header {
      overflow-y: hidden !important;
    }
    /deep/.ant-table-body::-webkit-scrollbar {
      display: none;
    }
</style>

transform 会影响fixed定位 ​

Grid布局 ​

两个元素相邻的时候中间的间隔 ​

scss
.signal {
  display: flex;
  justify-content: center;
  align-items: flex-end;

  .signal-item {
    width: 4px;
    height: calc(4px * var(--i));
    background: #d7d7d7;

    + .signal-item {
      margin-left: 2px;
    }
  }
}

网页变灰 ​

css
html{
   -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
    -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}

保持元素的宽高比 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .container {
    width:50%;
    aspect-ratio: 4 / 3;//宽高比是4比3；选在兼容性问题
  }
</style>
<body>
  <div class="container"></div>
</body>
</html>

使用padding ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .container {
      width: 50%;
      margin: 0 auto;
      /* aspect-ratio: 4 / 3; */
    }
    .son {
      width: 100%;
      height: 0;
      padding-bottom: 75%;//相对于父元素的width
      position: relative;
      background-color: red;
    }
    .content {
      position: absolute;
      inset: 0; /*left:0;right:0;top:0;bottom:0;*/
      background-color: black;
      color: white;
    }
  </style>
  <body>
    <div class="container">
      <div class="son">
        <div class="content">123</div>
      </div>
    </div>
  </body>
</html>

媒体查询，不同分辨率的屏幕上给html设置不同的font-size，使用rem做适配 ​

css
/* 针对宽度在600px到1199px之间的设备 */
@media (min-width: 1400px) and (max-width: 1920px) {
    html {
        font-size: 16px;
    }
}
@media (min-width: 1921px) and (max-width: 2560px) {
    html {
        font-size: 18px;
    }
}
@media (min-width: 2881px) and (max-width: 3840px) {
    html {
        font-size: 20px;
    }
}

英文换行 ​

css
 word-break: break-word;

css中pointer-events属性 ​

在CSS中，pointer-events 属性用于指定是否以及如何对元素进行鼠标事件的处理。这个属性可以用来控制元素是否响应鼠标操作，比如点击、悬停等。

常见值及其效果： ​

  • auto（默认值）：元素会正常接收所有鼠标事件。
  • none：元素不会成为鼠标事件的目标。这意味着任何鼠标事件都会“穿透”该元素，直接传递给其下面的其他元素。这对于创建不可点击或不可交互的层非常有用。
  • visiblePainted：对于SVG元素，只有当鼠标位于可见且已填充的部分上时，元素才会接收鼠标事件。
  • visibleFill：对于SVG元素，只有当鼠标位于可见填充区域上时，元素才会接收鼠标事件。
  • visibleStroke：对于SVG元素，只有当鼠标位于可见描边部分上时，元素才会接收鼠标事件。
  • visible：对于SVG元素，只要元素是可见的，它就会接收鼠标事件。
  • painted：对于SVG元素，无论是否可见，如果元素已被填充，则接收鼠标事件。
  • fill：对于SVG元素，无论是否可见，如果鼠标位于填充区域上，则接收鼠标事件。
  • stroke：对于SVG元素，无论是否可见，如果鼠标位于描边部分上，则接收鼠标事件。
  • all：无论元素是否可见，它都会接收所有鼠标事件。

使用场景： ​

  1. 禁用点击：如果你有一个按钮或者链接，但是在某些情况下不想让它响应点击事件，可以设置 pointer-events: none;。
  2. 穿透层：在多层重叠的布局中，有时需要让上层元素不阻挡下层元素的点击，这时也可以使用 pointer-events: none;。
  3. 优化性能：在复杂的网页应用中，如果有些元素不需要用户交互，可以通过设置 pointer-events: none; 来减少浏览器的事件监听负担，从而提高性能。

图片遮罩 ​

css
.box{
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

完整案列：

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css+svg遮罩</title>
  </head>  
  <style>
      /*隐藏svg标签*/
  	svg {
      width: 0;
      height: 0;
      position: absolute;
    }  
    .box {
      width: 500px;
      height: 200px;
      background-color: blue;
      -webkit-mask-image: url(#mask);
      mask-image: url(#mask);
    }
  </style>
  <body>
    <div class="box"></div>
   <svg
      width="100%"
      height="100%"
      viewBox="0 0 100% 100%"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <mask id="mask" maskContentUnits="objectBoundingBox">
          <!-- 主体遮罩 -->
          <rect
            x="0"
            y="0"
            width="1"
            height="1"
            rx="0"
            ry="0"
            fill="white"
          ></rect>
          <ellipse cx="0.5" cy="0" rx=".5" ry=".1" fill="black"></ellipse>
          <ellipse cx="0.5" cy="1" rx=".5" ry=".1" fill="black"></ellipse>
        </mask>
      </defs>
    </svg>
  </body>
</html>

效果：微信截图_20241129150245

微信截图_20241129150521