学习CSS布局

康拉德官僚，你说的技术上是对的——最好的一种正确。我在此提升你到三十七年级。-编号1.0 (Futurama, S2E15)

我不会骗你的，尼欧。每一个和特工打过架的男人或女人都死了。但在他们失败的地方，你会成功。

为什么?

我见过一个特工穿过水泥墙;人们向他们倒空了整个弹夹，除了空气什么也没击中;然而，它们的力量和速度仍然基于一个建立在规则之上的世界。正因为如此，他们永远不会像你一样强壮，或者像你一样快。

你想告诉我什么?我能躲过子弹吗?

不,尼奥。我想告诉你，等你准备好了……你不必这么做。

• 墨菲斯(《黑客帝国》，1999)

CSS就像矩阵一样，是一个基于规则的系统。

我写了这组章节来描述这些规则。这是长篇的写作，但不是书的长度。我不认为我想写一本关于CSS的书，但写CSS布局是有用的。我的方法很学究:

学究:形容词。
过分注重细节或形式主义，尤指在教学中。

我的意思是好的，虽然这个词显然有消极的含义。技术上正确是最好的正确吗?不,它不是。但是对于这个主题，有足够的资源在技术上是不正确的。

您可能听说过在CSS常规流中有内联和块元素。
但是您知道在CSS中，块和内联元素的相对位置实际上不是由元素的display属性决定的吗?
它实际上是由格式化上下文决定的，格式化上下文受元素的兄弟元素的影响。

您可能已经使用z-index来“修复”内容的相对堆栈顺序。
但是您知道z-index并不是整个文档的绝对索引，而是相对于堆栈上下文的吗?

你可能听说过盒子模型。
但是您知道实际上至少有五种不同的box模型，它们在内容维度和margin: auto的处理方式上存在细微的差异吗?
如果你读了这篇文章，你会明白的。

这是一组关于CSS布局的章节，适用于已经了解CSS的人。
我承认，这看起来是个小市场。我四处寻找学习CSS布局的好资源，但我发现其中大多数还不够学究。

CSS布局可能很难学习，因为网站通常是渐进发展的。这意味着您最终将到处学习小技巧，而永远不会学习底层布局算法。

这一组章节将带您了解CSS布局中的每个主要概念，并包括许多应用示例来说明各种概念。

第1章:在CSS中的盒子定位涵盖了HTML元素生成的盒子是如何相对定位的:

• CSS中的三种主要定位方案:普通流、浮动和绝对定位
• 普通流概念，如匿名盒子生成、格式化上下文、行盒子和行盒子中的对齐
• 浮动概念，如浮动顺序、clearfix和与父级高度的浮动交互

第2章:CSS中的Box sizing讨论了Box模型，但更重要的是Box模型在CSS中的不同定位方案中是如何变化的。具体来说，高、宽、边距是用完全不同的机构计算的，只有了解使用中的定位方案和计算机构，才能理解这些计算。

第3章:影响定位的附加属性涵盖了影响盒子定位的附加机制，例如:

• margin崩溃
• 负margins
• overflow
• max-width, max-height, min-width, min-height
• 堆栈上下文和z-inde属性
• 伪元素如何影响布局
• CSS3盒子大小属性

第4章:Flexbox讨论了CSS 3的Flexbox布局模式。

第5章:CSS布局技巧和布局技术将我们所学的知识应用到一些实际问题中。它还包含一些类似于小测验的问题，以测试您对布局的理解，例如:

• 水平和垂直定心
• CSS网格框架是如何工作的
• 多列布局
• 常见的陷阱和布局技巧

如果您需要查找特定的概念或属性，请查看reference索引，它提供了一种简单的方法，可以跨章节集查找正确的章节和部分。