常用 CSS 样式收录

文本超出显示...

文本域需要指定指定范围，block 指定宽度, flex 撑开等。父元素不能指定宽度的时候，也可以用width: 0。

单行文本：

width: 100px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

多行文本：

width: 200px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
-webkit-box-orient: vertical;

绝对定位不抢占点击

绝对定位布局覆盖了相对布局的元素之后，绝对定位里的点击事件生效，被覆盖的相对定位的元素就点击失效了。

需要进行处理：在绝对定位布局上添加样式 pointer-events: none; 在绝对定位里需要保留点击的子元素添加样式pointer-events: auto;

这样相对布局和绝对布局里的子元素的点击事件都可以触发了，但两个元素 Z 向重叠时，默认只触发绝对定位元素的点击。

MDN: 父元素值none表示鼠标事件“穿透”该元素，子元素的pointer-events属性指定其他值时，鼠标事件可以指向该子元素

<div class="rela">
  <button onclick="alert('1')">相对定位的按钮</button>
  <div class="abso">
    <button class="abso_btn" onclick="alert('2')">绝对定位层里的按钮</button>
  </div>
</div>
<style>
  .rela {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    position: relative;
  }
  .abso {
    position: absolute;
    background-color: #a00;
    opacity: 0.3;
    top: 0;
    left: 0;
    width: 300px;
    height: 100px;
    pointer-events: none;
  }
  .abso_btn {
    margin-top: 50px;
    pointer-events: auto;
  }
</style>

去除滚动条宽度

scrollbar-width 宽度设置 0，加上一个伪元素。写法：

scrollbar-width: none;
&::-webkit-scrollbar {
  display: none;
}

滤镜 filter

调整图像背景和边框渲染。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

url()
blur() 模糊
brightness() 明亮-黑暗
contrast() 对比度
drop-shadow() 阴影及模糊
grayscale() 灰度
hue-rotate() 色相旋转
invert() 反转图像
opacity() 透明度
saturate() 饱和度
sepia() 深褐色转换比例

has/not 子元素存在性

.b 元素默认绿色，同级的 .a 或者 .a>.conntent>.name 不存在时 .b 元素显示红色

<style>
  .b {
    width: 10px;
    height: 10px;
    background-color: #0a0;
  }
  /*  不存在 .a>.content.name 元素时 */
  .root:not(:has(.a > .content > .name)) > .b {
    background-color: #a00;
  }
</style>

<div class="root">
  <div class="a">
    <div class="content">
      <span class="name"></span>
    </div>
  </div>
  <div class="b"></div>
</div>