CSS 速查表 #

/* 元素选择器 */
div { }

/* 类选择器 */
.className { }

/* ID 选择器 */
#idName { }

/* 通用选择器 */
* { }

/* 属性选择器 */
input[type="text"] { }
a[href^="https://"] { }
img[alt$=".jpg"] { }

/* 后代选择器 */
.parent .child { }

/* 子选择器 */
.parent > .child { }

/* 相邻兄弟选择器 */
.element + .sibling { }

/* 通用兄弟选择器 */
.element ~ .sibling { }

/* 状态伪类 */
:hover { }
:focus { }
:active { }
:visited { }

/* 结构伪类 */
:first-child { }
:last-child { }
:nth-child(2n+1) { }
:nth-of-type(2) { }
:only-child { }

/* 否定伪类 */
:not(.className) { }

/* 伪元素 */
::before { }
::after { }
::first-line { }
::first-letter { }
::selection { }

.box-model {
  width: 200px;
  height: 100px;
  padding: 10px 15px 10px 15px; /* 上 右 下 左 */
  padding: 10px 15px; /* 上下 左右 */
  border: 2px solid #ccc;
  margin: 20px;
  
  /* 盒模型类型 */
  box-sizing: content-box; /* 标准盒模型 */
  box-sizing: border-box; /* IE 盒模型 */
}

.padding-examples {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
}

.margin-examples {
  margin: 20px auto; /* 垂直居中，水平居中 */
  margin: 10px 15px 20px 25px; /* 顺时针：上右下左 */
}

.flex-container {
  display: flex;
  flex-direction: row; /* row | column | row-reverse | column-reverse */
  justify-content: flex-start; /* flex-start | center | flex-end | space-between | space-around | space-evenly */
  align-items: stretch; /* stretch | flex-start | center | flex-end | baseline */
  flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
  align-content: stretch; /* 多行时的对齐方式 */
}

.flex-item {
  flex: 1; /* flex-grow flex-shrink flex-basis */
  flex: 0 0 auto; /* 不伸缩 */
  order: 0; /* 排序 */
  align-self: auto; /* 自定义对齐 */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 比例 */
  grid-template-columns: repeat(3, 1fr); /* 重复 */
  grid-template-columns: 100px 1fr 2fr; /* 固定 + 弹性 */
  grid-template-rows: auto 1fr auto;
  grid-gap: 20px;
  grid-gap: 10px 20px; /* row-gap column-gap */
}

.grid-item {
  grid-column: 1 / 3; /* 跨越列 */
  grid-column: span 2; /* 跨越2列 */
  grid-row: 1 / 3; /* 跨越行 */
  grid-area: row-start / col-start / row-end / col-end;
}

.positioning {
  position: static; /* 默认 */
  position: relative; /* 相对定位 */
  position: absolute; /* 绝对定位 */
  position: fixed; /* 固定定位 */
  position: sticky; /* 粘性定位 */
  
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  z-index: 1;
}

.font-properties {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: normal; /* normal | bold | 100-900 */
  font-style: normal; /* normal | italic | oblique */
  font-variant: normal; /* normal | small-caps */
  font: bold 16px/1.4 Arial, sans-serif; /* 简写 */
}

.text-properties {
  color: #333;
  text-align: left; /* left | center | right | justify */
  text-decoration: none; /* underline | overline | line-through */
  text-transform: none; /* uppercase | lowercase | capitalize */
  text-indent: 2em;
  letter-spacing: normal; /* 字母间距 */
  word-spacing: normal; /* 单词间距 */
  line-height: 1.5; /* 行高 */
  white-space: normal; /* normal | nowrap | pre | pre-wrap | pre-line */
  word-wrap: normal; /* normal | break-word */
  word-break: normal; /* normal | break-all | keep-all */
}

.background-properties {
  background-color: #fff;
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; /* cover | contain | 100px 200px */
  background-attachment: scroll; /* scroll | fixed | local */
  background: #fff url('bg.jpg') no-repeat center center / cover fixed;
}

