CSS选择器及盒模型1

约 1371 字大约 5 分钟

2026-03-14

手写笔记

一、CSS 基础结构：为网页添加样式

1.1 CSS 规则组成

选择器：选中要添加样式的 HTML 元素；
声明块：包裹在大括号 {} 中，包含多条「属性: 值」声明，每条声明对应一种样式。

示例：

/* 选择器 + 声明块 */
.box {
  color: red;
  font-size: 16px;
}

1.2 文本溢出省略（实用技巧）

实现单行文本溢出显示省略号的固定写法：

{
  white-space: nowrap;    /* 不换行 */
  overflow: hidden;       /* 溢出隐藏 */
  text-overflow: ellipsis;/* 溢出显示省略号 */
}

二、CSS 选择器（核心分类）

2.1 基础选择器（简单选择器）

选择器类型	语法示例	作用说明
ID 选择器	`#header`	选中 `id="header"` 的唯一元素
元素选择器	`p`	选中所有 `<p>` 元素
类选择器	`.box`	选中所有 `class="box"` 的元素
通配符选择器	`*`	选中所有元素（慎用，性能消耗大）
属性选择器	`[type="text"]`	选中包含指定属性/属性值的元素

2.2 组合选择器（选择器的组合）

组合类型	语法示例	作用说明
并且（交集）	`div.box`	选中既是 `<div>` 又有 `box` 类的元素
后代元素	`.box p`	选中 `.box` 内部所有后代 `<p>` 元素
子元素	`.box > p`	选中 `.box` 直接子级的 `<p>` 元素
相邻兄弟元素	`h2 + p`	选中紧跟在 `<h2>` 后的第一个 `<p>`
后面出现的兄弟	`h2 ~ p`	选中 `<h2>` 之后所有同级 `<p>` 元素

2.3 伪类与伪元素选择器

伪类选择器（修饰元素状态）：
- 链接状态：a:link（未访问）、a:visited（已访问）、a:hover（悬停）、a:active（激活）
  - 遵循 LVHA 顺序（Love Hate）：link → visited → hover → active，否则样式不生效；
- 其他：:focus（聚焦）、:first-child（第一个子元素）等。
伪元素选择器（创建虚拟元素）：
- ::before：在元素内容前插入虚拟元素；
- ::after：在元素内容后插入虚拟元素；
- 注意：必须配合 content 属性使用，否则无法渲染。

三、样式冲突与层叠（Cascade）

3.1 层叠的定义

当多个选择器选中同一个元素并设置相同属性时，会产生样式冲突，浏览器通过「层叠规则」自动决定最终生效的样式。

3.2 层叠优先级计算（三步法）

比较重要性：
- 最高优先级：!important 标记的样式（如 color: red !important;）；
- 其次：作者写的普通样式；
- 最低：浏览器默认的用户代理样式。

比较特殊性（Specificity）：

计算规则：生成一个 4 位数字 (千位, 百位, 十位, 个位)，数值越大优先级越高：

位级	计算规则
千位	内联样式（`style="..."`）记 1，否则 0
百位	ID 选择器的数量
十位	类选择器、属性选择器、伪类选择器的数量
个位	元素选择器、伪元素选择器的数量

示例：#box .item p → 千位0，百位1，十位1，个位1 → (0,1,1,1)

比较源次序：
- 若重要性、特殊性完全相同，代码书写靠后的样式覆盖靠前的样式（后写生效）。

四、样式继承

4.1 继承的定义

子元素会自动继承父元素的部分样式（如文字颜色、字体大小等），无需重复书写。

可继承样式：color、font-*、line-height、text-align 等文本类样式；
不可继承样式：width、height、padding、border、margin 等盒模型类样式。

4.2 继承的作用

减少重复代码，统一页面文本风格，提升开发效率。

五、CSS 盒模型

5.1 盒模型的组成（从内到外）

内容（content）：元素实际显示的文本/图片区域；
填充（padding）：内容到边框的距离（撑开元素内部空间）；
边框（border）：包裹 padding 和 content 的可见边框；
外边距（margin）：元素与其他元素之间的距离（撑开元素外部空间）。

5.2 盒模型类型

盒模型类型	宽高计算范围	特点说明
内容盒（content-box）	仅包含 `content`	默认类型，padding/border 会额外撑开元素总尺寸，布局易出偏差
填充盒（padding-box）	包含 `content + padding`	浏览器兼容性差（仅部分浏览器支持），实际开发中极少使用
边框盒（border-box）	包含 `content + padding + border`	主流推荐使用，元素宽高固定，padding/border 不会额外撑开尺寸，布局更易控制

示例（边框盒）：

.box {
  box-sizing: border-box; /* 切换为边框盒 */
  width: 200px;
  padding: 20px;
  border: 1px solid #000;
  /* 最终元素总宽度仍为 200px，content 自动计算为 200-20*2-1*2=158px */
}

示例（填充盒）：

.box {
  box-sizing: padding-box; /* 切换为填充盒 */
  width: 200px;
  padding: 20px;
  border: 1px solid #000;
  /* 元素总宽度 = 200 + 1*2 = 202px（content+padding=200px，border 额外撑开） */
}

5.3 渲染前提

浏览器渲染元素的前提：该元素的所有 CSS 属性必须有有效值，缺失值会导致样式不生效。

六、核心总结

选择器：基础选择器 + 组合选择器 + 伪类/伪元素，精准选中目标元素；
层叠：解决样式冲突，优先级：!important > 特殊性 > 代码顺序；
继承：子元素继承父元素文本样式，减少重复代码；
盒模型：包含 content/padding/border/margin，共三类（内容盒/填充盒/边框盒），border-box 是现代布局首选。