Jacky's blog
Jacky
2024-10-06
目录

css 入门指南

# 属性计算过程

下面的内容参考 CSS 属性计算过程 (opens new window)

真实的情况确是,任何一个 HTML 元素,都有一套完整的 CSS 样式,只不过你没有书写的样式,大概率可能会使用其默认值。例如上图中 h1 一个样式都没有设置,全部都用的默认值

但是注意,我这里强调的是“大概率可能”,难道还有我们“没有设置值,但是不使用默认值”的情况么？

嗯,确实有的,所以我才强调你要了解“CSS 属性的计算过程”

总的来讲,属性值的计算过程,分为如下这么 4 个步骤:

  • 确定声明值
  • 层叠冲突
    • 比较源的重要性: 页面作者样式 > 用户样式 > 用户代理样式
    • 比较优先级
    • 比较次序: 样式声明既是同源,权重也相同。此时就会进入比较样式声明的次序
  • 使用继承
  • 使用默认值

# 视觉可视化模型

视觉可视化模型 (opens new window)

# SASS 与 CSS

SASS 和 CSS 是 Web 开发中常用的两种样式表语言。它们的关系是 SASS 是一种 CSS 预处理器,可以帮助你编写更动态和可维护的 CSS。以下是它们之间的比较：

# 基本概念

  • CSS (Cascading Style Sheets): 是 Web 页面的样式表语言,用于定义页面的外观和布局。CSS 是标准的样式表语言,直接被浏览器解析
  • SASS (Syntactically Awesome Stylesheets): 是一种 CSS 预处理器,扩展了 CSS 的功能,允许使用变量、嵌套规则、混入、继承等高级特性。SASS 本质上是为 CSS 添加了一些编程语言的特性,使样式表的编写更加高效和模块化

# 语法和特性比较

基本语法差异
  • CSS 是标准的、简单的样式规则,直接用于网页
  • SASS 支持两种语法：
    • Sass Syntax (缩进语法): 旧版 SASS 使用缩进格式,不需要大括号和分号
    • SCSS Syntax (现代语法): 这是更常用的 SASS 语法,类似于 CSS,使用大括号和分号
示例：
  • CSS：
.button {
    background-color: blue;
    color: white;
}
1
2
3
4
  • SASS (SCSS)：
.button {
    background-color: blue;
    color: white;
}
1
2
3
4
  • SASS (缩进语法)：
.button
  background-color: blue
  color: white
1
2
3

# 功能扩展

# 变量 (Variables)

  • 在 SASS 中,可以使用变量来存储值(如颜色、字体大小、间距等),使代码更具可维护性和重用性
  • CSS 目前只支持 CSS 自定义属性(CSS Variables),但它们的功能和 SASS 变量稍有不同,不能直接用于计算和嵌套

SASS：

$primary-color: #3498db;
.button {
    background-color: $primary-color;
}
1
2
3
4

CSS(使用自定义属性)：

:root {
    --primary-color: #3498db;
}
.button {
    background-color: var(--primary-color);
}
1
2
3
4
5
6

# 嵌套规则 (Nesting)

  • SASS 支持嵌套规则,这意味着你可以在一个选择器内部编写另一个选择器的样式,类似于 HTML 结构的嵌套
  • CSS 不支持直接的嵌套规则,但可以使用 class 组合选择器来实现类似效果

SASS：

.container {
    width: 100%;
    .header {
        font-size: 20px;
    }
}
1
2
3
4
5
6

CSS：

.container {
    width: 100%;
}
.container .header {
    font-size: 20px;
}
1
2
3
4
5
6

# 混入 (Mixins)

  • SASS 的混入允许你创建可重用的样式块,甚至可以接受参数,用于更动态的样式
  • CSS 目前不直接支持这种功能

SASS：

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.box {
    @include border-radius(10px);
}
1
2
3
4
5
6
7
8
9

# 继承 (Inheritance)

  • SASS 支持继承,使得你可以重用现有的样式,而无需复制代码
  • CSS 没有直接的继承机制,但可以通过类继承和组合来实现类似效果

SASS：

.button {
    background-color: blue;
    color: white;
}

.primary-button {
    @extend .button;
}
1
2
3
4
5
6
7
8

