一些我容易混淆的 css 知识总结

布局相关

position: sticky 失效问题

position: sticky 常见失效原因：

父元素设置了 overflow: hidden/auto/scroll：sticky 元素会被限制在父容器内
未设置 top/bottom/left/right：必须指定至少一个定位值
父元素高度不够：sticky 元素需要有足够的滚动空间
display 冲突：父元素不能是 flex 或 grid 的直接子项且未设置对应值

css

.sticky-element {
  position: sticky;
  top: 0; /* 必须设置 */
  z-index: 10; /* 避免层级问题 */
}

gap

现代化的间距方案，适用于 Flex 和 Grid 布局：

css

.flex-container {
  display: flex;
  gap: 16px; /* 统一间距 */
  row-gap: 20px; /* 行间距 */
  column-gap: 10px; /* 列间距 */
}

place-items

align-items 和 justify-items 的简写：

css

.grid-container {
  display: grid;
  place-items: center; /* 水平垂直居中 */
  place-items: start end; /* align-items: start; justify-items: end; */
}

双列布局

使用 Flex 实现响应式双列布局：

css

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 0 0 calc(50% - 10px); /* 减去 gap 的一半 */
}

margin-left: auto 实现右对齐

在 Flex 布局中，auto 会占据所有剩余空间：

css

.nav-item:last-child {
  margin-left: auto; /* 推到最右边 */
}

文本与字体

background-clip: text

创建渐变文字效果：

css

.gradient-text {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

text-stroke

文字描边效果（主要是 WebKit 支持）：

css

.stroke-text {
  -webkit-text-stroke: 2px #000;
  text-stroke: 2px #000;
  color: transparent; /* 透明填充 */
}

white-space: pre-line

保留换行符，但合并空格和制表符：

css

.pre-line {
  white-space: pre-line; /* 保留 \n，合并空格 */
}

word-wrap: break-word

防止长单词溢出：

css

.break-word {
  word-wrap: break-word; /* 旧属性名 */
  overflow-wrap: break-word; /* 标准属性名 */
}

user-select

控制文本选择行为：

css

.no-select {
  user-select: none; /* 禁止选择 */
}

.select-all {
  user-select: all; /* 点击选中全部 */
}

伪类与伪元素

:empty

选择没有子元素的元素（包括文本节点）：

css

.list-item:empty {
  display: none; /* 隐藏空元素 */
}

/* 注意：空格也算内容 */
.box:empty::before {
  content: '暂无数据';
}

:invalid

选择无效的表单元素：

css

input:invalid {
  border-color: #ff4757;
}

input:valid {
  border-color: #26de81;
}

:focus-within

当元素或其子元素获得焦点时触发：

css

.form-group:focus-within {
  background: #f0f0f0;
  border-color: #4ecdc4;
}

/* 实用场景：搜索框容器高亮 */
.search-wrapper:focus-within .search-icon {
  color: #4ecdc4;
}

:target

选择 URL 锚点指向的元素：

css

.section:target {
  background: #fff3cd;
  animation: highlight 1s ease;
}

@keyframes highlight {
  from {
    background: #ffc107;
  }
  to {
    background: #fff3cd;
  }
}

::selection

自定义文本选中样式：

css

::selection {
  background: #4ecdc4;
  color: #fff;
}

::-moz-selection {
  background: #4ecdc4;
  color: #fff;
}

&:nth-child

CSS 嵌套中的选择器（CSS Nesting 2024+）：

css

.list {
  .item {
    &:nth-child(odd) {
      background: #f5f5f5;
    }

    &:nth-child(even) {
      background: #fff;
    }
  }
}

视觉效果

mix-blend-mode: difference

差值混合模式，常用于创建反色效果：

css

.blend-text {
  mix-blend-mode: difference;
  color: #fff; /* 会根据背景自动反色 */
}

/* 实用场景：深色/浅色背景自适应文字 */

filter

CSS 滤镜效果：

css

.image {
  filter: blur(5px); /* 模糊 */
  filter: brightness(1.5); /* 亮度 */
  filter: contrast(1.2); /* 对比度 */
  filter: grayscale(100%); /* 灰度 */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); /* 投影 */
}

/* 组合使用 */
.dark-image {
  filter: brightness(0.8) contrast(1.2) saturate(1.3);
}

border-image

使用图片作为边框：

css

.fancy-border {
  border: 10px solid;
  border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1;
  border-image-slice: 1;
}

mask

遮罩效果，控制元素的可见区域：

css

