跳转到内容

CSS 基础

1. 层叠与优先级 (Cascading & Specificity)

CSS 的核心在于处理不同来源样式的冲突逻辑。

1.1. 优先级链条

当出现冲突时，浏览器依照以下顺序（由强到弱）决定最终样式：

!important 标记 (破坏层叠规则，谨慎使用)
行内样式 (Inline Style, 写在 HTML 标签内)
ID 选择器 (#nav)
类 / 伪类 / 属性选择器 (.class, :hover)
标签选择器 (div, p)

1.2. 特殊值属性

inherit：强制子元素继承父元素的该属性值。
initial：强制将属性重置为 CSS 规范设定的初始默认值。

1.3. CSS 自定义属性 (CSS 变量)

可以在全局声明并动态复用：

:root {
  --main-font-size: 16px;
}
p {
  /* 第二个参数为 fallback 兜底值 */
  font-size: var(--main-font-size, 13px);
}

2. 尺寸单位体系 (Units)

2.1. 绝对单位

具有固定物理长度的单位（1in = 25.4mm = 2.54cm = 96px）。

注：CSS 中的像素 (px) 是逻辑像素，它会根据操作系统和屏幕 DPI 缩放，使其视觉大小在不同设备上相对一致。

2.2. 相对单位 (响应式核心)

em：相对于 当前元素 自身的字号 (font-size)。若用于 font-size 属性，则相对于父元素的字号。
rem (Root em)：相对于 根元素 (<html>) 的字号。避免了 em 嵌套导致的尺寸失控。
视口单位 (vh, vw, vmin, vmax)：相对于浏览器可视区域的百分比。

3. 盒模型与布局陷阱 (Box Model)

3.1. 盒模型类型

content-box (默认)：设定的 width 仅包含内容区。最终渲染宽度 = width + padding + border。
border-box (推荐)：设定的 width 包含了边框和内边距。内部内容区自动收缩。

* { box-sizing: border-box; }

3.2. 外边距折叠 (Margin Collapsing)

现象：普通文档流中，垂直方向上相邻的两个外边距会合并为一个（取最大值，而非相加）。
例外：浮动元素、绝对定位元素、以及 Flex 弹性盒子 内的子元素，其外边距不会发生折叠。

3.3. 经典布局解决方案

A. 等高列布局

/* 现代 Flex 方案 */
.container { display: flex; }
.left, .right { width: 50%; } /* 两列将自动等高 */

/* 兼容老设备的 Table 方案 */
.container { display: table; }
.left, .right { display: table-cell; width: 50%; }

B. 元素间距 (猫头鹰选择器)

/* 为容器内除了第一个子元素外的所有子元素添加顶部间距 */
.container > * + * {
    margin-top: 1.5em;
}

4. 拓展避坑：EDM 邮件营销样式开发

编写发往邮箱的 HTML (EDM) 是一项上古技艺：

禁用内部/外部样式表：许多邮件客户端（如 Gmail, Outlook）会直接剥离 <style> 标签，所有 CSS 必须写成 Inline 行内样式。
协议限制：图片与外部链接必须使用绝对路径且为 http/https 协议。
禁用现代布局：绝对不能使用 Flex/Grid，所有布局必须使用嵌套的 <table> 来完成。