基础部分 on 编程那些事儿

第1章什么是CSS

Fri, 27 Mar 2026 16:53:00 +0800

第一章：CSS 是什么

如果把网页比作一个人，那么 HTML 就是骨骼和器官，CSS 就是它的外衣和妆容。没有 CSS 的网页，就像一个人裸奔出门——技术上没问题，但回头率嘛… 主要是惊恐的那种。

第2章 CSS历史与技术演进

Fri, 27 Mar 2026 16:53:00 +0800

第二章：CSS 历史与技术演进

如果把 CSS 的发展历程拍成一部电影，那它一定是一部史诗级大片。有过黑暗时代（表格布局），有过文艺复兴（Flexbox/Grid），有过工具革命（Sass/Less），也有过哲学之争（Tailwind CSS vs 传统 CSS）。准备好了吗？让我们一起走进这部 CSS 史诗。

第3章编写你的第一个CSS页面

Fri, 27 Mar 2026 16:53:00 +0800

第三章：编写第一个 CSS 页面

纸上得来终觉浅，绝知此事要躬行。看了这么多 CSS 历史和理论，是时候动手写代码了！这一章，我们将从零开始搭建一个真实的网页，让你的浏览器变成你的画布，CSS 变成你的画笔。

第4章 CSS规则结构

Fri, 27 Mar 2026 16:53:00 +0800

第四章：CSS 规则的构成

CSS 就像一门语言，有自己的语法规则。学会这些规则，你就能写出规范、美观、易维护的 CSS 代码。这一章，我们将深入了解 CSS 的"语法"——从最小的组成部分开始。

第5章 CSS属性缩写与嵌套

Fri, 27 Mar 2026 16:53:00 +0800

第五章：CSS 属性缩写与嵌套

CSS 代码写长了会很繁琐。CSS 的缩写规则和嵌套语法就是来解决这个问题的。学会这些技巧，你的 CSS 代码会变得像诗歌一样优雅。

5.1 margin 和 padding 缩写

margin 和 padding 是最常用的属性之一，缩写规则相同，学会一个就学会了另一个。

第6章基础选择器

Fri, 27 Mar 2026 16:53:00 +0800

第六章：基础选择器

选择器是 CSS 的"遥控器"，没有它你连电视都开不了。学会了选择器，你就能精准地控制页面上任意一个元素——是让它变红、变蓝，还是让它跳一段舞。本章我们就来认识这些"万能遥控器"。

第7章组合选择器与伪类

Fri, 27 Mar 2026 16:53:00 +0800

第七章：组合选择器与伪类

如果说基础选择器是"单兵作战"，那组合选择器就是"联合作战"。学会了组合选择器，你就能选中那些"爸爸的儿子的孙子"——精确到骨头里去。而伪类呢，就是给元素加上各种"状态滤镜"：第一个孩子要表扬、鼠标悬停的要高亮、选中的要打勾… CSS 伪类就是来干这个的。

第8章选择器优先级

Fri, 27 Mar 2026 16:53:00 +0800

第八章：选择器优先级

CSS 的层叠规则就像一场"权力游戏"——当多个选择器同时想要控制同一个元素的同一个属性时，谁说了算？这就是优先级要解决的问题。学会了优先级，你就能精准地控制"谁的话更大声"，而不是被浏览器的默认规则搞得一头雾水。

第9章盒模型基础

Fri, 27 Mar 2026 16:53:00 +0800

第九章：盒模型基础

盒模型是 CSS 布局的"基因"。每一个 HTML 元素在页面上都是一个盒子，这个盒子由四个部分组成：content（内容）、padding（内边距）、border（边框）和 margin（外边距）。理解了盒模型，你就能精准控制元素的尺寸和位置——CSS 布局的精髓，全在这一章。

第10章盒尺寸

Fri, 27 Mar 2026 16:53:00 +0800

第十章：box-sizing

box-sizing 属性决定了元素的尺寸是如何计算的。没有它，你永远算不准元素的实际宽度——padding 加了、border 加了，元素就像打了激素一样越来越宽。学会它，你就是布局界的"精确制导"！

第11章文本与字体属性

Fri, 27 Mar 2026 16:53:00 +0800

