跳至主要內容

CSS自用手册

四夕云升2025年4月3日...大约 7 分钟前端开发CSS

基础

多行省略号

/* 多行省略号 */
* {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}

:nth-child 伪类选择器运用

  1. :nth-child(4n) : 这个选择器匹配其父元素的第 4n 个子元素，其中 n 是一个非负整数（0, 1, 2, 3, …）。
  2. :nth-child(-n + 3) : 这个选择器匹配其父元素的前 n 个子元素，直到第 3 个子元素，其中 n 是一个非负整数。

文字的竖向排布

使用 writing-mode :

alt text
alt text

在网页中隐藏滚动条

/* 针对整个页面的滚动条 */
body::-webkit-scrollbar {
    display: none;
}

/* 针对特定元素的滚动条 */
.element::-webkit-scrollbar {
    display: none;
}

使 <span> 中文字段落的换行生效

<span> 会使里面文字的换行不生效，使用 white-space: pre-wrap; 可以使其正常换行。

消除 <div> 包裹 <img> 时底部多余间隙

有时当使用 <div> 元素包裹 <img> 元素时， <div> 会溢出一些高度，比内部 <img> 的实际高度要多些，采用以下方式消除：

.img-div{
  padding: 22rpx 0;
  background: #fff;
  .img{
    width: 100%;
    display: block; // 消除图片底部间隙
    height: auto; // 明确声明高度自适应
  }
}

进阶

Vue中向CSS传动态参

// --- template ---
<view class="page-container" :style="cssVars">
// --- script ---
// 注意要加``
computed: {
  cssVars() {
    return `--moveX: ${this.moveX}px; --moveY: ${this.moveY}px;`
  }
},
// --- css ---
transform: scale(1) translate(var(--moveX), var(--moveY));

调了半小时才弄好的，可没看上去那么简单，原理参考文章：HTML 如何向 CSS 类传递参数|极客教程

使绝对定位的文字实现居中效果

对于绝对定位的文字，使用 transform 属性可以使其实现上下居中效果：

span {
  position: absolute;
  ...
  transform: translateY(-50%)
}

如果要实现左右的居中的话，直接使用 text-align: center; 即可。

.class-name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%)
}

三元运算以外的一种条件语句写法

看着要比三元运算难理解些，还是尽量用三元运算吧：

<div
    class="className"
    :class="{ isLast: isLast }"
    :style="{ ...(!isPDP && {'--height': 100px}) }"
  >

...(!isPDP && {'--height': 100px})其意思是当isPDP为false时，'--height': 100px

三元运算版: :style="{ '--height': isPDP ? '200px' : '' }"

flex 换行问题

flex-wrap属性指定flex元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。

flex 容器中出现过长的文本，会自动缩小可以缩小的容器以适应容器，因为它们使用的是允许缩小的初始Flexbox值。如果项目的子元素无法缩小，使用nowrap会导致溢出，或者缩小程度还不够小。

注意：不打空格的英文或数字不会触发自动换行，过长的一连串英文或数字会导致超出盒子，这时需要使用word-break: break-all来强制换行。

注意：当子项的宽度总和超过 flex 容器的宽度时，子项的padding、border和margin等外部空间属性也会被压缩，以适应容器宽度。这是 Flexbox 的默认行为，被称为“flex 缩放”。它有时会导致意想不到的错误，可以通过flex-shrink: 0取消。下面是一个是没有设置flex-shrink属性的默认情况下出现的错误示例：

alt text
alt text

当设置flex-shrink: 0后恢复正常：

alt text
alt text

width 与 left 间的平衡

先抛出代码：

.div-class {
  width: calc(100% - 20vw);
  left: 10vw;
  right: 10vw;
}
.div-class {
  width: 5vw;
  left: calc(50% - 2.5vw);
}

容器实际宽度，为 width 的属性值再加上 left 的属性值，也就是说，当如果设置 width: 100%; left: 10px 时，实际容器的宽度为 100% + 10px ，故如果我们想让容器的实际宽度为 100%，则需要对 width 属性进行修正，使用到 calc() 函数，即 width: calc(100% - 10px); 。同理，反之则需要对 left 属性进行修正。

图片的自适应问题

以下方法在我实践时有部分问题

