Carol-LD

外观

CSS进阶1

约 1637 字大约 5 分钟

2026-03-15

手写笔记

一、CSS @规则

1.1 定义

以 @ 开头的 CSS 语句，属于 CSS 指令，用于控制 CSS 行为、导入资源或定义特殊规则。

1.2 核心用法

@规则语法示例作用说明
@import@import "路径";导入另一个 CSS 文件，实现样式模块化
@charset@charset "utf-8";告诉浏览器该 CSS 文件的字符编码，必须写在第一行，否则不生效
@font-face见下方示例自定义 Web 字体，让用户即使未安装该字体也能正常显示

@font-face 示例

@font-face {
  font-family: "good night"; /* 自定义字体名称 */
  src: url("./font/晚安体.ttf"); /* 字体文件路径 */
}
p {
  font-family: "good night"; /* 使用自定义字体 */
}

二、Web 字体与图标

2.1 Web 字体

  • 场景：用户电脑未安装某特殊字体时，强制让用户下载并使用该字体；
  • 实现：通过 @font-face 规则定义新字体，再在普通样式中引用。

2.2 字体图标

  • 网站：iconfont.cn（阿里矢量库）是主流字体图标平台；
  • 总体使用：将图标打包为字体文件，通过 @font-face 引入，用类名或字符实现图标展示，体积小且可缩放。

三、块级格式化上下文（BFC）

3.1 定义

全称 Block Formatting Context（BFC），是一块独立的渲染区域，它规定了在该区域中常规流块盒的布局规则。

3.2 常规流布局规则（BFC 内部）

  1. 常规流块盒在水平方向上，必须撑满包含块；
  2. 常规流块盒在包含块的垂直方向上依次摆放；
  3. 常规流块盒若外边距（margin）相邻，则进行外边距合并；
  4. 常规流块盒的自动高度和摆放位置，无视浮动元素。

3.3 触发 BFC 的元素

以下元素会在其内部创建 BFC 区域：

  1. 根元素（<html>）；
  2. 浮动和绝对/固定定位元素；
  3. overflow 不为 visible 的块盒（如 overflow: hidden/scroll/auto）。

3.4 BFC 渲染特性

  • 不同 BFC 区域之间相互隔离，内部渲染互不干扰；
  • 创建 BFC 的元素，内部渲染不会影响到外部，同时也能隔离外部影响。

3.5 具体体现特征

  1. 创建 BFC 的元素，自动高度会计算浮动元素（解决高度塌陷问题）；
  2. 创建 BFC 的元素，不会和浮动元素重叠（实现自适应两栏布局）；
  3. 创建 BFC 的元素，不会和相邻子元素进行外边距合并（解决 margin 合并问题）。

四、布局分类

  • 常规流布局：默认布局方式，块盒垂直堆叠、行盒水平排列；
  • 双栏布局：通过浮动 + BFC 实现，一侧固定宽度，另一侧自适应；
  • 三栏布局：通过浮动/定位 + BFC 实现，两侧固定、中间自适应（圣杯布局/双飞翼布局）。

五、核心总结

  1. @规则：@import 导入样式、@charset 声明编码、@font-face 自定义字体；
  2. Web 字体：解决用户无本地字体的问题，@font-face 是核心实现；
  3. BFC：独立渲染区域，解决高度塌陷、外边距合并、浮动重叠等布局问题；
  4. 布局：常规流为基础，BFC 是实现复杂布局的关键工具。

六、浮动规则细节扩展

盒子位置规则

  1. 左浮动盒子：向上向左排列
  2. 右浮动盒子：向上向右排列
  3. 浮动盒子的顶边不得高于上一个盒子的顶边
  4. 若剩余空间无法放下浮动盒子，则该盒子向下移动，直到具备足够空间容纳，然后再向左或向右浮动

七、行高的取值扩展

取值类型说明
px 像素值固定行高，不随字体大小变化
无单位数字先继承再计算（推荐），如 line-height: 1.5，表示行高为字体大小的 1.5 倍
em 单位当前字体大小的多少倍，先计算再继承
百分比相对于当前字体大小的百分比，先计算再继承

八、body 背景与画布

画布（canvas）特性

  • 最小宽度 = 视口宽度
  • 最小高度 = 视口高度

html 与 body 背景覆盖规则

  1. html 元素有背景：body 元素正常工作（背景覆盖边框盒）
  2. html 元素无背景：body 元素背景覆盖画布

画布背景图定位规则

  1. 背景图高度百分比：相对于视口高度
  2. 背景图宽度百分比：相对于网页高度
  3. 背景图横向位置百分比：预设值，相对于视口
  4. 背景图纵向位置百分比：预设值，相对于网页高度

九、行盒的垂直对齐

多行文字对齐

给没有文本的行盒设置 vertical-align，可实现行内元素垂直对齐。

图片底部留白问题

  • 原因：图片元素是行盒，块盒高度自动撑开时，图片底部和文字基线之间往往会出现空白。
  • 解决方法：
    1. 设置父元素的字体大小为 0
    2. 将图片设置为块盒（display: block）

十、堆叠上下文（Stacking Context）

核心概念

同一个堆叠上下文的元素在 Z 轴上按以下规则排列（从下到上）：

  1. 创建堆叠上下文的元素的背景和边框
  2. 堆叠级别（z-index/stack level）为负数的堆叠上下文
  3. 常规流非定位的块盒
  4. 非定位的浮动盒子
  5. 常规流非定位行盒
  6. 任何 z-index 是 auto 的定位元素，以及 z-index 是 0 的堆叠上下文
  7. 堆叠级别为正值的堆叠上下文

创建堆叠上下文的元素

  1. html 根元素
  2. 设置了 z-index（非 auto）数值的定位元素

十一、核心总结

  1. 浮动：严格遵循上下左右的排列规则，受空间限制自动换行
  2. 行高：优先使用无单位数字，保证继承与计算的一致性
  3. 背景与画布：html/body 背景会传递到画布，背景图定位规则特殊
  4. 垂直对齐：vertical-align 控制行盒对齐，图片留白可通过转块盒解决
  5. 堆叠上下文：控制 Z 轴层级，定位元素 + z-index 是创建上下文的关键