前端-CSS基础知识CSS（层叠样式表）是 Web 核心语言，用于控制 HTML/XML 文档的外观与布局，核心价值是分

CSS 基础知识

一、CSS 概述

1.1 什么是 CSS

CSS（Cascading Style Sheets，层叠样式表）用于描述 HTML 元素的样式，控制网页的外观和布局。

核心特点：

分离内容和样式
层叠和继承机制
丰富的样式控制
响应式设计支持

1.2 CSS 版本

版本	说明
CSS1	1996 年发布
CSS2	1998 年发布
CSS3	模块化，持续更新
CSS4	部分特性已实现

二、CSS 引入方式

2.1 内联样式

<p style="color: red; font-size: 16px;">红色文本</p>

2.2 内部样式表

<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>

2.3 外部样式表

<head>
  <link rel="stylesheet" href="style.css">
</head>

/* style.css */
p {
  color: red;
  font-size: 16px;
}

2.4 @import 导入

@import url('reset.css');
@import url('layout.css');

三、选择器

3.1 基础选择器

/* 元素选择器 */
p {
  color: red;
}

/* ID 选择器 */
#header {
  background: blue;
}

/* 类选择器 */
.container {
  width: 1200px;
}

/* 通配符选择器 */
* {
  margin: 0;
  padding: 0;
}

3.2 组合选择器

/* 后代选择器 */
div p {
  color: red;
}

/* 子元素选择器 */
div > p {
  color: red;
}

/* 相邻兄弟选择器 */
h1 + p {
  margin-top: 0;
}

/* 通用兄弟选择器 */
h1 ~ p {
  color: blue;
}

3.3 属性选择器

/* 有该属性 */
[title] {
  color: red;
}

/* 属性值等于 */
[type="text"] {
  border: 1px solid #ccc;
}

/* 属性值包含 */
[class*="btn"] {
  padding: 10px;
}

/* 属性值以...开始 */
[href^="https"] {
  color: green;
}

/* 属性值以...结束 */
[src$=".jpg"] {
  border: 1px solid #ccc;
}

3.4 伪类选择器

/* 链接状态 */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }

/* 表单状态 */
input:focus { border-color: blue; }
input:disabled { opacity: 0.5; }
input:checked { background: green; }

