CSS

溢出文本打点

/* 单行文本 */
.ellipsis{
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 隐藏文本打点 */
}

/* 多行文本 */
.method-box1{
  /* 方式一：基于高度截断，手动打点 */
  &.mul-ellipsis{
    line-height: 20px; /* 单行文本高度 */
    max-height: 60px; /* 容器最大高度 */
    overflow: hidden; /* 超出部分隐藏 */
    position: relative; /* 设置相对定位 */
    &::after{
      content: "..."; /* 添加打点 */
      position: absolute; /* 绝对定位，根据父级进行定位 */
      bottom: 0;
      right: 0;
      line-height: 20px;
      background-color: #fff; /* 与容器背景颜色相同 */
      width: 16px;
    }
  }
}

/* 只兼容webkit内核的浏览器：chrome、safari */
.method-box2{
  /* 方式二：基于高度截断：自动打点 */
  &.mul-ellipsis{
    display: -webkit-box; /* 设置盒模型基于webkit，允许我们使用 -webkit-line-clamp 来控制文本行数*/
    -webkit-box-orient: vertical; /* 指定文本垂直方向布局 */
    -webkit-line-clamp: 3; /* 控制文本行数 */
    overflow: hidden; /* 超出部分隐藏 */
  }
}

代码

pointer-events

使用 pointer-events 可以使得某些元素在交互上更加灵活，比如在实现一些特殊的图形、动画效果时，控制事件的传递和捕获，或者在特定情况下禁用某些元素的交互行为。

/* Keyword values */
pointer-events: auto;
pointer-events: none; /* 元素不响应鼠标事件，鼠标事件穿透到元素下面的元素上 */
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events: visible; /* SVG only */
pointer-events: painted; /* SVG only */
pointer-events: fill; /* SVG only */
pointer-events: stroke; /* SVG only */
pointer-events: all; /* SVG only */

pointer-events

包含块

• 如果元素的 position 是 relative 或 static ，那么包含块由离它最近的块容器（block container）的内容区域（content area）进行定位
• 如果position属性是fixed，那么包含块由视口建立
• 如果元素使用absolute定位，则包含块由它最近的position的值不是static（也就是值是fixed、absolute、relative、sticky）的祖先元素的内边距区域的边缘组成

css选择器优先级--权重

• !important infinity（正无穷）
• 行间样式 1000
• id 100
• class|属性|伪类 10
• 标签|伪元素 1
• 通配符 0

圣杯布局

• float + padding + relative + margin负值

<div class="wrap">
    <div class="box main">mian</div>
    <div class="box left">left</div>
    <div class="box right">right</div>
</div>

双飞翼布局

• float + margin + relative + margin负值

<div class="wrap">
    <div class="box main">
        <div class="inner">main</div>
    </div>
    <div class="box left">left</div>
    <div class="box right">right</div>
</div>