我的第一个 CSS 我希望从前端开始时我对 CSS 有所了解

作者:糖果
发布时间:2024-04-08 06:51:58 (15天前)
来源:au/posts/2021/my-first-css

刚开始时，CSS 可能很难掌握。这看起来像是魔法，你很容易发现自己在玩鼹鼠游戏，调整一个属性，结果却让其他东西坏了。这是令人沮丧的，这是我很长一段时间的经历，然后事情突然似乎“咔嗒”一声。
回想这段时间，我认为有几个关键概念对最终使事情变得有意义并融合在一起至关重要。这些曾经是：
盒子模型（例如box-sizing , height , width , margin , padding）
布局（例如显示）
文档流和定位（例如position、top、left等）
在构建可重用和可组合的组件时，还需要记住一些有用的概念。

###### 一切都是矩形
我认为构建可视化 UI 组件的一个关键方法是，基本上所有内容都可以分解为页面上的一堆矩形。一次考虑页面的所有方面可能会让人不知所措，因此在精神上将事情分解为一系列矩形组件，并忽略与您当时正在处理的部分无关的所有内容。

###### 盒子模型
当你考虑一个元素的大小（即它的高度和宽度）时，有两种不同的模型可以用来测量它，你可以用box-sizing属性来调整它。
- box-sizing: content-box (浏览器默认)
元素的大小仅包括其内容，而不包括其padding或border。
- 框尺寸：边框框
元素的大小包括它的padding和border。当您使用content-box设置width: 100%时，内容将是父元素宽度的 100%，但任何边框和内边距都会使元素更宽。
- border-box更有意义，我发现它更容易推理。要将border-box应用于页面上的所有元素，请确保样式表中有类似此代码段的内容（无论如何，很多 CSS 重置都会包含此内容）：
    ```css
CSS
        *,：：前,：：后{
        盒子尺寸： 边框框;
        }

```
展望未来，我只会考虑border-box，因为它是我们在Kablamo首选的盒子模型。
- 边距值有时会与相邻元素的边距一起折叠，取它们之间的最大边距，而不是两者的组合。围绕这个的规则可能有些复杂，MDN有一个描述它们的文档：掌握边距折叠
- 边距和显式宽度/高度不适用于内联内容
- 边距不适用于表格单元格

###### 布局
元素通常按照它们在标记中出现的顺序排列在文档中。在显示属性控制元件和/或它的孩子们布置。您可以在MDN阅读更多有关显示的详细信息。
- display: inline允许内容像文本一样流动并适合其他内嵌内容，有点像俄罗斯方块
- display: block意味着元素有效地表现得像一个包含其所有子元素的矩形，该矩形的高度会随着内容的增加而增长（默认情况下，宽度是父内容框- 的 100%）。实际上，在元素前后插入换行符。
- display: inline-block就像是inline和block的混合体。它的内容将包含在一个矩形内，但该矩形可以作为内联内容的一部分进行布局。
- display: flex和display: grid是更高级的布局算法，用于根据某些规则排列子项。这些是构建灵活、响应式布局的基础，值得深入学习。在Flexbox Froggy和Grid Garden 中学习这些已经被游戏化了。

###### 文档流和定位
的位置属性影响元素是如何定位相对于所述文件的结合的定位性能（流动顶部，左，右，底部，插图）。
- 元素默认为position:static，表示定位属性对元素的位置没有影响，元素正常布局。静态定位的元素也没有自己的堆叠上下文，这意味着设置z-index也不会产生任何影响。
- position: relative类似于 position static，除了top、left和其他定位属性的作用类似于元素应该在视觉上布局的位置的偏移量（尽管兄弟元素和祖先元素的行为就像它仍然在原始位置一样）。
- position: absolute将元素从文档流中取出，祖先/兄弟姐妹将被布局，就好像该元素不存在一样。定位属性指定元素相对于最近的非静态父元素应该在视觉上布局的位置的偏移量。您可以添加position: relative以将其用作具有position: absolute元素的锚点。
- position: fixed与定位属性一起意味着元素从文档的正常流中移除，而是相对于视口进行布局。如果指定了定位属性，它们将确保元素始终以与视口的偏移量进行布局（即它们看起来固定在适当的位置并且不会移动，即使在滚动时）。
- position:sticky有点复杂，但您可以将其视为position:relative和position:fixed的混合体。您可以在MDN阅读更多关于确切机制的信息。

###### 可重用和可组合的组件
理想情况下，可重用和可组合组件的视觉方面应该是独立的。外边距通常是一个坏主意。外边框的边距折叠意味着组件布局的推理更复杂，有效边界与视觉边界（例如边框）不同。这可能意味着组件的行为不太可预测，您不能再将它们视为一个矩形。
本质上，您想让您的组件易于包含在应用程序中，而不必担心它们是否会超出其简单的矩形。

###### 求和
总的来说，我认为这些是大部分指导原则，我希望我能比实际更早地理解这些原则。我花了很多时间摸索，来回调整 CSS，并没有真正理解为什么事情没有按预期运行。

最终它确实为我“点击”了，我觉得我突然明白了一些事情。

1 条回复

动动手指，沙发就是你的了！

登录后才能参与评论