korey的前端笔记

Appearance

CSS 视觉格式化模型 ​

概念 ​

CSS 视觉格式化模型（Visual Formatting Model）是 CSS 中用于处理文档和呈现输出的机制。它决定了如何将文档的结构（通常是 HTML）转换成视觉表现。视觉格式化模型包括以下几个组成部分：

  • 盒模型（Box Model）：在 CSS 中，所有的元素都被表示为盒子。每个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。
  • 格式化上下文（Formatting Contexts）：格式化上下文是一个环境，其中有一组渲染规则，用于处理元素的布局。主要有两种类型的格式化上下文：
    • 块级格式化上下文（Block Formatting Context, BFC）：在这个上下文中，块级盒子在垂直方向上一个接一个地排列。
    • 行内格式化上下文（Inline Formatting Context, IFC）：在这个上下文中，行内元素在水平方向上排列，直到需要换行。
  • 浮动（Floats）：元素可以浮动，这意味着它可以向左或向右移动，直到它的外边缘接触到包含块的边缘或另一个浮动元素。
  • 定位（Positioning）：元素可以通过定位属性（如 relative, absolute, fixed, 或 sticky）来指定其在页面上的位置。这些属性允许元素脱离正常的文档流，并在页面上的特定位置进行定位。
  • 层叠上下文（Stacking Contexts）：层叠上下文是一个三维概念，用于控制页面上元素的层叠顺序。元素的 z-index 属性，以及定位属性，会影响其在层叠上下文中的位置。
  • 视口（Viewport）：视口是用户用来查看网页的区域。它可能是浏览器窗口的大小，也可能是移动设备屏幕的大小。视口的大小会影响布局，特别是在响应式设计中。
  • 相对单位：元素的尺寸和位置可以使用相对单位（如 em, rem, %, vw, vh 等）来定义，这些单位相对于其他元素（如父元素或视口）来计算。
  • 弹性盒子布局（Flexbox）：Flexbox 是一个用于在一维空间内分布空间和对齐内容的布局模型。
  • 网格布局（Grid Layout）：Grid Layout 是一个用于在二维空间内创建复杂布局的模型。
  • 内容溢出（Content Overflow）：当内容超出其包含盒子时，可以通过 overflow 属性来控制是否裁剪内容或添加滚动条。

CSS 视觉格式化模型是一个复杂的系统，它涉及到多个属性和规则的相互作用，以决定最终的页面布局和外观。理解这些组成部分及其相互关系对于创建具有良好视觉效果和响应性的网页至关重要。

CSS 的 display 属性可以用来改变元素的视觉格式化模型，即改变框的类型。

盒模型 ​

  • Web 页面中任何一个元素都是一个盒子（框）
  • CSS 中的框可以是内联的，也可以是块级的
  • CSS 中的任何一个框都包含了内容、内距、边框和外距

另外，CSS 的逻辑属性将会给 CSS 盒模型带来较大的变化，逻辑属性的使用能更好的结合书写模式，更能符合视觉上的感观。

与盒模型的区别 ​

  • CSS 的盒模型是用来计算盒子大小尺寸
  • CSS 的格式化模型是用来决定盒子类型和用来计算盒子的位置

重要参考 ​