第十一章：文字与字体属性

文字是网页的灵魂，字体是文字的外衣。学会控制文字和字体，你的网页就不再是"千篇一律的系统默认字体"，而是独具特色的品牌视觉。

第12章颜色与背景属性

Fri, 27 Mar 2026 16:53:00 +0800

第十二章：颜色与背景属性

颜色是网页的灵魂，背景是页面的外衣。学会控制颜色和背景，你的网页就能从"黑白电视"升级到"彩色电视"。

第13章边框属性

Fri, 27 Mar 2026 16:53:00 +0800

第十三章：边框属性

边框是元素的"轮廓线"，它让元素从背景中凸显出来。学会控制边框，你的网页元素就能有清晰的边界和立体感。想象一下，一个按钮没有边框，就像一个人出门没穿裤子——技术上不是不行，但你肯定不想看到那个场面。

第14章 CSS尺寸与溢出

Fri, 27 Mar 2026 16:53:00 +0800

第十四章：尺寸与溢出属性

一个元素到底有多"大"？这个问题看似简单，但如果你回答不上来，可能意味着你还没完全理解 CSS 的尺寸系统。CSS 的尺寸属性就像是一个元素的身高体重秤——width 决定横向有多宽，height 决定纵向有多高。但这只是表面现象，因为还有一堆"限制器"（max-width、min-width）以及"溢出处理"（overflow）在背后虎视眈眈。这一章，我们就来好好聊聊元素的尺寸和溢出那些事儿。

第15章表格属性

Fri, 27 Mar 2026 16:53:00 +0800

第十五章：表格属性

表格是数据展示的重要形式，但默认的表格样式往往让人"不忍直视"。这一章，我们将学习如何用 CSS 把那些"丑陋"的表格变成"颜值与实力并存"的数据展示利器。从边框合并到单元格对齐，从间距控制到布局优化，我们一起来探索表格的 CSS 美化之道。

第16章列表与计数器属性

Fri, 27 Mar 2026 16:53:00 +0800

第十六章：列表与计数器属性

列表是我们日常生活中经常遇到的东西——购物清单、待办事项、排行榜… CSS 提供了丰富的列表样式控制。而 CSS 计数器更是一个"隐藏的神器"，它可以让你不依赖 JavaScript 就能实现自动编号功能。这一章，我们将一起探索列表和计数器的奥妙。

第17章图片与替换元素属性

Fri, 27 Mar 2026 16:53:00 +0800

第十七章：图片与替换元素属性

图片是网页中最常见的媒体类型之一。但你有没有遇到过这种情况：图片太大变形了、图片太小显得模糊、或者图片比例不对导致布局混乱？这一章，我们将学习如何用 CSS 来优雅地处理这些问题，让图片展示变得得心应手。

第18章多列布局

Fri, 27 Mar 2026 16:53:00 +0800

第十八章：多列布局

想象一下报纸的排版——密密麻麻的文字被分成好几列，你只需要从上到下阅读完一列，然后跳到下一列。多列布局（Multi-column Layout）就是 CSS 给你提供的"报纸排版"能力，让长篇内容自动分成多列显示，既美观又实用。

第19章 display属性与文档流

Fri, 27 Mar 2026 16:53:00 +0800

第十九章：display 属性与文档流

CSS 布局的核心是"文档流"——浏览器默认排列元素的方式。而 display 属性则是控制元素如何参与文档流的关键。理解这两个概念，就等于掌握了 CSS 布局的第一把钥匙。想象一下，文档流就像河流，元素就像河里的船只，display 属性决定了你是一艘货船（块级）还是一艘快艇（行内）。

第20章格式化上下文

Fri, 27 Mar 2026 16:53:00 +0800

第二十章：格式化上下文

格式化上下文（Formatting Context）是 CSS 布局中一个相对高级的概念。理解它，你就能解释很多"奇怪"的布局现象——比如为什么父元素高度塌陷、为什么 margin 会重叠、为什么 overflow:hidden 能清除浮动。这些问题的答案，都藏在格式化上下文中。

第21章浮动布局

Fri, 27 Mar 2026 16:53:00 +0800

第二十一章：浮动布局