# 运算 (Operations)

  • SASS 支持在样式表中执行数学运算(加、减、乘、除),使得样式更加动态
  • CSS 目前不支持直接的运算,但你可以使用 calc() 函数进行简单的计算

SASS：

$width: 100px;
.box {
    width: $width + 20px;
}
1
2
3
4

CSS(仅支持 calc())：

.box {
    width: calc(100px + 20px);
}
1
2
3

# 编译与输出

  • CSS 是浏览器直接解析的样式语言,不需要编译
  • SASS 需要编译成标准的 CSS,通常使用 node-sass 或 dart-sass 进行编译

# 兼容性与支持

  • CSS 是浏览器原生支持的样式语言,所有现代浏览器都能兼容
  • SASS 需要编译成 CSS,然后浏览器才能理解和应用。你需要额外的工具或构建过程(如 Webpack 或 Gulp)来处理 SASS 文件

# 可维护性与灵活性

  • CSS 是直接和简单的,但当项目规模变大时,管理和维护变得困难
  • SASS 提供了更多的功能(如变量、混入、继承、运算等),让样式表更加模块化、可维护、可扩展

# other

# > 与 ～

在 CSS 中,> 和 ~ 是两种常见的组合器,用于选择特定的子元素或兄弟元素

1. > 子选择器

选择直接的子元素。规则是：仅选择父元素的直接子元素,不会匹配更深层级的嵌套元素。

示例：

<div class="parent">
    <div class="child">Direct Child</div>
    <div>
        <div class="child">Nested Child</div>
    </div>
</div>
1
2
3
4
5
6

CSS：

.parent > .child {
    color: red;
}
1
2
3

效果：

  • 只有直接子元素 <div class="child">Direct Child</div> 的文字会变成红色
  • 嵌套的子元素 .child 不会受影响

2. ~ 通用兄弟选择器

选择同级元素中后面的所有兄弟元素。

规则：

  • 必须是同一父元素内的兄弟元素
  • 匹配目标元素后面的所有兄弟元素

示例：

<div class="sibling">Sibling 1</div>
<div class="target">Target</div>
<div class="sibling">Sibling 2</div>
<div class="sibling">Sibling 3</div>
1
2
3
4

CSS：

.target ~ .sibling {
    color: blue;
}
1
2
3

效果：

  • Sibling 2 和 Sibling 3 的文字会变蓝,因为它们是 .target 后面的兄弟元素
  • Sibling 1 不会受影响,因为它在 .target 之前

3. 两者结合使用：> ~

~ 的组合选择器用于匹配直接子元素的后续兄弟元素

示例：

<div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
</div>
1
2
3
4
5

CSS：

.parent > .child ~ .child {
    color: green;
}
1
2
3

解释：

  • > .child：选择 .parent 的直接子元素 .child
  • ~ .child：从匹配到的 .child 开始,选择其后续兄弟 .child 元素

效果：

  • Child 2 和 Child 3 的文字会变绿,因为它们是前面 .child 的后续兄弟
  • Child 1 不会受影响,因为它没有前面的兄弟

# 常见问题 QA

# Q1: 如何实现水平垂直居中？

有多种方法可以实现元素的水平垂直居中：

方法 1：Flexbox（推荐）

.container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    height: 100vh;
}
1
2
3
4
5
6

方法 2：Grid

.container {
    display: grid;
    place-items: center; /* 水平垂直居中 */
    height: 100vh;
}
1
2
3
4
5

方法 3：绝对定位 + Transform

