CSS转换和动画绝对是我需要知道的基础。我不经常需要使用它们，在使用时会忘记语法。值得庆幸的是，MDN上的参考资料帮助了我，我建议从使用CSS变换和使用CSS动画的指南开始。ZellLiew也有一篇很好的文章，为CSS过渡提供了很好的解释。关于动画可能令人困惑的事情之一是采取哪种方法。除了CSS支持的内容之外，你可能还需要涉及JavaScript，SVG或WebAnimationAPI，而这...

通常，新的Grid和Flexbox布局方法意味着我们可以使用比旧方法更少的媒体查询，因为它们非常灵活，可以响应视口或组件大小的变化，而无需我们更改元素的宽度。但是，有些地方需要添加一些断点来进一步增强设计。字体和排版与布局一样，网络上的字体使用在去年发生了巨大的变化。现在，可变字体，使单个字体文件具有无限的变化。要了解它们是什么以及它们如何工作，请观看MandyMichael的精彩简短演讲：可变...

通常，我会将对齐和布局分开，虽然大多数人把对齐当作Flexbox的一部分。对齐这些属性适用于所有布局方法上，应该在上下文去理解对齐，而不是考虑“Flexbox对齐”或“CSSGrid对齐”。对齐属性在大体上表现一样，但不同布局方式里会有一些差异。在MDN上，您可以深入了解盒对齐及其在Grid，Flexbox，多列和块布局中的实现方式。

十五年来，我们一直使用CSS布局，但没有设计一套布局系统。这已经改变了。我们现在拥有功能完备的布局系统，其中包括Grid和Flexbox，还有多列布局和旧布局方法也应用于实际目的。不要认为grid和flexbox等方法在某种程度上是竞争的。为了更好地使用布局，你有时会发现组件最好作为flex，有时作为Grid。有时，你想要多列流动布局。所有这些都是不错的选择。如果你觉得自己在与某些事...

CSS中的元素被描述为“在流中”或“脱离流”。流中的元素被赋予空间，并且空间被流中的其他元素所影响。如果通过浮动或定位元素使元素脱离流，则该元素的空间将不再受到其他流元素的影响。对于绝对定位的元素，是最明显的。如果你设置一个元素position:absolute，该元素会从流中脱离，你需要确保这个元素不会与流中的元素重叠，且不影响你布局的其他部分的可读性。<divclass="conta...

一旦文档的内容处于正常流程中，您可能希望更改其中一些内容的外观。你可以通过更改元素的格式上下文来完成此操作。举个一个非常简单的示例，如果你希望所有段落连在一起而不是从新行开始，你可以设置p元素的样式属性display:inline，将p元素由块级元素变成内联元素。本质上，格式化上下文定义了外部和内部类型。外部控制元素与页面上其他元素的行为，内部控制子元素的外观。例如，当你设置displ...

如果你的文档内容用一些HTML标记，你的文档将具有可读性。标题和段落会另起新的一行，单词组成句子时，它们之间有一个空格。标记是用来格式化的，像em不会破坏句子的流。句子会表现标准流，或块流布局。句子的每个部分都被描述为“在流中”，它知道句子其余内容，所以不会重叠。如果你去了解，而不是去反对这种行为，你会变得更加轻松。这是为什么从正确标记的HTML文档开始很有意义的原因之一，由于浏览器遵守正常流...

CSS里一切都是盒子。屏幕上显示的所有内容都有一个框，盒模型描述了如何计算该框的大小-将外边距，内边距和边框考虑进去。标准的CSS框模型接受给定元素的宽度，然后将内边框和边框添加到该宽度上——这意味着元素占用的空间大于给定的宽度。最近，我们已经能够选择使用IE盒模型，使得元素上的给定宽度作为屏幕上可见元素的宽度。任何内边距或边框都会从边缘插入框的内容。这对许多布局更有意义。在下面的演示中，我有...

层叠是指当元素应用了多个样式规则，哪个规则优先应用。如果你曾经遇到过无法理解为什么某些CSS似乎没有应用的情况，那可能是层叠没有运用好。层叠与继承紧密相关，继承定义了子元素可以继承父元素的样式属性。它还与特异性有关，不同的选择器具有不同的特异性，当有几个选择器可以应用于一个元素时，继承可以决定应用哪个规则。注意：为了理解所有这些内容，我建议阅读MDNCSS简介中的层叠和继承。如果你正在尝试将一...

对于CSS的大部分内容，你不需要特意去学习属性和值，你可以在需要时查找它们。然而，CSS中一些基础知识没有掌握好，你将很难去理解它。这些基础知识值得你花时间去理解，从长远看，它会帮你节省很多时间和少走弯路。选择器，不仅仅有类选择器的表现如标题所说的，它选择文档的某些部分，以便你可以将CSS规则应用于它。大多数人都熟悉使用class，或在直接使用HTML元素设置样式，比如body，但是还有很多...