浮动（Float）是 CSS 中历史悠久的布局方式，虽然现在 Flexbox 和 Grid 已经成为主流，但浮动在某些场景下仍然有用武之地。理解浮动的原理和清除方法，对于阅读老代码和维护旧项目非常重要。想象一下，浮动就像是在报纸排版中让图片"浮"到文字旁边，让文字环绕图片排列。

第22章定位布局

Fri, 27 Mar 2026 16:53:00 +0800

第二十二章：定位布局

定位（Position）是 CSS 中最强大的布局手段之一。通过 position 属性，你可以把元素放到页面的任何位置，实现层叠效果、固定导航、回到顶部按钮等各种复杂布局。想象一下，position 就是 CSS 给你的"魔法棒"，可以让你把元素"传送"到任何你想要的地方。

第23章弹性盒子布局

Fri, 27 Mar 2026 16:53:00 +0800

第二十三章：Flexbox 布局

Flexbox（弹性盒布局）是 CSS3 引入的强大布局系统，它可以让你轻松实现各种对齐、分布、响应式布局。Flexbox 就像是一个"万能的盒子"，里面的物品可以自动调整位置和大小。学会 Flexbox，你就拥有了现代 CSS 布局的瑞士军刀！

第24章网格布局

Fri, 27 Mar 2026 16:53:00 +0800

第二十四章：Grid 布局

想象一下，如果你要布置一个房间，你会怎么做？买好家具之后，是不是要决定沙发放哪儿、电视放哪儿、茶几放哪儿？Grid 布局就是 CSS 给你的"房间布置图"——你可以精确地决定每一个元素该放在哪一行、哪一列。就像城市规划师一样，你现在是 CSS 布局的城市规划师！Flexbox 是单行道，只能往一个方向走；Grid 则是十字路口，行和列同时控制，这就是二维布局的威力！

第25章响应式设计

Fri, 27 Mar 2026 16:53:00 +0800

第二十五章：响应式设计

想象一下，你开了一家餐厅，但只提供一种尺寸的椅子——要么太小坐着挤得慌，要么太大坐上去像掉进了洞里。用户得多不爽？更不爽的是，你还得给每个用户单独建一个餐厅！响应式设计就是让你的"椅子"能适应不同"身材"的"用户"——不同的屏幕尺寸。一套代码，多种体验，妈妈再也不用担心我为手机、平板、桌面各写一套 CSS 了！

第26章滚动属性

Fri, 27 Mar 2026 16:53:00 +0800

第二十六章：滚动相关属性

想象一下，你在网上阅读一篇长文章，滚动鼠标滚轮时，页面像蜗牛一样卡顿，你会不会直接关掉网页？滚动体验直接影响用户的浏览感受。这一章我们就来学习如何让页面滚动丝滑如德芙巧克力！

第27章逻辑属性

Fri, 27 Mar 2026 16:53:00 +0800

第二十七章：逻辑属性与书写模式

想象一下，你写了一个网页，上面的文字是从左往右读的。但突然有一天，你要把网页翻译成阿拉伯文或者希伯来文——这些文字是从右往左读的！你怎么办？从头重写所有 CSS 吗？逻辑属性就是来解决这个问题的！它让你的 CSS 不受书写方向影响，全球化网站必备技能！学会这章，你就是"跨境电商"级别的 CSS 大师！

第28章 CSS渐变

Fri, 27 Mar 2026 16:53:00 +0800

第二十八章：CSS 渐变

想象一下，你有一支画笔，但这支画笔可以自动从一种颜色渐变到另一种颜色——渐变就是 CSS 给你的"魔法画笔"。渐变可以替代图片，减小文件体积；渐变可以创造纯色无法实现的视觉效果。学会渐变，你的网页设计水平直接提升一个档次！从此告别"甲方说这个蓝不够蓝"的噩梦！

第29章 CSS变换

Fri, 27 Mar 2026 16:53:00 +0800

第二十九章：CSS 变换 transform

想象一下，你是一个魔法师，可以让元素变大、缩小、旋转、倾斜——transform 就是 CSS 给你的魔法棒！学会了 transform，你的网页就能做出各种炫酷效果，让用户目不转睛！

