CSS 高级用法

本文档涵盖了 CSS 开发中的常用技巧、预处理器和实用代码片段。

命名规范

BEM 命名规范

BEM（Block Element Modifier）是一种 CSS 命名方法论，由 Yandex 团队提出。

基本结构

部分	说明	示例
Block（块）	独立的页面实体	`.form`、`.menu`、`.header`
Element（元素）	块的组成部分	`.form__input`、`.menu__item`
Modifier（修饰）	块或元素的外观状态	`.form--success`、`.menu__item--active`

命名规则

css

/* 块：独立实体 */
.card { }
.header { }
.navigation { }

/* 元素：块的组成部分（双下划线） */
.card__title { }
.card__content { }
.navigation__item { }

/* 修饰符：改变外观或行为（双连字符） */
.card--featured { }
.navigation__item--active { }

/* 组合使用 */
.card--featured .card__title { }
.navigation__item--active { }

使用示例

html

<!-- 基础卡片 -->
<div class="card">
  <h2 class="card__title">标题</h2>
  <p class="card__content">内容</p>
</div>

<!-- 带修饰符的卡片 -->
<div class="card card--featured">
  <h2 class="card__title">精选标题</h2>
  <p class="card__content">精选内容</p>
</div>

命名建议

块名：使用有意义的单词，保持简短
元素名：表示其在块中的用途，而非外观
修饰名：表示状态或变体，如 active、disabled、success

css

/* 推荐 */
.search-form { }
.search-form__input { }
.search-form__button { }
.search-form--disabled { }

/* 不推荐 */
.red-box { }              /* 颜色不应作为块名 */
.search-form__bigInput { } /* 不应表示外观 */

Sass/SCSS

项目 Mixin

Flex 布局

scss

// flex 布局
@mixin flex($alignItem: center, $justifyContent: flex-start, $direction: row) {
  display: flex;
  align-items: $alignItem;
  justify-content: $justifyContent;
  flex-direction: $direction;
}

// 使用示例
.container {
  @include flex(center, space-between);
}

文本省略

scss

// 单行或多行文本省略
@mixin ellipsis($num) {
  @if $num > 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $num;
  } @else if $num == 1 {
    overflow: hidden;
    white-space: nowrap !important;
    text-overflow: ellipsis;
  }
}

// 使用示例
.title {
  @include ellipsis(1);  // 单行省略
}

.description {
  @include ellipsis(3);  // 三行省略
}

图标样式

scss

// 图标样式
@mixin icon-style($size: 20px, $margin: unset) {
  width: $size !important;
  height: $size !important;
  margin: $margin !important;
}

// 使用示例
.icon-close {
  @include icon-style(16px, 0 8px);
}

绝对居中

scss

// 绝对定位居中
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 使用示例
.modal {
  @include absolute-center;
}

禁止换行

scss

// 禁止文字换行
@mixin text-nowrap {
  text-wrap: nowrap;
  white-space: nowrap;
  word-break: keep-all;
}

// 使用示例
.badge {
  @include text-nowrap;
}

自定义滚动条

scss

// 自定义滚动条样式
@mixin scroll-bar($width: 9px, $trackColor: #f8f8f8, $thumbColor: #dddddd, $thumbHoverColor: #bbb) {
  &::-webkit-scrollbar-track-piece {
    background-color: $trackColor;
  }

  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $thumbColor;
    background-clip: padding-box;
    min-height: 28px;
    border-radius: $width;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: $thumbHoverColor;
  }
}

// 使用示例
.custom-scroll {
  @include scroll-bar(8px, #f0f0f0, #ccc, #999);
}

常用 Sass 技巧

变量定义

scss

// 颜色变量
$primary-color: #409eff;
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$info-color: #909399;

// 间距变量
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;

// 字体大小
$font-size-xs: 12px;
$font-size-sm: 14px;
$font-size-base: 16px;
$font-size-lg: 18px;
$font-size-xl: 20px;

// 边框圆角
$border-radius-sm: 2px;
$border-radius-base: 4px;
$border-radius-lg: 8px;
$border-radius-circle: 50%;

条件判断

scss

// 根据条件生成不同样式
@mixin responsive($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 767px) { @content; }
  } @else if $breakpoint == tablet {
    @media (min-width: 768px) and (max-width: 1023px) { @content; }
  } @else if $breakpoint == desktop {
    @media (min-width: 1024px) { @content; }
  }
}

// 使用
.container {
  @include responsive(mobile) {
    font-size: 14px;
  }
  @include responsive(desktop) {
    font-size: 16px;
  }
}

