我希望从前端开始时我对 CSS 有所了解

刚开始时，CSS 可能很难掌握。这看起来像是魔法，你很容易发现自己在玩鼹鼠游戏，调整一个属性只是为了让其他东西坏掉。这是令人沮丧的，这是我很长一段时间的经历，然后事情突然似乎“咔嗒”一声。回想这段时间，我认为有一些关键概念对事物最终变得有意义并融合在一起至关重要。它们是： 在构建可重用和可组合的组件时，还需要记住一些有用的概念。我认为构建可视化 UI 组件的一个关键方法是，基本上所有内容都可以分解为页面上的一堆矩形。一次考虑页面的所有方面可能会让人不知所措，因此在精神上将事情分解为一系列矩形组件，并忽略与您当时正在处理的部分无关的所有内容。当你考虑一个元素的大小（即它的高度和宽度）时，有两种不同的模型来衡量它，你可以用 box-sizing 属性调整它。元素的大小仅包括其内容，而不包括其内边距或边框。元素的大小包括其内边距和边框。当您使用 content-box 设置 width: 100% 时，内容将是父元素宽度的 100%，但任何边框和填充都会使元素更宽。

border-box 更有意义，我发现它更容易推理。要将 border-box 应用于页面上的所有元素，请确保您的样式表中有类似此代码段的内容（无论如何，很多 CSS 重置都会包含此内容）：展望未来，我将只考虑使用 border-box，因为它是我们在 Kablamo 首选的盒子模型。边距值有时会与相邻元素的边距一起折叠，取它们之间的最大边距，而不是两者的组合。围绕这个的规则可能有些复杂，MDN 有一个文档描述它们： Mastering margin collapsing 元素通常按照它们在标记中出现的顺序排列在文档中。 display 属性控制元素和/或其子元素的布局方式。您可以在 MDN 上阅读有关显示的更多详细信息。 display: inline 允许内容像文本一样流动并适合其他内嵌内容，有点像俄罗斯方块 display: block 意味着元素有效地表现得像一个包含其所有子元素的矩形，该矩形包含其所有子元素，其高度增长以适应内容（宽度是默认情况下 100% 的父内容框）。实际上，在元素前后插入换行符。 display: inline-block 就像是 inline 和 block 的混合体。它的内容将包含在一个矩形内，但该矩形可以作为内联内容的一部分进行布局。

display: flex 和 display: grid 是更高级的布局算法，用于根据某些规则排列子项。这些是构建灵活、响应式布局的基础，值得深入学习。在 Flexbox Froggy 和 Grid Garden 中学习这些已经被游戏化了。 position 属性结合定位属性（顶部、左侧、右侧、底部、插入）影响元素相对于文档流的定位方式。元素默认为position:static，表示定位属性对元素的位置没有影响，元素正常布局。静态定位的元素也没有自己的堆叠上下文，这意味着设置 z-index 也将不起作用。 position: relative 类似于 position static，除了 top、left 和其他定位属性的作用类似于元素应该在视觉上布局的位置的偏移量（尽管兄弟元素和祖先元素的行为好像它仍然在原始位置）。 position: absolute 将元素从文档流中取出，祖先/兄弟姐妹将被布局，就好像该元素不存在一样。定位属性指定元素相对于最近的非静态父元素应该在视觉上布局的位置的偏移量。您可以添加 position: relative 以将其用作具有 position: absolute 的元素的锚点。 position: fixed 与定位属性一起意味着元素从文档的正常流中移除，而是相对于视口进行布局。如果指定了定位属性，它们将确保元素始终以与视口的偏移量进行布局（即它们看起来固定在适当的位置并且不会移动，即使在滚动时）。位置：粘性有点复杂，但您可以将其视为位置：相对和位置：固定的混合体。您可以在 MDN 上阅读有关确切机制的更多信息。

理想情况下，可重用和可组合组件的视觉方面应该是独立的。外边距通常是一个坏主意。外边框的边距折叠意味着组件布局的推理更复杂，有效边界与视觉边界（例如边框）不同。这可能意味着组件的行为不太可预测，您不能再将它们视为一个矩形。本质上，您想让您的组件易于包含在应用程序中，而不必担心它们是否会超出其简单的矩形。总的来说，我认为这些是大部分指导原则，我希望我能比实际更早地理解这些原则。我花了很多时间摸索，来回调整 CSS，并没有真正理解为什么事情没有按预期运行。