第30章 CSS动画

Fri, 27 Mar 2026 16:53:00 +0800

第三十章：CSS 动画

CSS动画让你的网页从"静态图片"变成"动态电影"！transition和animation是CSS给你的"电影导演椅"，让元素按照你的剧本演出！

第31章滤镜与混合模式

Fri, 27 Mar 2026 16:53:00 +0800

第三十一章：滤镜与混合模式

滤镜就像是给你的网页加了一层"美颜滤镜"——可以让图片变模糊、变亮、变暗、加阴影。混合模式则是让两层元素叠加时产生各种神奇的化学反应。学会这些，你的网页设计水平直接提升一个档次！从此不用开 PS，直接用 CSS “美颜”！

第32章 clip-path裁剪

Fri, 27 Mar 2026 16:53:00 +0800

第三十二章：clip-path 裁剪

clip-path就是CSS给你的"裁纸刀"，可以裁剪出任意形状！菱形、圆形、六边形…只有你想不到，没有它裁不到！

第33章层叠与继承

Fri, 27 Mar 2026 16:53:00 +0800

第三十三章：层叠与继承

当多个CSS规则冲突时，谁说了算？层叠规则就是CSS的"宫廷内斗"大戏！学会层叠，你就是那个笑到最后的宫斗冠军——妈妈再也不用担心你被 !important 这个bug级队友坑了！CSS：我全都要.jpg

第34章渲染性能

Fri, 27 Mar 2026 16:53:00 +0800

第三十四章：渲染性能

性能就是体验！卡顿的网页让人想砸键盘，这一章我们学习让CSS跑得更快的技巧。记住：卡顿是用户离开的最佳理由，别让你的网页成为"浏览器坟墓"！

第35章 CSS架构

Fri, 27 Mar 2026 16:53:00 +0800

第三十五章：CSS 架构与预处理器

CSS架构让代码更易维护，预处理器让开发更高效。学会这些，你就是CSS架构师了！

35.1 CSS 架构模式

35.1.1 BEM命名规范

BEM（Block__Element–Modifier）是一种三段式命名规范：Block（块）__Element（元素）–Modifier（修饰符），组合起来才是完整的类名，让类名清晰易懂。

第36章交互属性

Fri, 27 Mar 2026 16:53:00 +0800

第三十六章：交互与用户相关属性

网页不只是看的，更要"玩"的！学会CSS交互属性，让用户爱上你的网页！

36.1 pointer-events

36.1.1 pointer-events属性

pointer-events 控制元素是否响应鼠标事件。

第37章固定搭配速查

Fri, 27 Mar 2026 16:53:00 +0800

第三十七章：固定搭配速查

这些固定搭配收藏起来，编码效率翻倍！

37.1 文字类

37.1.1 单行省略

1
2
3
4
5
6