在写 banner 图时，发现一个问题，轮播图中使用的图片大小不同，会出现撑起的容器高度不一致，没法对其的情况，如果简单地采用明确的宽高(px 单位)，又无法自适应多种设备。

在网上找到了合适的教程，原理是使用 vw 解决，现简单的总结下：

  1. 理解 vw 单位，即将视窗宽度分为 100 份，每份即为 1vw；
  2. width 正常设置为 100%，然后设置height: 需要图片的高度 / 设备宽度 * 100，例如我需要的正常图片高度为 624px，设备宽度为 768px，那么height: 624 / 750 * 100，即可得到需要的高度；
  3. 接下来使用到object-fit: cover，关于 object-fit，可以参考MDN；

参考地址

当视窗尺寸改变时，例如切换为手机端，因为高度单位为 vw，会导致图片的剪切样式严重变形，如下图所示：

alt text
alt text

最后我还是回到直接使用 px (H5用rem实现自适应，微信小程序用rpx实现自适应)，我们做响应式式的时候根据设计稿定义不同设备下img外部容器的height: your-height-px属性，然后对img设置:width: 100%; height: 100%; object-fit: cover;即可。

@media screen and (max-width: 768px) {
  & .image-wrapper {
    height: 200px;
    width: 100%;
    img.product-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

inline-block 布局顶部未对齐问题修复

遇到的一个使用 display: inline-block 的布局问题，其内部元素排列顶部未对齐，有错位情况，且尚未明晰错误原因，目前解决方案为添加属性 vertical-align: top 手动使其顶部对齐。

.session-item {
  display: inline-block;
  width: 214rpx;
  height: 124rpx;
  margin-right: 12rpx;
  vertical-align: top;
}

固定宽高比布局技巧

要实现img高度占整个容器的56.25%，同时让容器高度由内容决定，可以使用这个技巧：

核心原理

.container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 比例 */
}

关键点

  1. 数学关系：

    • padding-bottom 百分比值是相对于父元素宽度计算的
    • 56.25% = 9/16 (高度/宽度)，即 16:9 比例
    • 其他常见比例：
      • 75% = 4:3
      • 62.5% = 8:5
      • 100% = 1:1

  2. 必须配合的属性：

    • height: 0 - 清除元素固有高度
    • position: relative - 为内部绝对定位元素提供参照

  3. 图片适配：

    img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

优点

  1. 纯CSS实现，不依赖JavaScript
  2. 响应式自适应，比例随宽度自动调整
  3. 兼容性好（IE9+）

使用场景

  1. 响应式视频/图片容器
  2. 保持广告位比例
  3. 图片画廊统一布局
  4. 移动端首屏加载占位

注意事项

  1. 内容需要使用绝对定位放置在容器内
  2. 对于非替换元素(div等)，需要额外的内容容器
  3. 在Flex/Grid布局中可能需要调整

完整示例

<div class="aspect-ratio-box">
  <img src="image.jpg" class="aspect-ratio-content">
</div>

<style>
.aspect-ratio-box {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  overflow: hidden;
}
.aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

这个技巧在响应式设计中非常实用，特别是需要保持视觉元素比例一致的场景。

高级

通过建模卡牌制作的翻牌动效

实际原理是将卡牌进行了建模，非常巧妙，宜多体会。

<view class="game-cards">
  <view
    v-for="(card, index) in currentCards"
    :key="index"
    :class="[card.isFront ? '' : 'flip', card.isSuccess ? 'success' : '']"
    class="cards"
    @click="handleFlip(card)"
  >
    <image :src="card.img" class="card front" />
    <image :src="cardBackUrl" class="card back" />
  </view>
</view>
.cards {
  position: relative;
  width: 160rpx;
  height: 224rpx;
  transform-style: preserve-3d;
  transition: all 0.3s ease-in;
  &:not(:nth-child(4n)) {
    margin-right: 6rpx;
  }
}
.card {
  position: absolute;
  left: 0;
  top: 0;
  width: 160rpx;
  height: 224rpx;
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
}
.flip {
  transform: translate3d(0, 0, 0) rotateY(180deg);
}
转载需注明出处，禁止商业性使用
Copyright © 2025 四夕云升