循环生成

scss

// 生成间距工具类
@each $size in (xs, sm, md, lg, xl) {
  .m-#{$size} {
    margin: var(--spacing-#{$size});
  }
  .p-#{$size} {
    padding: var(--spacing-#{$size});
  }
}

// 生成颜色变体
@each $color-key, $color-value in (primary: #409eff, success: #67c23a) {
  .text-#{$color-key} {
    color: $color-value;
  }
  .bg-#{$color-key} {
    background-color: $color-value;
  }
}

继承与占位符

scss

// 使用 % 占位符（不会生成 CSS）
%button-base {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

// 继承基础样式
.button-primary {
  @extend %button-base;
  background-color: $primary-color;
  color: white;
}

.button-success {
  @extend %button-base;
  background-color: $success-color;
  color: white;
}

函数定义

scss

// 颜色变暗
@function darken($color, $percent) {
  @return mix(black, $color, $percent);
}

// 颜色变亮
@function lighten($color, $percent) {
  @return mix(white, $color, $percent);
}

// px 转 rem
@function px2rem($px, $base: 16) {
  @return ($px / $base) * 1rem;
}

// 使用
.container {
  width: px2rem(320);  // 20rem
  background: darken($primary-color, 10%);
}

模块化导入

scss

// _variables.scss
$colors: (...);

// _mixins.scss
@import 'variables';
@mixin button-style(...) { }

// _buttons.scss
@import 'mixins';
.button {
  @include button-style;
}

// main.scss
@import 'variables';
@import 'mixins';
@import 'buttons';

Less

基础 Mixin

Flex 布局

less

.flex(@justify: center; @align: center; @direction: row; @wrap: nowrap) {
  display: flex;
  flex-direction: @direction;
  justify-content: @justify;
  align-items: @align;
  flex-wrap: @wrap;
}

// 使用示例
.container {
  .flex(space-between, center);
}

文本省略

less

.ellipsis(@lines: 1) when (@lines = 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis(@lines: 2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @lines;
  -webkit-box-orient: vertical;
}

// 使用示例
.title {
  .ellipsis(1);
}

.description {
  .ellipsis(3);
}

居中对齐

less

.absolute-center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

清除浮动

less

.clearfix() {
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}

Less 特性

嵌套规则

less

.nav {
  width: 200px;

  &__item {
    padding: 10px;

    &--active {
      background: #409eff;
    }

    &:hover {
      background: #66b1ff;
    }
  }
}

变量与插值

less

@prefix: ui;

.@{prefix}-button {
  width: @@var-width;
}

@var-width: 100px;

Mixin 守卫

less

// 条件 mixin
.border-radius(@radius) when (@radius > 0) {
  border-radius: @radius;
}

// 多条件
.border-radius(@radius) when (@radius > 0), (@radius = 'circle') {
  // ...
}

// 使用判断
.button {
  .border-radius(4px);
}

循环

less

// 生成响应式断点
.loop(@counter) when (@counter > 0) {
  .col-@{counter} {
    width: percentage(@counter / 12);
  }
  .loop(@counter - 1);
}

.loop(12);

// 生成间距
.generate-spacing(@n, @i: 1) when (@i =< @n) {
  .m-@{i} { margin: (@i * 4px); }
  .p-@{i} { padding: (@i * 4px); }
  .generate-spacing(@n, (@i + 1));
}

.generate-spacing(5);

布局技巧

Flexbox 布局

基础居中

css

/* 水平垂直居中 */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 水平居中 */
.flex-center-x {
  display: flex;
  justify-content: center;
}

/* 垂直居中 */
.flex-center-y {
  display: flex;
  align-items: center;
}

两端对齐

css

/* 两端对齐 */
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 等间距分布 */
.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

自适应宽度

css

/* 自适应容器 */
.flex-auto {
  display: flex;
}

.flex-auto > *:first-child {
  flex: 1;  /* 占据剩余空间 */
  min-width: 0;
}

/* 固定 + 自适应 */
.flex-fixed-auto {
  display: flex;
}

.flex-fixed-auto .fixed {
  width: 200px;
  flex-shrink: 0;
}

.flex-fixed-auto .auto {
  flex: 1;
  min-width: 0;
}

Grid 布局

css

/* 基础网格 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* 响应式网格 */
.grid-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

/* 指定区域布局 */
.grid-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

居中定位

css

/* 绝对定位居中 */
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 固定定位居中 */
.fixed-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Flex 居中 */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid 居中 */
.grid-center {
  display: grid;
  place-items: center;
}

/* Margin 自动居中 */
.margin-center {
  margin: auto;
  width: fit-content;
}

多列布局

css

/* 左固定右自适应 */
.left-fixed-right-auto {
  display: flex;
}

.left-fixed {
  width: 200px;
  flex-shrink: 0;
}

.right-auto {
  flex: 1;
  min-width: 0;
}

/* 或使用 Grid */
.left-fixed-right-auto-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
}

圣杯布局

css

.holy-grail {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  min-height: 100vh;
  gap: 16px;
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

文字处理

文本省略

css

/* 单行省略 */
.ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

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

.ellipsis-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

文字对齐

css

/* 文字左右对齐（两端对齐） */
.text-justify {
  text-align-last: justify;
  text-align: justify;
}

/* 文字居中 */
.text-center {
  text-align: center;
}

/* 文字右对齐 */
.text-right {
  text-align: right;
}

文字换行

css

/* 允许换行 */
.text-wrap {
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* 禁止换行 */
.text-nowrap {
  text-wrap: nowrap;
  white-space: nowrap;
  word-break: keep-all;
}

/* 强制换行 */
.text-break {
  word-break: break-all;
}

文字选中

css

/* 禁止选中 */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 允许选中 */
.select-all {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

/* 选中文本样式 */
::selection {
  background: #409eff;
  color: white;
}

::-moz-selection {
  background: #409eff;
  color: white;
}

文字阴影

css

/* 基础文字阴影 */
.text-shadow {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 多层文字阴影 */
.text-shadow-glow {
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;
}

视觉效果

渐变背景

css

/* 线性渐变 */
.gradient-linear {
  background: linear-gradient(90deg, #409eff, #67c23a);
}

/* 对角渐变 */
.gradient-diagonal {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 径向渐变 */
.gradient-radial {
  background: radial-gradient(circle, #409eff, #667eea);
}

/* 多色渐变 */
.gradient-multi {
  background: linear-gradient(
    90deg,
    #409eff 0%,
    #67c23a 25%,
    #e6a23c 50%,
    #f56c6c 75%,
    #909399 100%
  );
}

阴影效果

css

/* 卡片阴影 */
.box-shadow-sm {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.box-shadow-md {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.box-shadow-lg {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 内阴影 */
.box-shadow-inset {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 内边框 */
.border-inset {
  box-shadow: inset 0 0 0 1px #7472fa;
}

/* 多层阴影 */
.box-shadow-layered {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.1),
    0 2px 2px rgba(0, 0, 0, 0.1),
    0 4px 4px rgba(0, 0, 0, 0.1),
    0 8px 8px rgba(0, 0, 0, 0.1);
}

模糊效果

css

/* 背景模糊 */
.backdrop-blur {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.5);
}

/* 图片模糊 */
.blur {
  filter: blur(5px);
}

/* 悬停清晰 */
.blur-to-clear {
  filter: blur(5px);
  transition: filter 0.3s;
}

.blur-to-clear:hover {
  filter: blur(0);
}

透明度

css

/* 元素透明 */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* 背景透明（不影响子元素） */
.bg-transparent {
  background-color: rgba(255, 255, 255, 0.5);
}

/* 使用 rgba 透明背景 */
.bg-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

圆角

css

/* 基础圆角 */
.rounded-sm { border-radius: 2px; }
.rounded { border-radius: 4px; }
.rounded-lg { border-radius: 8px; }
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-full { border-radius: 50%; }

/* 定向圆角 */
.rounded-t {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.rounded-r {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.rounded-b {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.rounded-l {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

边框

css

/* 基础边框 */
.border {
  border: 1px solid #e4e7ed;
}

.border-2 {
  border: 2px solid #e4e7ed;
}

/* 定向边框 */
.border-t { border-top: 1px solid #e4e7ed; }
.border-r { border-right: 1px solid #e4e7ed; }
.border-b { border-bottom: 1px solid #e4e7ed; }
.border-l { border-left: 1px solid #e4e7ed; }

/* 虚线边框 */
.border-dashed {
  border: 1px dashed #e4e7ed;
}

/* 圆角边框 */
.border-circle {
  border: 1px solid #e4e7ed;
  border-radius: 50%;
}

背景图片

css

/* 基础背景图 */
.bg-image {
  background-image: url('@/assets/images/bg.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
}

/* 背景图居中 */
.bg-center {
  background-image: url('@/assets/images/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 多重背景 */
.bg-multiple {
  background:
    url('@/assets/images/bg1.png') no-repeat top left,
    url('@/assets/images/bg2.png') no-repeat bottom right;
}

/* 固定背景 */
.bg-fixed {
  background-attachment: fixed;
  background-image: url('@/assets/images/bg.png');
  background-size: cover;
}

本地字体

css

/* 使用字体工具压缩：https://www.fontspider.vip/ */
@font-face {
  font-family: 'MyFont';
  src:
    url('@/assets/fonts/MyFont-Regular.woff2') format('woff2'),
    url('@/assets/fonts/MyFont-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 使用字体 */
.title {
  font-family: 'MyFont', 'PingFangSC-Regular', 'Microsoft YaHei', sans-serif;
}

动画过渡

过渡效果

css

/* 基础过渡 */
.transition {
  transition: all 0.3s ease;
}

/* 指定属性过渡 */
.transition-colors {
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.transition-transform {
  transition: transform 0.3s ease;
}

/* 过渡缓动函数 */
.ease-linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }

悬停效果

css

/* 悬停上浮 */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* 悬停放大 */
.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* 悬停变暗 */
.hover-darken {
  transition: filter 0.3s ease;
}

.hover-darken:hover {
  filter: brightness(0.8);
}

关键帧动画

css

/* 淡入 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

/* 滑入 */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in-up {
  animation: slideInUp 0.3s ease-out;
}

/* 旋转 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

/* 脉冲 */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 弹跳 */
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.bounce {
  animation: bounce 1s infinite;
}

加载动画

css

/* 旋转加载 */
@keyframes spinner {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(64, 158, 255, 0.3);
  border-top-color: #409eff;
  border-radius: 50%;
  animation: spinner 0.6s linear infinite;
}

/* 点状加载 */
@keyframes dots {
  0%, 20% { color: rgba(0, 0, 0, 0); text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0); }
  40% { color: #409eff; text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0); }
  60% { text-shadow: .25em 0 0 #409eff, .5em 0 0 rgba(0, 0, 0, 0); }
  80%, 100% { text-shadow: .25em 0 0 #409eff, .5em 0 0 #409eff; }
}

.loading-dots::after {
  content: ' .';
  animation: dots 1.5s steps(5, end) infinite;
}

/* 进度条 */
@keyframes progress {
  0% { width: 0; }
  100% { width: 100%; }
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: #e4e7ed;
  overflow: hidden;
}

.progress-bar::after {
  content: '';
  display: block;
  height: 100%;
  background: #409eff;
  animation: progress 2s ease-in-out infinite;
}

实用技巧

清除默认样式

css

/* 清除列表样式 */
.list-unstyled {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* 清除图片默认间距 */
.img-block {
  display: block;
}

/* 清除链接下划线 */
.link-none {
  text-decoration: none;
  color: inherit;
}

点击穿透与禁用

css

/* 点击穿透（允许点击下层元素） */
.pointer-events-none {
  pointer-events: none;
}

/* 点击穿透（穿透后恢复点击） */
.pointer-events-auto {
  pointer-events: auto;
}

/* 禁用交互 */
.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

隐藏与显示

css

/* 完全隐藏（不占空间） */
.hidden {
  display: none !important;
}

/* 视觉隐藏（占空间但不可见） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* 溢出隐藏 */
.overflow-hidden {
  overflow: hidden;
}

/* 滚动 */
.overflow-auto {
  overflow: auto;
}

.overflow-scroll {
  overflow: scroll;
}

移动端优化

css

/* 禁止图片拖动/缩放 */
img {
  user-select: none;
  -webkit-user-drag: none;
  touch-action: manipulation;
}

/* 禁止长按选中文本 */
.no-long-press {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 禁止高亮 */
.no-highlight {
  -webkit-tap-highlight-color: transparent;
}

/* 安全区域适配（刘海屏） */
.safe-area-inset-bottom {
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom);
}

.safe-area-inset-top {
  padding-top: env(safe-area-inset-top);
  padding-top: constant(safe-area-inset-top);
}

响应式工具类

css

/* 响应式显示 */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}

@media (min-width: 768px) {
  .hide-tablet { display: none !important; }
  .show-tablet { display: block !important; }
}

@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; }
}

/* 响应式宽度 */
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }

/* 响应式间距 */
@media (max-width: 767px) {
  .p-sm { padding: 8px; }
  .m-sm { margin: 8px; }
}

@media (min-width: 768px) {
  .p-md { padding: 16px; }
  .m-md { margin: 16px; }
}

滚动条样式

css

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

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 隐藏滚动条但保留功能 */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

打印样式

css

@media print {
  /* 隐藏不需要打印的元素 */
  .no-print {
    display: none !important;
  }

  /* 设置打印背景 */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 避免分页断行 */
  h1, h2, h3 {
    page-break-after: avoid;
  }

  img, table {
    page-break-inside: avoid;
  }

  /* 设置页边距 */
  @page {
    margin: 2cm;
  }
}

硬件加速

css

/* 启用 GPU 加速 */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* 平滑滚动 */
.smooth-scroll {
  scroll-behavior: smooth;
}

/* 减少重绘 */
.reduce-repaint {
  contain: layout style paint;
}

状态样式

css

/* 成功状态 */
.state-success {
  color: #67c23a;
  background: #f0f9ff;
  border-color: #67c23a;
}

/* 警告状态 */
.state-warning {
  color: #e6a23c;
  background: #fdf6ec;
  border-color: #e6a23c;
}

/* 危险状态 */
.state-danger {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #f56c6c;
}

/* 信息状态 */
.state-info {
  color: #909399;
  background: #f4f4f5;
  border-color: #909399;
}

总结

本文档涵盖了 CSS 开发中的核心技巧和实用代码片段。建议在实际项目中：

使用预处理器：Sass/Less 可以提高开发效率，实现变量、混合、继承等功能
遵循命名规范：BEM 规范有助于构建可维护的 CSS 代码
合理使用 Flex/Grid：现代布局首选方案，避免传统浮动布局
关注性能：使用硬件加速、避免过度重绘
考虑响应式：使用媒体查询和相对单位实现适配

CSS 高级用法 ​

命名规范 ​

BEM 命名规范 ​

基本结构 ​

命名规则 ​

使用示例 ​

命名建议 ​

Sass/SCSS ​

项目 Mixin ​

Flex 布局 ​

文本省略 ​

图标样式 ​

绝对居中 ​

禁止换行 ​

自定义滚动条 ​

常用 Sass 技巧 ​

变量定义 ​

条件判断 ​

循环生成 ​

继承与占位符 ​

函数定义 ​

模块化导入 ​

Less ​

基础 Mixin ​

Flex 布局 ​

文本省略 ​

居中对齐 ​

清除浮动 ​

Less 特性 ​

嵌套规则 ​

变量与插值 ​

Mixin 守卫 ​

循环 ​

布局技巧 ​

Flexbox 布局 ​

基础居中 ​

两端对齐 ​

自适应宽度 ​

Grid 布局 ​

居中定位 ​

多列布局 ​

圣杯布局 ​

文字处理 ​

文本省略 ​

文字对齐 ​

文字换行 ​

文字选中 ​

文字阴影 ​

视觉效果 ​

渐变背景 ​

阴影效果 ​

模糊效果 ​

透明度 ​

圆角 ​

边框 ​

背景图片 ​

本地字体 ​

动画过渡 ​

过渡效果 ​

悬停效果 ​

关键帧动画 ​

加载动画 ​

实用技巧 ​

清除默认样式 ​

点击穿透与禁用 ​

隐藏与显示 ​

移动端优化 ​

响应式工具类 ​

滚动条样式 ​

打印样式 ​

硬件加速 ​

状态样式 ​

总结 ​

CSS 高级用法

命名规范

BEM 命名规范

基本结构

命名规则

使用示例

命名建议

Sass/SCSS

项目 Mixin

Flex 布局

文本省略

图标样式

绝对居中

禁止换行

自定义滚动条

常用 Sass 技巧

变量定义

条件判断

循环生成

继承与占位符

函数定义

模块化导入

Less

基础 Mixin

Flex 布局

文本省略

居中对齐

清除浮动

Less 特性

嵌套规则

变量与插值

Mixin 守卫

循环

布局技巧

Flexbox 布局

基础居中

两端对齐

自适应宽度

Grid 布局

居中定位

多列布局

圣杯布局

文字处理

文本省略

文字对齐

文字换行

文字选中

文字阴影

视觉效果

渐变背景

阴影效果

模糊效果

透明度

圆角

边框

背景图片

本地字体

动画过渡

过渡效果

悬停效果

关键帧动画

加载动画

实用技巧

清除默认样式

点击穿透与禁用

隐藏与显示

移动端优化

响应式工具类

滚动条样式

打印样式

硬件加速

状态样式

总结