.border-properties {
  border-width: 1px;
  border-style: solid; /* solid | dotted | dashed | double | groove | ridge | inset | outset */
  border-color: #ccc;
  border: 1px solid #ccc; /* 简写 */
  border-radius: 5px;
  
  /* 单边边框 */
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.color-examples {
  /* 颜色关键字 */
  color: red;
  
  /* 十六进制 */
  color: #ff0000;
  color: #f00; /* 简写 */
  
  /* RGB */
  color: rgb(255, 0, 0);
  color: rgba(255, 0, 0, 0.5); /* 带透明度 */
  
  /* HSL */
  color: hsl(0, 100%, 50%);
  color: hsla(0, 100%, 50%, 0.5); /* 带透明度 */
}

.gradient-examples {
  /* 线性渐变 */
  background: linear-gradient(to right, #ff0000, #0000ff);
  background: linear-gradient(45deg, red 0%, yellow 50%, blue 100%);
  
  /* 径向渐变 */
  background: radial-gradient(circle, #ff0000, #0000ff);
  background: radial-gradient(ellipse at center, red, blue);
  
  /* 重复渐变 */
  background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);
}

.transform-examples {
  /* 2D 变换 */
  transform: translate(10px, 20px);
  transform: rotate(45deg);
  transform: scale(1.5);
  transform: skew(30deg, 20deg);
  
  /* 3D 变换 */
  transform: translate3d(10px, 20px, 30px);
  transform: rotateX(45deg);
  transform: rotateY(45deg);
  transform: rotateZ(45deg);
  transform: scale3d(1.5, 1.2, 1.0);
  
  /* 变换原点 */
  transform-origin: center center;
  
  /* 多重变换 */
  transform: translate(10px, 20px) rotate(45deg) scale(1.2);
}

.transition-examples {
  /* 过渡属性 */
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0.1s;
  
  /* 简写 */
  transition: background-color 0.3s ease 0.1s;
  transition: all 0.3s ease-in-out;
  transition: width 0.3s ease, height 0.5s ease;
}

.animation-examples {
  /* 动画属性 */
  animation-name: slideIn;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite; /* infinite | number */
  animation-direction: normal; /* normal | reverse | alternate | alternate-reverse */
  animation-fill-mode: forwards; /* none | forwards | backwards | both */
  animation-play-state: running; /* running | paused */
  
  /* 简写 */
  animation: slideIn 2s ease-in-out 0.5s infinite alternate both;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 基本语法 */
@media screen and (max-width: 768px) {
  .element { }
}

/* 常用断点 */
/* 移动设备 */
@media (max-width: 767px) { }

/* 平板设备 */
@media (min-width: 768px) and (max-width: 1023px) { }

/* 桌面设备 */
@media (min-width: 1024px) { }

/* 设备方向 */
@media (orientation: landscape) { }
@media (orientation: portrait) { }

/* 高分辨率屏幕 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { }

.viewport-units {
  width: 100vw; /* 视口宽度 */
  height: 100vh; /* 视口高度 */
  font-size: 4vw; /* 相对于视口宽度 */
}

:root {
  --primary-color: #007bff;
  --spacing-unit: 1rem;
  --font-size-base: 16px;
}

.custom-properties {
  color: var(--primary-color);
  margin: calc(var(--spacing-unit) * 2);
  font-size: var(--font-size-base);
}

.css-functions {
  /* calc() */
  width: calc(100% - 20px);
  
  /* min() 和 max() */
  font-size: min(4vw, 24px);
  width: max(300px, 50%);
  
  /* clamp() */
  font-size: clamp(1rem, 2.5vw, 2rem);
  
  /* attr() */
  .element::before {
    content: attr(data-count);
  }
}

/* 水平垂直居中 */
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

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

/* 两栏布局 */
.layout-two-column {
  display: flex;
}
.sidebar {
  flex: 0 0 200px; /* 固定宽度 */
}
.main-content {
  flex: 1; /* 剩余空间 */
}

/* 三栏等宽布局 */
.three-equal-columns {
  display: flex;
}
.three-equal-columns > * {
  flex: 1; /* 等分剩余空间 */
}

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

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

/* 防止文字被选中 */
.unselectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 高性能动画 */
.smooth-animation {
  transform: translateZ(0); /* 启用硬件加速 */
  will-change: transform; /* 提示浏览器优化 */
}

/* 避免重排重绘 */
.high-performance {
  /* 使用 transform 和 opacity */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 低性能属性（避免在动画中使用） */
.avoid-in-animation {
  /* width, height, margin, padding, top, left 等 */
}

.prefix-examples {
  /* 渐变 */
  background: -webkit-linear-gradient(top, #fff, #000);
  background: -moz-linear-gradient(top, #fff, #000);
  background: -o-linear-gradient(top, #fff, #000);
  background: linear-gradient(to bottom, #fff, #000);
  
  /* 动画 */
  -webkit-animation: slideIn 1s ease;
  -moz-animation: slideIn 1s ease;
  -o-animation: slideIn 1s ease;
  animation: slideIn 1s ease;
  
  /* Flexbox */
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

/* 焦点样式 */
.focusable:focus {
  outline: 2px solid #007cba;
  outline-offset: 2px;
}

/* 尊重用户偏好 */
@media (prefers-reduced-motion: reduce) {
  .animation {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #ffffff;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .element {
    border: 2px solid;
  }
}

/* 可视化布局 */
.debug-layout * {
  outline: 1px solid red;
  outline-offset: -1px;
}

/* 检查盒模型 */
.debug-box-model {
  box-shadow: inset 0 0 0 1px red; /* border box */
  outline: 1px solid blue; /* margin area */
}