/* 结构伪类 */
li:first-child { color: red; }
li:last-child { color: blue; }
li:nth-child(2) { color: green; }
li:nth-child(odd) { background: #f0f0f0; }
li:nth-child(even) { background: #fff; }
li:nth-child(3n) { color: red; }

/* 其他伪类 */
p:empty { display: none; }
p:not(.special) { color: gray; }

3.5 伪元素选择器

/* 首字母 */
p::first-letter {
  font-size: 2em;
  color: red;
}

/* 首行 */
p::first-line {
  font-weight: bold;
}

/* 之前 */
p::before {
  content: "「";
}

/* 之后 */
p::after {
  content: "」";
}

/* 选中文本 */
::selection {
  background: yellow;
  color: black;
}

3.6 选择器优先级

优先级规则：

内联样式 (1000) > ID (100) > 类/属性/伪类 (10) > 元素/伪元素 (1)

计算示例：

/* 优先级：0-1-1-1 = 13 */
div.container p { }

/* 优先级：0-0-2-0 = 20 */
.btn.active { }

/* 优先级：0-1-0-0 = 100 */
#header { }

/* 优先级：1-0-0-0 = 1000 */
<div style="color: red;">

!important：

p {
  color: red !important; /* 最高优先级 */
}

四、盒模型

4.1 标准盒模型

┌─────────────────────────┐
│      margin (外边距)      │
│  ┌───────────────────┐   │
│  │    border (边框)   │   │
│  │  ┌─────────────┐   │   │
│  │  │  padding    │   │   │
│  │  │ (内边距)     │   │   │
│  │  │  ┌───────┐  │   │   │
│  │  │  │content│  │   │   │
│  │  │  │(内容) │  │   │   │
│  │  │  └───────┘  │   │   │
│  │  └─────────────┘   │   │
│  └───────────────────┘   │
└─────────────────────────┘

盒模型属性：

.box {
  width: 200px;        /* 内容宽度 */
  height: 100px;        /* 内容高度 */
  padding: 20px;        /* 内边距 */
  border: 2px solid;    /* 边框 */
  margin: 10px;         /* 外边距 */
}

4.2 盒模型计算

标准盒模型（content-box）：

总宽度 = width + padding + border + margin

IE 盒模型（border-box）：

.box {
  box-sizing: border-box;
  width: 200px;  /* 包含 padding 和 border */
}

4.3 外边距合并

/* 垂直方向的外边距会合并 */
.box1 {
  margin-bottom: 20px;
}
.box2 {
  margin-top: 30px;
}
/* 实际间距：30px（取较大值） */

五、布局

5.1 定位（Position）

/* 静态定位（默认） */
.static {
  position: static;
}

/* 相对定位 */
.relative {
  position: relative;
  top: 20px;
  left: 30px;
}

/* 绝对定位 */
.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

/* 固定定位 */
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* 粘性定位 */
.sticky {
  position: sticky;
  top: 0;
}

5.2 浮动（Float）

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

5.3 Flexbox 布局

容器属性：

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

项目属性：

.item {
  /* 放大比例 */
  flex-grow: 0;              /* 默认 0 */
  
  /* 缩小比例 */
  flex-shrink: 1;            /* 默认 1 */
  
  /* 基础大小 */
  flex-basis: auto;          /* 默认 auto */
  
  /* 简写 */
  flex: 1;                   /* flex-grow flex-shrink flex-basis */
  
  /* 自身对齐 */
  align-self: auto;          /* auto | flex-start | flex-end | center | baseline | stretch */
  
  /* 顺序 */
  order: 0;                  /* 默认 0 */
}

常用布局示例：

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

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

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

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

/* 等分布局 */
.item {
  flex: 1;
}

5.4 Grid 布局

容器属性：

.container {
  display: grid;
  
  /* 定义列 */
  grid-template-columns: 200px 200px 200px;
  grid-template-columns: repeat(3, 200px);
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  
  /* 定义行 */
  grid-template-rows: 100px 200px;
  
  /* 行间距 */
  row-gap: 20px;
  
  /* 列间距 */
  column-gap: 20px;
  
  /* 简写 */
  gap: 20px;
  
  /* 区域命名 */
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

项目属性：

.item {
  /* 列起始/结束 */
  grid-column-start: 1;
  grid-column-end: 3;
  grid-column: 1 / 3;
  
  /* 行起始/结束 */
  grid-row-start: 1;
  grid-row-end: 2;
  grid-row: 1 / 2;
  
  /* 区域 */
  grid-area: header;
}

常用布局示例：

/* 12 列网格 */
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }

六、文本样式

6.1 字体

.text {
  /* 字体族 */
  font-family: "Microsoft YaHei", Arial, sans-serif;
  
  /* 字体大小 */
  font-size: 16px;
  font-size: 1em;
  font-size: 1rem;
  
  /* 字体粗细 */
  font-weight: normal;    /* normal | bold | 100-900 */
  
  /* 字体样式 */
  font-style: normal;     /* normal | italic | oblique */
  
  /* 简写 */
  font: italic bold 16px/1.5 "Microsoft YaHei", sans-serif;
}

6.2 文本

.text {
  /* 颜色 */
  color: #333;
  color: rgb(51, 51, 51);
  color: rgba(51, 51, 51, 0.8);
  
  /* 对齐 */
  text-align: left;       /* left | right | center | justify */
  
  /* 装饰 */
  text-decoration: none;  /* none | underline | overline | line-through */
  
  /* 转换 */
  text-transform: none;   /* none | uppercase | lowercase | capitalize */
  
  /* 缩进 */
  text-indent: 2em;
  
  /* 行高 */
  line-height: 1.5;
  
  /* 字间距 */
  letter-spacing: 1px;
  
  /* 词间距 */
  word-spacing: 2px;
  
  /* 换行 */
  white-space: normal;    /* normal | nowrap | pre | pre-wrap */
  
  /* 溢出处理 */
  overflow: hidden;
  text-overflow: ellipsis;
}

6.3 文本溢出

/* 单行溢出 */
.single-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多行溢出（WebKit） */
.multi-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

七、背景

7.1 背景属性

.element {
  /* 背景颜色 */
  background-color: #fff;
  
  /* 背景图片 */
  background-image: url('image.jpg');
  
  /* 背景重复 */
  background-repeat: no-repeat;  /* repeat | no-repeat | repeat-x | repeat-y */
  
  /* 背景位置 */
  background-position: center;   /* top | bottom | left | right | center | 百分比 | 像素 */
  background-position: 50% 50%;
  
  /* 背景大小 */
  background-size: cover;        /* cover | contain | 百分比 | 像素 */
  background-size: 100% 100%;
  
  /* 背景附着 */
  background-attachment: scroll; /* scroll | fixed | local */
  
  /* 简写 */
  background: #fff url('image.jpg') no-repeat center/cover;
}

7.2 渐变

/* 线性渐变 */
.linear {
  background: linear-gradient(to right, #ff0000, #0000ff);
  background: linear-gradient(45deg, #ff0000, #0000ff);
  background: linear-gradient(to right, #ff0000, #00ff00 50%, #0000ff);
}

/* 径向渐变 */
.radial {
  background: radial-gradient(circle, #ff0000, #0000ff);
  background: radial-gradient(circle at center, #ff0000, #0000ff);
}

八、边框和圆角

8.1 边框

.element {
  /* 边框宽度 */
  border-width: 1px;
  
  /* 边框样式 */
  border-style: solid;    /* solid | dashed | dotted | double | none */
  
  /* 边框颜色 */
  border-color: #ccc;
  
  /* 简写 */
  border: 1px solid #ccc;
  
  /* 单边 */
  border-top: 1px solid #ccc;
  border-right: 2px dashed #999;
  border-bottom: 3px dotted #666;
  border-left: 4px double #333;
}

8.2 圆角

.element {
  /* 四个角 */
  border-radius: 10px;
  
  /* 分别设置 */
  border-radius: 10px 20px 30px 40px;
  
  /* 椭圆 */
  border-radius: 50%;  /* 圆形 */
  border-radius: 10px / 20px;  /* 椭圆 */
}

8.3 阴影

.element {
  /* 盒子阴影 */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  /* x偏移 y偏移 模糊半径 扩散半径 颜色 */
  
  /* 内阴影 */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
  
  /* 多阴影 */
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1);
  
  /* 文字阴影 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

九、显示和可见性

9.1 display

.element {
  /* 块级元素 */
  display: block;
  
  /* 行内元素 */
  display: inline;
  
  /* 行内块 */
  display: inline-block;
  
  /* Flex */
  display: flex;
  
  /* Grid */
  display: grid;
  
  /* 隐藏（不占位） */
  display: none;
}

9.2 visibility

.element {
  /* 可见 */
  visibility: visible;
  
  /* 隐藏（占位） */
  visibility: hidden;
}

9.3 opacity

.element {
  /* 透明度 0-1 */
  opacity: 0.5;
}

十、动画和过渡

10.1 transition（过渡）

.element {
  /* 属性 */
  transition-property: all;
  transition-property: width, height;
  
  /* 持续时间 */
  transition-duration: 0.3s;
  
  /* 时间函数 */
  transition-timing-function: ease;  /* ease | linear | ease-in | ease-out | ease-in-out */
  
  /* 延迟 */
  transition-delay: 0.1s;
  
  /* 简写 */
  transition: all 0.3s ease;
  transition: width 0.3s, height 0.3s;
}

.element:hover {
  width: 200px;
  height: 200px;
}

10.2 animation（动画）

/* 定义动画 */
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/* 使用动画 */
.element {
  /* 动画名称 */
  animation-name: slide;
  
  /* 持续时间 */
  animation-duration: 1s;
  
  /* 时间函数 */
  animation-timing-function: ease;
  
  /* 延迟 */
  animation-delay: 0s;
  
  /* 播放次数 */
  animation-iteration-count: infinite;  /* 数字 | infinite */
  
  /* 播放方向 */
  animation-direction: normal;  /* normal | reverse | alternate | alternate-reverse */
  
  /* 填充模式 */
  animation-fill-mode: forwards;  /* none | forwards | backwards | both */
  
  /* 播放状态 */
  animation-play-state: running;  /* running | paused */
  
  /* 简写 */
  animation: slide 1s ease infinite;
}

十一、变换（Transform）

11.1 2D 变换

.element {
  /* 位移 */
  transform: translate(50px, 100px);
  transform: translateX(50px);
  transform: translateY(100px);
  
  /* 旋转 */
  transform: rotate(45deg);
  
  /* 缩放 */
  transform: scale(1.5);
  transform: scaleX(1.5);
  transform: scaleY(1.5);
  
  /* 倾斜 */
  transform: skew(10deg, 20deg);
  transform: skewX(10deg);
  transform: skewY(20deg);
  
  /* 组合 */
  transform: translate(50px) rotate(45deg) scale(1.2);
  
  /* 变换原点 */
  transform-origin: center;  /* center | top | bottom | left | right | 百分比 | 像素 */
}

11.2 3D 变换

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

.element {
  transform-style: preserve-3d;
  transform: rotateX(45deg);
  transform: rotateY(45deg);
  transform: rotateZ(45deg);
  transform: translateZ(50px);
}

十二、响应式设计

12.1 媒体查询

/* 基本语法 */
@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

/* 多个条件 */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    width: 750px;
  }
}

/* 设备方向 */
@media (orientation: landscape) {
  .container {
    flex-direction: row;
  }
}

/* 打印样式 */
@media print {
  .no-print {
    display: none;
  }
}

12.2 常用断点

/* 移动设备 */
@media (max-width: 576px) { }

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

/* 小桌面 */
@media (min-width: 769px) and (max-width: 992px) { }

/* 大桌面 */
@media (min-width: 993px) { }

12.3 响应式单位

.element {
  /* 相对单位 */
  width: 50%;           /* 百分比 */
  width: 50vw;          /* 视口宽度 */
  height: 50vh;         /* 视口高度 */
  font-size: 1rem;      /* 根元素字体大小 */
  font-size: 1em;       /* 父元素字体大小 */
  
  /* 绝对单位 */
  width: 100px;         /* 像素 */
}

十三、CSS 变量

13.1 定义变量

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-size: 16px;
  --spacing: 20px;
}

13.2 使用变量

.element {
  color: var(--primary-color);
  font-size: var(--font-size);
  margin: var(--spacing);
  
  /* 默认值 */
  color: var(--primary-color, #000);
}

十四、常用技巧

14.1 居中

/* 水平居中（块级元素） */
.block {
  margin: 0 auto;
}

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

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

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

14.2 清除浮动

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 或使用 */
.clearfix {
  overflow: auto;
}

14.3 图片响应式

img {
  max-width: 100%;
  height: auto;
}

14.4 三角形

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #333;
}

十五、CSS 预处理器

15.1 Sass/SCSS

// 变量
$primary-color: #007bff;
$font-size: 16px;

// 嵌套
.container {
  width: 100%;
  
  .header {
    background: $primary-color;
  }
  
  &:hover {
    opacity: 0.8;
  }
}

// Mixin
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  @include flex-center;
}

// 继承
%button-base {
  padding: 10px 20px;
  border: none;
}

.btn-primary {
  @extend %button-base;
  background: $primary-color;
}

15.2 Less

// 变量
@primary-color: #007bff;

// 嵌套
.container {
  width: 100%;
  
  .header {
    background: @primary-color;
  }
}

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

.box {
  .flex-center();
}

十六、最佳实践

16.1 命名规范

/* BEM 命名 */
.block { }
.block__element { }
.block--modifier { }

/* 示例 */
.button { }
.button__icon { }
.button--primary { }
.button--large { }

16.2 代码组织

/* 1. 重置样式 */
* { margin: 0; padding: 0; }

/* 2. 基础样式 */
body { font-family: Arial; }

/* 3. 布局 */
.container { }

/* 4. 组件 */
.button { }
.card { }

/* 5. 工具类 */
.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }

16.3 性能优化

/* 避免过度嵌套 */
/* ❌ 不好 */
.container .wrapper .content .text { }

/* ✅ 好 */
.content-text { }

/* 使用简写 */
/* ✅ */
margin: 10px 20px;

/* ❌ */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

十七、推荐资源

官方文档：

MDN Web Docs：developer.mozilla.org/zh-CN/docs/…
W3C CSS 规范：www.w3.org/Style/CSS/

学习资源：

《CSS 权威指南》
CSS 教程：www.runoob.com/css/css-tut…
CSS-Tricks：css-tricks.com/
Flexbox 游戏：flexboxfroggy.com/
Grid 游戏：cssgridgarden.com/

十八、总结

CSS 核心要点：

选择器 + 盒模型 + 布局 + 响应式 + 动画 = 精美网页

核心心法：

CSS 是网页的皮肤，掌握布局是 CSS 的核心。响应式设计让网页适配各种设备。

📝 文档信息

作者: 阿鑫
更新日期: 2026.1