.masked {
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* 图片遮罩 */
.image-mask {
  mask: url('mask.svg');
  mask-size: cover;
}

perspective

3D 透视效果：

css

.perspective-container {
  perspective: 1000px; /* 透视距离 */
}

.card {
  transform: rotateY(45deg);
  transform-style: preserve-3d; /* 保持3D效果 */
}

性能优化

will-change

提前通知浏览器元素将要改变的属性：

css

.animated {
  will-change: transform, opacity;
}

/* 注意：不要滥用，用完应该移除 */
.animated.done {
  will-change: auto;
}

touch-action: manipulation

优化移动端点击体验，去除 300ms 延迟：

css

button,
a,
.clickable {
  touch-action: manipulation; /* 禁用双击缩放 */
}

现代 CSS 属性

aspect-ratio

设置元素的宽高比：

css

.video-container {
  aspect-ratio: 16 / 9; /* 自动计算高度 */
  width: 100%;
}

.square {
  aspect-ratio: 1; /* 正方形 */
}

appearance

移除浏览器默认样式：

css

input,
button,
select {
  appearance: none; /* 移除原生样式 */
  -webkit-appearance: none;
}

currentColor

使用当前元素的 color 值：

css

.icon {
  color: #4ecdc4;
  border: 2px solid currentColor; /* 自动继承 color */
  background: currentColor; /* 可用于任何接受颜色的属性 */
}

盒模型与尺寸

box-sizing: border-box

元素的总宽高包含 padding 和 border：

css

* {
  box-sizing: border-box; /* 推荐全局设置 */
}

/* 标准盒模型：width = content */
/* border-box：width = content + padding + border */

百分比基准规则

百分比的计算基准：

属性	基准
`font-size`	父元素的 `font-size`
`line-height`	自身的 `font-size`
`width`, `height`	包含块的 `width`, `height`
`padding`, `margin`	包含块的 `width`（注意：上下也是 width）
`top`, `bottom`	包含块的 `height`
`left`, `right`	包含块的 `width`
`transform: translate()`	自身的宽高
`background-size`	背景定位区域

移动端适配

iOS 安全区域

适配刘海屏和底部安全区域：

css

.bottom-bar {
  /* 顺序不能变，env 在后面 */
  padding-bottom: calc(88px + constant(safe-area-inset-bottom));
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

/* 四个安全区域变量 */
.container {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

常见设备底部安全区域高度（逻辑像素）：

iPhone X/XS/11 Pro/12/12 Pro/13/13 Pro/14/14 Pro: 34px
iPhone XR/11/12 mini/13 mini: 15px
iPhone XS Max/11 Pro Max/12 Pro Max/13 Pro Max/14 Plus/14 Pro Max: 44px
iPhone 15 系列: 34px（标准版）/ 44px（Plus/Pro Max）

小程序导航栏高度

// 导航栏总高度 = 状态栏高度 + 胶囊高度
// 状态栏高度：wx.getSystemInfo() 获取（通常20px）
// 胶囊高度：固定 44px

const navHeight = statusBarHeight + 44;

实用技巧汇总

css

/* 1. 单行文本截断 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2. 多行文本截断 */
.ellipsis-multiline {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 3. 清除浮动 */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* 4. 垂直水平居中 */
.center {
  display: grid;
  place-items: center;
}

/* 5. 视口单位 */
.full-screen {
  height: 100vh; /* 视口高度 */
  height: 100dvh; /* 动态视口高度（2023+） */
  height: 100svh; /* 小视口高度 */
  height: 100lvh; /* 大视口高度 */
}

/* 6. 容器查询（2024+） */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

/* 7. 颜色混合（2024+） */
.color-mix {
  background: color-mix(in srgb, #ff6b6b 50%, #4ecdc4);
}

/* 8. 滚动捕捉 */
.scroll-container {
  scroll-snap-type: x mandatory;
}

.scroll-item {
  scroll-snap-align: center;
}

/* 9. 原生平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 10. 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

一些我容易混淆的 css 知识总结 ​

布局相关 ​

position: sticky 失效问题 ​

gap ​

place-items ​

双列布局 ​

margin-left: auto 实现右对齐 ​

文本与字体 ​

background-clip: text ​

text-stroke ​

white-space: pre-line ​

word-wrap: break-word ​

user-select ​

伪类与伪元素 ​

:empty ​

:invalid ​

:focus-within ​

:target ​

::selection ​

&:nth-child ​

视觉效果 ​

mix-blend-mode: difference ​

filter ​

border-image ​

mask ​

perspective ​

性能优化 ​

will-change ​

touch-action: manipulation ​

现代 CSS 属性 ​

aspect-ratio ​

appearance ​

currentColor ​

盒模型与尺寸 ​

box-sizing: border-box ​

百分比基准规则 ​

移动端适配 ​

iOS 安全区域 ​

小程序导航栏高度 ​

实用技巧汇总 ​