CSS 学习笔记CSS 学习笔记一、什么是 CSS？ CSS（Cascading Style Sheets，层叠样式表

CSS 学习笔记

一、什么是 CSS？

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述 HTML 或 XML 文档外观的样式语言。它通过将内容（HTML）与表现（样式）分离，使得网页结构更清晰、维护更方便。

基本语法结构

声明（Declaration） ：一个属性与值的键值对，如 color: red;。
声明块（Declaration Block） ：由花括号 {} 包裹，包含多个声明，每个声明之间用分号 ; 分隔。
选择器（Selector） ：用于指定哪些 HTML 元素应用该样式规则。
CSS 规则（cssRules） ：由“选择器 + 声明块”组成，多个规则构成完整的样式表。

p {
  color: blue;
  font-size: 16px;
}

二、层叠（Cascading）

CSS 的核心特性之一是“层叠”，即当多个规则作用于同一个元素时，浏览器会根据优先级决定最终应用哪条规则。

优先级计算规则（个十百千）

内联样式（inline） ：1000 分
ID 选择器：100 分
类选择器、属性选择器、伪类：10 分
元素选择器、伪元素：1 分
通配符 *、组合符（如 +, >, ~） ：0 分

注意：!important 优先级最高，但应慎用，因为它会破坏层叠逻辑，不利于维护。

示例：

<style>
  p { color: blue; }               /* 1 分 */
  .container p { color: red; }     /* 10 + 1 = 11 分 */
  #main p { color: green; }        /* 100 + 1 = 101 分 */
  .container #main p { color: yellow; } /* 10 + 100 + 1 = 111 分 */
</style>

<div class="container">
  <div id="main">
    <p>Hello</p> <!-- 最终颜色：yellow -->
  </div>
</div>

三、盒模型与 margin 重叠

margin 重叠（Margin Collapse）

在垂直方向上，相邻块级元素的上下 margin 会发生重叠，取两者中绝对值较大的那个作为最终 margin。

仅发生在普通文档流中的块级元素之间。
父子元素之间也可能发生（称为“父子 margin 重叠”）。
解决方法：使用 padding、border、overflow: hidden 或 display: flex/grid 等创建新的 BFC（块格式化上下文）。

四、单位处理：小数 px 如何渲染？

CSS 中的 px 是绝对单位，但在现代浏览器中支持小数值（如 10.5px）。浏览器会进行亚像素渲染（subpixel rendering） ，在高分辨率屏幕上能更平滑地显示。

注意：某些旧设备或低 DPI 屏幕可能四舍五入为整数，导致微小偏差。

五、transform 对 inline 元素的限制

transform 属性不能直接作用于 display: inline 的元素，因为 inline 元素没有明确的宽高和布局框。

解决方案：

将其改为 inline-block 或 block：

span {
  display: inline-block;
  transform: rotate(10deg);
}

或使用 position: absolute（脱离文档流后可应用 transform）。

六、CSS 选择器详解

1. 基础选择器

元素选择器：p
类选择器：.book
ID 选择器：#main
通配符：*

2. 属性选择器

[data-category="科幻"] { background: #007bff; }
[title^="入门"] h2::before { content: "🌟"; }

[attr=value]：精确匹配
[attr^=value]：以 value 开头
[attr$=value]：以 value 结尾
[attr*=value]：包含 value

3. 兄弟与后代选择器

相邻兄弟：h1 + p → 紧跟在 h1 后的第一个 p
通用兄弟：h1 ~ p → h1 后所有同级 p
子代：.container > p → 直接子元素
后代：.container p → 所有嵌套的 p

4. 伪类与伪元素

伪类（一个冒号） ：表示元素状态
- :hover、:focus、:active、:checked
- :nth-child(n)、:not()、:last-child
伪元素（两个冒号） ：插入虚拟内容
- ::before、::after、::selection

示例：勾选复选框后加粗标签

input:checked + label { font-weight: bold; }

5. `:nth-child` vs `:nth-of-type`

.container p:nth-child(3)：选择第 3 个子元素，且该元素必须是 p
.container p:nth-of-type(3)：选择第 3 个类型为 p 的子元素（忽略其他类型）

七、布局与定位

display 属性

inline：不换行，无法设宽高
block：独占一行，可设宽高
inline-block：行内块，可设宽高且不换行（常用于按钮、图标）
flex / grid：现代布局方案

position 定位

relative：相对自身原位置偏移，不脱离文档流
absolute：相对于最近的非 static 定位祖先定位，脱离文档流
fixed：相对于视口定位
sticky：滚动到阈值时变为 fixed

技巧：父元素设 position: relative，子元素用 absolute 实现精准定位。

八、动画与交互效果

transition 过渡

.more {
  transition: all 0.3s ease;
}

property duration timing-function delay
常用于 hover、focus 状态变化

伪元素动画示例

.more::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: yellow;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: transform 0.3s ease;
}
.more:hover::before {
  transform: scaleX(1);
}

实现“悬停时底部滑出黄线”的效果。

九、最佳实践与注意事项

避免滥用 !important：破坏层叠，难以调试。
合理使用语义化类名：如 .book-card 而非 .red-box。
优先使用类选择器：比 ID 更灵活，便于复用。

重置默认样式：

* { margin: 0; padding: 0; box-sizing: border-box; }

响应式设计：结合 max-width、margin: 0 auto 实现居中适配。
自定义属性（data-*） ：用于存储额外信息，配合 CSS 属性选择器增强表现力。

十、总结

CSS 不仅是“美化页面”的工具，更是控制布局、交互、动画和响应式行为的核心技术。掌握选择器优先级、盒模型、定位机制、层叠规则以及现代布局方式（Flex/Grid），是构建高质量 Web 应用的基础。通过合理组织样式代码、遵循语义化原则，并善用伪类与伪元素，可以写出高效、可维护、富有表现力的 CSS。

学习 CSS，重在理解“为什么这样渲染”，而非死记语法。多动手实践，方能融会贯通。

CSS 学习笔记