盒子模型计算法与 Flex 布局特例总结

盒模型是用于计算元素大小和位置的系统。它由四部分组成：内容、内边距、边框和外边距。内容是元素的实际内容，内边距是内容与边框之间的空间，边框是元素周围的线，外边距是元素与其他元素之间的空间。

在 HTML 和 CSS 中，可以使用 content-box 或 border-box 两种盒模型。content-box 是默认的盒模型，在这种盒模型中，元素的宽度和高度只包括内容的宽度和高度。border-box 是一种替代的盒模型，在这种盒模型中，元素的宽度和高度包括内容、内边距和边框的宽度和高度。

盒模型计算法

以下是使用 content-box 和 border-box 盒模型计算元素大小和位置的步骤：

1. 确定元素的内容宽度和高度。
2. 如果元素具有内边距，则将内边距添加到内容宽度和高度中。
3. 如果元素具有边框，则将边框添加到宽度和高度中。
4. 如果元素具有外边距，则在外边距中添加宽度和高度。

Flex 布局

Flex 布局是一种用于创建灵活布局的 CSS 模块。它允许您轻松地创建多列布局、网格布局和响应式布局。

Flex 布局使用一个称为 flex 容器的特殊元素来创建布局。flex 容器中的元素称为 flex 子项。flex 容器可以水平或垂直排列 flex 子项。

Flex 布局的不常见规律

以下是 flex 布局的一些不常见的规律：

• 使用 flex-grow 属性可以创建伸缩盒元素。伸缩盒元素将占用其父元素的所有可用空间。
• 使用 flex-shrink 属性可以创建收缩盒元素。收缩盒元素将在其父元素空间不足时缩小。
• 使用 flex-basis 属性可以设置 flex 子项的初始大小。
• 使用 align-items 属性可以垂直对齐 flex 子项。
• 使用 justify-content 属性可以水平对齐 flex 子项。

结论

盒模型是用于计算元素大小和位置的系统。它由四部分组成：内容、内边距、边框和外边距。在 HTML 和 CSS 中，可以使用 content-box 或 border-box 两种盒模型。content-box 是默认的盒模型，在这种盒模型中，元素的宽度和高度只包括内容的宽度和高度。border-box 是一种替代的盒模型，在这种盒模型中，元素的宽度和高度包括内容、内边距和边框的宽度和高度。

Flex 布局是一种用于创建灵活布局的 CSS 模块。它允许您轻松地创建多列布局、网格布局和响应式布局。Flex 布局使用一个称为 flex 容器的特殊元素来创建布局。flex 容器中的元素称为 flex 子项。flex 容器可以水平或垂直排列 flex 子项。

一些不常见的 flex 布局规律包括：

• 使用 flex-grow 属性可以创建伸缩盒元素。伸缩盒元素将占用其父元素的所有可用空间。
• 使用 flex-shrink 属性可以创建收缩盒元素。收缩盒元素将在其父元素空间不足时缩小。
• 使用 flex-basis 属性可以设置 flex 子项的初始大小。
• 使用 align-items 属性可以垂直对齐 flex 子项。
• 使用 justify-content 属性可以水平对齐 flex 子项。