.container {
    position: relative;
    height: 100vh;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
1
2
3
4
5
6
7
8
9
10
11

方法 4：绝对定位 + Margin Auto

.container {
    position: relative;
    height: 100vh;
}

.child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 200px;  /* 需要指定宽高 */
    height: 100px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Q2: BFC（块级格式化上下文）是什么？如何触发？

BFC 定义：

BFC（Block Formatting Context）是一个独立的渲染区域，内部元素的布局不会影响外部元素。

BFC 的特性：

  1. 内部的盒子会在垂直方向上一个接一个排列
  2. 同一个 BFC 内，相邻盒子的 margin 会发生重叠
  3. BFC 区域不会与浮动元素重叠
  4. 计算 BFC 高度时，浮动元素也会参与计算
  5. BFC 是一个独立容器，内外元素互不影响

触发 BFC 的方法：

/* 1. float 不为 none */
.element {
    float: left;
}

/* 2. position 为 absolute 或 fixed */
.element {
    position: absolute;
}

/* 3. display 为 inline-block、flex、grid 等 */
.element {
    display: inline-block;
    /* 或 */
    display: flex;
    /* 或 */
    display: grid;
}

/* 4. overflow 不为 visible */
.element {
    overflow: hidden;
    /* 或 */
    overflow: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

应用场景：

/* 1. 清除浮动 */
.clearfix {
    overflow: hidden;
}

/* 2. 防止 margin 重叠 */
.wrapper {
    overflow: hidden; /* 创建 BFC */
}

/* 3. 自适应两栏布局 */
.left {
    float: left;
    width: 200px;
}
.right {
    overflow: hidden; /* 创建 BFC，不与浮动元素重叠 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Q3: CSS 选择器优先级是怎样的？

优先级从高到低：

  1. !important（最高优先级，不推荐使用）
  2. 内联样式（style="..."）
  3. ID 选择器（#id）
  4. 类选择器、属性选择器、伪类（.class、[attr]、:hover）
  5. 元素选择器、伪元素（div、::before）
  6. 通配符、子选择器、相邻选择器（*、>、+）

权重计算：

内联样式 = 1000
ID 选择器 = 100
类/属性/伪类 = 10
元素/伪元素 = 1
1
2
3
4

示例：

/* 权重 = 1 */
div { }

/* 权重 = 10 */
.class { }

/* 权重 = 100 */
#id { }

/* 权重 = 111 (100 + 10 + 1) */
#id .class div { }

/* 权重 = 21 (10 + 10 + 1) */
.class1.class2 div { }

/* 最高优先级 */
div {
    color: red !important;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意事项：

  • 相同权重时，后定义的样式会覆盖先定义的
  • !important 会覆盖所有其他样式，但应避免使用
  • 继承的样式权重为 0

# Q4: 盒模型的 box-sizing 有什么区别？

两种盒模型：

1. 标准盒模型（content-box）

.box {
    box-sizing: content-box; /* 默认值 */
    width: 200px;
    padding: 20px;
    border: 10px solid;
}
1
2
3
4
5
6
  • 实际宽度 = width + padding + border = 200 + 40 + 20 = 260px
  • width 只包含内容区域

2. IE 盒模型（border-box）

.box {
    box-sizing: border-box; /* 推荐使用 */
    width: 200px;
    padding: 20px;
    border: 10px solid;
}
1
2
3
4
5
6
  • 实际宽度 = width = 200px
  • width 包含 content + padding + border
  • 内容宽度 = 200 - 40 - 20 = 140px

全局设置（推荐）：

*, *::before, *::after {
    box-sizing: border-box;
}
1
2
3

# Q5: 如何实现响应式设计？

方法 1：媒体查询

/* 移动端优先 */
.container {
    width: 100%;
}

/* 平板 */
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

/* 桌面 */
@media (min-width: 1024px) {
    .container {
        width: 1000px;
    }
}

/* 大屏 */
@media (min-width: 1440px) {
    .container {
        width: 1200px;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

方法 2：Flexbox 布局

.container {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex: 1 1 300px; /* 最小宽度 300px，自动伸缩 */
    margin: 10px;
}
1
2
3
4
5
6
7
8
9

方法 3：Grid 布局

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
1
2
3
4
5

方法 4：相对单位

.container {
    width: 90vw;        /* 视口宽度的 90% */
    max-width: 1200px;  /* 最大宽度 */
    padding: 2rem;      /* 相对于根元素字体大小 */
}

.text {
    font-size: clamp(1rem, 2vw, 2rem); /* 响应式字体大小 */
}
1
2
3
4
5
6
7
8
9

# Q6: 如何实现单行/多行文本溢出省略？

单行文本省略：

.single-line {
    white-space: nowrap;      /* 不换行 */
    overflow: hidden;         /* 隐藏溢出 */
    text-overflow: ellipsis;  /* 显示省略号 */
}
1
2
3
4
5

多行文本省略：

.multi-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;    /* 显示 3 行 */
    overflow: hidden;
    text-overflow: ellipsis;
}
1
2
3
4
5
6
7

兼容性更好的多行省略（需要固定高度）：

.multi-line-compat {
    max-height: 4.5em;        /* 3 行，假设 line-height 为 1.5 */
    line-height: 1.5;
    overflow: hidden;
    position: relative;
}

.multi-line-compat::after {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    padding-left: 10px;
    background: linear-gradient(to right, transparent, white 50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Q7: Flexbox 的 flex: 1 是什么意思？

flex: 1 是 flex-grow、flex-shrink、flex-basis 的简写。

完整写法：

.item {
    flex: 1;
    /* 等同于 */
    flex: 1 1 0%;
    /* 等同于 */
    flex-grow: 1;     /* 放大比例 */
    flex-shrink: 1;   /* 缩小比例 */
    flex-basis: 0%;   /* 基础大小 */
}
1
2
3
4
5
6
7
8
9

常用写法对比：

/* flex: 1 - 平均分配剩余空间 */
.item {
    flex: 1;
}

/* flex: auto - 基于内容大小，可伸缩 */
.item {
    flex: auto;
    /* 等同于 flex: 1 1 auto */
}

/* flex: none - 不伸缩 */
.item {
    flex: none;
    /* 等同于 flex: 0 0 auto */
}

/* 自定义比例 */
.item1 {
    flex: 2; /* 占 2 份 */
}
.item2 {
    flex: 1; /* 占 1 份 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

示例：

<div class="container">
    <div class="item" style="flex: 2">占 2 份</div>
    <div class="item" style="flex: 1">占 1 份</div>
    <div class="item" style="flex: 1">占 1 份</div>
</div>
1
2
3
4
5
.container {
    display: flex;
    width: 400px;
}
/* item1 宽度 = 200px (2/4)
   item2 宽度 = 100px (1/4)
   item3 宽度 = 100px (1/4) */
1
2
3
4
5
6
7

# Q8: 如何清除浮动？

方法 1：使用 clearfix（推荐）

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}
1
2
3
4
5

使用：

<div class="clearfix">
    <div style="float: left;">Float Left</div>
    <div style="float: right;">Float Right</div>
</div>
1
2
3
4

方法 2：创建 BFC

.container {
    overflow: hidden;
    /* 或 */
    overflow: auto;
    /* 或 */
    display: flow-root; /* 现代浏览器 */
}
1
2
3
4
5
6
7

方法 3：额外标签法（不推荐）

<div class="container">
    <div style="float: left;">Float</div>
    <div style="clear: both;"></div>
</div>
1
2
3
4

# Q9: CSS Grid 和 Flexbox 有什么区别？如何选择？

Flexbox（一维布局）：

  • 适合单行或单列布局
  • 主轴和交叉轴概念
  • 适合组件内部布局
.flex-container {
    display: flex;
    justify-content: space-between; /* 主轴对齐 */
    align-items: center;            /* 交叉轴对齐 */
}
1
2
3
4
5

Grid（二维布局）：

  • 适合复杂的二维布局
  • 行和列同时控制
  • 适合页面整体布局
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 列 */
    grid-template-rows: auto;              /* 行高自动 */
    gap: 20px;                             /* 间距 */
}
1
2
3
4
5
6

选择建议：

场景 推荐方案
导航栏 Flexbox
卡片列表 Flexbox 或 Grid
复杂页面布局 Grid
表单对齐 Grid
工具栏按钮 Flexbox
网格图片墙 Grid

示例对比：

/* Flexbox - 导航栏 */
.navbar {
    display: flex;
    justify-content: space-between;
}

/* Grid - 网格布局 */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
1
2
3
4
5
6
7
8
9
10
11
12

# Q10: position 的各个值有什么区别？

1. static（默认值）

.element {
    position: static;
    /* top/right/bottom/left 无效 */
}
1
2
3
4
  • 正常文档流
  • 不受 top、right、bottom、left 影响

2. relative（相对定位）

.element {
    position: relative;
    top: 10px;    /* 相对于原位置偏移 */
    left: 20px;
}
1
2
3
4
5
  • 相对于元素原位置定位
  • 原位置仍占据空间
  • 不影响其他元素布局

3. absolute（绝对定位）

.parent {
    position: relative; /* 定位参照物 */
}

.child {
    position: absolute;
    top: 0;
    right: 0;
}
1
2
3
4
5
6
7
8
9
  • 相对于最近的非 static 父元素定位
  • 脱离文档流，不占据空间
  • 如果没有定位父元素，相对于 <html> 定位

4. fixed（固定定位）

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
1
2
3
4
5
6
  • 相对于视口定位
  • 脱离文档流
  • 滚动时位置不变

5. sticky（粘性定位）

.header {
    position: sticky;
    top: 0; /* 距离顶部 0px 时固定 */
}
1
2
3
4
  • 正常时表现为 relative
  • 滚动到指定位置时表现为 fixed
  • 常用于表头固定

实际应用：

/* 模态框背景 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* 卡片角标 */
.card {
    position: relative;
}
.badge {
    position: absolute;
    top: -10px;
    right: -10px;
}

/* 粘性导航 */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# Q11: 如何实现动画和过渡？

1. Transition（过渡）

/* 基本用法 */
.button {
    background-color: blue;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: red;
}

/* 多个属性 */
.box {
    transition: width 0.3s, height 0.3s, background 0.5s;
}

/* 所有属性 */
.element {
    transition: all 0.3s ease-in-out;
}

/* 延迟执行 */
.element {
    transition: opacity 0.3s ease 0.1s; /* 延迟 0.1s */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2. Animation（动画）

/* 定义动画 */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 使用动画 */
.element {
    animation: fadeIn 0.5s ease forwards;
}

/* 完整属性 */
.element {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.2s;
    animation-iteration-count: infinite; /* 无限循环 */
    animation-direction: alternate;      /* 交替反向 */
    animation-fill-mode: forwards;       /* 保持最后状态 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

常用动画示例：

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

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

/* 弹跳 */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* 脉冲 */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

性能优化：

/* 推荐使用 transform 和 opacity，性能更好 */
.good {
    transition: transform 0.3s, opacity 0.3s;
}

/* 避免直接改变 width、height、top、left */
.bad {
    transition: width 0.3s, height 0.3s;
}

/* 使用 will-change 提示浏览器优化 */
.optimize {
    will-change: transform, opacity;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Q12: CSS 变量（自定义属性）如何使用？

定义和使用：

/* 全局变量 */
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size-base: 16px;
    --spacing-unit: 8px;
}

/* 使用变量 */
.button {
    background-color: var(--primary-color);
    font-size: var(--font-size-base);
    padding: calc(var(--spacing-unit) * 2);
}

/* 默认值 */
.element {
    color: var(--text-color, #333); /* 如果未定义，使用 #333 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

局部变量：

.dark-theme {
    --primary-color: #1a1a1a;
    --text-color: #ffffff;
}

.light-theme {
    --primary-color: #ffffff;
    --text-color: #000000;
}
1
2
3
4
5
6
7
8
9

JavaScript 操作：

// 获取变量
const root = document.documentElement;
const primaryColor = getComputedStyle(root).getPropertyValue('--primary-color');

// 设置变量
root.style.setProperty('--primary-color', '#e74c3c');

// 主题切换
function toggleTheme() {
    const isDark = document.body.classList.toggle('dark-theme');
    root.style.setProperty('--primary-color', isDark ? '#1a1a1a' : '#3498db');
}
1
2
3
4
5
6
7
8
9
10
11
12

实用案例：

/* 响应式间距 */
:root {
    --spacing: 8px;
}

@media (min-width: 768px) {
    :root {
        --spacing: 16px;
    }
}

.container {
    padding: var(--spacing);
    gap: var(--spacing);
}

/* 主题颜色 */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
}

[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 参考资源

# 官方文档

# 学习资源

# 实用工具

#css#web#tutorial
上次更新: 2025/10/19, 21:13:45
JavaScript 实用代码片段
css 实用代码片段

← css 实用代码片段→

最近更新
01
npx 使用指南
10-12
02
cursor
09-28
03
inspect
07-20
更多文章>
Theme by Vdoing | Copyright © 2019-2025 Jacky | MIT License