.single-line {
 width: 100%; /* 必须有明确宽度，ellipsis 才生效 */
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

37.1.2 多行省略

1
2
3
4
5
6


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

37.2 布局类

37.2.1 Flex居中

1
2
3
4
5


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

37.2.2 清除浮动

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


/* 方案1：::after 伪元素（最常用）*/
.clearfix::after {
 content: "";
 display: block;
 clear: both;
}

/* 方案2：display: flow-root（现代简洁）*/
.parent { display: flow-root; }

/* 方案3：overflow: hidden（需注意裁剪问题）*/
.parent { overflow: hidden; }

37.3 动画类

37.3.1 悬浮放大

1
2
3
4
5
6


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

37.4 表单类

37.4.1 accent-color

1
2
3


input[type="checkbox"] {
 accent-color: #3498db;
}

本章小结

收藏备用！

第38章常见问题

Fri, 27 Mar 2026 16:53:00 +0800

第三十八章：常见问题与坑

踩坑是成长的必经之路，这一章帮你提前知道这些坑在哪里！

38.1 盒模型

38.1.1 父元素高度塌陷

浮动元素导致父容器高度塌陷。

1
2


/* 解决方案 */
.parent { display: flow-root; }

38.1.2 margin上下重叠

1
2
3
4
5
6
7
8


/* 方案1：父元素 overflow: hidden（简单但可能有副作用）*/
.parent { overflow: hidden; }

/* 方案2：父元素 padding 代替子元素 margin（推荐）*/
.parent { padding: 20px 0; }

/* 方案3：子元素使用单方向 margin（推荐）*/
.child { margin-top: 20px; } /* 只用 top 或 bottom */

38.2 布局

38.2.1 Flex项目被压缩

1

.item { flex-shrink: 0; }

38.2.2 inline-block间隙

inline-block元素之间会产生空白间距，解决方案是把父元素设为flex或grid。

第39章 UI组件实现

Fri, 27 Mar 2026 16:53:00 +0800

第三十九章：UI 组件实现

用纯CSS实现常见UI组件，不依赖任何库！

39.1 按钮

39.1.1 五状态

按钮是网页最基础的交互元素。一个正经的按钮得学会看人脸色——什么时候能点，什么时候装死，什么时候让人按不动。

基础部分 on 编程那些事儿

第1章 什么是CSS

第一章：CSS 是什么

第2章 CSS历史与技术演进

第二章：CSS 历史与技术演进

第3章 编写你的第一个CSS页面

第三章：编写第一个 CSS 页面

第4章 CSS规则结构

第四章：CSS 规则的构成

第5章 CSS属性缩写与嵌套

第五章：CSS 属性缩写与嵌套

5.1 margin 和 padding 缩写

第6章 基础选择器

第六章：基础选择器

第7章 组合选择器与伪类

第七章：组合选择器与伪类

第8章 选择器优先级

第八章：选择器优先级

第9章 盒模型基础

第九章：盒模型基础

第10章 盒尺寸

第十章：box-sizing

第11章 文本与字体属性

第十一章：文字与字体属性

第12章 颜色与背景属性

第十二章：颜色与背景属性

第13章 边框属性

第十三章：边框属性

第14章 CSS尺寸与溢出

第十四章：尺寸与溢出属性

第15章 表格属性

第十五章：表格属性

第16章 列表与计数器属性

第十六章：列表与计数器属性

第17章 图片与替换元素属性

第十七章：图片与替换元素属性

第18章 多列布局

第十八章：多列布局

第19章 display属性与文档流

第十九章：display 属性与文档流

第20章 格式化上下文

第二十章：格式化上下文

第21章 浮动布局

第二十一章：浮动布局

第22章 定位布局

第二十二章：定位布局

第23章 弹性盒子布局

第二十三章：Flexbox 布局

第24章 网格布局

第二十四章：Grid 布局

第25章 响应式设计

第二十五章：响应式设计

第26章 滚动属性

第二十六章：滚动相关属性

第27章 逻辑属性

第二十七章：逻辑属性与书写模式

第28章 CSS渐变

第二十八章：CSS 渐变

第29章 CSS变换

第二十九章：CSS 变换 transform

第30章 CSS动画

第三十章：CSS 动画

第31章 滤镜与混合模式

第三十一章：滤镜与混合模式

第32章 clip-path裁剪

第三十二章：clip-path 裁剪

第33章 层叠与继承

第三十三章：层叠与继承

第34章 渲染性能

第三十四章：渲染性能

第35章 CSS架构

第三十五章：CSS 架构与预处理器

35.1 CSS 架构模式

35.1.1 BEM命名规范

第36章 交互属性

第三十六章：交互与用户相关属性

36.1 pointer-events

36.1.1 pointer-events属性

第37章 固定搭配速查

第三十七章：固定搭配速查

第1章什么是CSS

第3章编写你的第一个CSS页面

第6章基础选择器

第7章组合选择器与伪类

第8章选择器优先级

第9章盒模型基础

第10章盒尺寸

第11章文本与字体属性

第12章颜色与背景属性

第13章边框属性

第15章表格属性

第16章列表与计数器属性

第17章图片与替换元素属性

第18章多列布局

第20章格式化上下文

第21章浮动布局

第22章定位布局

第23章弹性盒子布局

第24章网格布局

第25章响应式设计

第26章滚动属性

第27章逻辑属性

第31章滤镜与混合模式

第33章层叠与继承

第34章渲染性能

第36章交互属性

第37章固定搭配速查

第38章常见问题