Terminucia1. CSS基础概述
1.1 网页三剑客：HTML、CSS与JavaScript的关系
在网页开发中，HTML、CSS和JavaScript被称为"网页三剑客"，它们各自承担着不同的职责：
- HTML：负责网页的结构和内容，相当于建筑的框架
- CSS：负责网页的样式和外观，相当于建筑的装修
- JavaScript：负责网页的行为和交互，相当于建筑的电气系统
三者协同工作，共同构建完整的网页体验。理解它们的分工是学习前端开发的基础。
1.2 CSS的基本语法和工作原理
CSS的基本语法由选择器、属性和值组成：
css复制选择器 {
属性: 值;
属性: 值;
}
例如：
css复制p {
color: blue;
font-size: 16px;
}
这段代码表示将所有<p>标签的文字颜色设置为蓝色，字体大小为16像素。
1.3 CSS的三种引入方式
CSS可以通过三种方式引入到HTML中：
- 行内样式（不推荐）：
html复制<p style="color: red;">这是一段文字</p>
- 内部样式表：
html复制<head>
<style>
p {
color: blue;
}
</style>
</head>
- 外部样式表（推荐）：
html复制<head>
<link rel="stylesheet" href="styles.css">
</head>
在实际开发中，外部样式表是最常用的方式，因为它可以实现样式与结构的分离，便于维护和复用。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. CSS核心概念详解
2.1 层叠性（Cascading）
CSS中的"C"代表层叠（Cascading），指的是当多个样式规则应用于同一个元素时，浏览器会根据特定规则决定最终应用的样式。层叠规则按照以下优先级排序：
!important声明- 行内样式
- ID选择器
- 类选择器、属性选择器和伪类
- 元素选择器和伪元素
- 通配符选择器
- 继承的样式
2.2 继承性（Inheritance）
某些CSS属性会自动从父元素继承到子元素，这称为继承性。常见的可继承属性包括：
- 字体相关：
font-family,font-size,font-weight等 - 文本相关：
color,text-align,line-height等 - 列表相关：
list-style,list-style-type等
不可继承的属性通常与布局和盒模型相关，如width, height, margin, padding, border等。
2.3 优先级（Specificity）
CSS选择器的优先级决定了当多个规则冲突时，哪个规则会被应用。优先级由选择器的类型和数量决定，计算规则如下：
- 行内样式：1000
- ID选择器：100
- 类选择器、属性选择器、伪类：10
- 元素选择器、伪元素：1
- 通配符、组合符：0
优先级值相加，数值大的规则优先应用。如果优先级相同，则后定义的规则会覆盖前面的规则。
3. 盒模型详解
3.1 标准盒模型与怪异盒模型
CSS盒模型是布局的基础，它由四部分组成：
- 内容区（Content）：元素的实际内容
- 内边距（Padding）：内容与边框之间的空间
- 边框（Border）：围绕内容和内边距的线
- 外边距（Margin）：元素与其他元素之间的空间
CSS提供了两种盒模型：
-
标准盒模型（content-box）：
width和height只包含内容区- 总宽度 = width + padding + border
-
怪异盒模型（border-box）：
width和height包含内容区、内边距和边框- 总宽度 = width（包含padding和border）
通过box-sizing属性可以设置盒模型类型：
css复制.box {
box-sizing: border-box; /* 使用怪异盒模型 */
}
3.2 外边距塌陷问题
垂直方向上的相邻元素的外边距会发生合并（塌陷），这是CSS的一个特性。合并规则如下：
- 两个正值：取较大的值
- 一正一负：相加
- 两个负值：取绝对值较大的值
解决方法：
- 使用
padding代替margin - 添加
border或padding阻断合并 - 创建新的BFC（块级格式化上下文）
4. CSS布局技术
4.1 浮动（Float）布局
浮动最初用于实现文字环绕图片的效果，后来被广泛用于布局。浮动元素会脱离正常文档流，向左或向右移动，直到碰到包含框或另一个浮动元素。
css复制.float-left {
float: left;
width: 200px;
}
清除浮动的方法