我写这篇文章是为了帮助你快速学习CSS，熟悉高级CSS主题。开发人员通常会很快认识到CSS是一个容易学习的东西，或者当您需要快速设计页面或应用程序的样式时，您唯一需要学习的东西。由于这个原因，它通常是在运行中学习的，或者当我们不得不使用它们时，我们会孤立地学习它们。当我们发现工具不能简单地做我们想做的事情时，这可能是一种巨大的挫折。本文将帮助您快速理解CSS，并对可用于设计页面和应用程序样式的主要现代功能有一个大致的了解。希望可以帮助你熟悉CSS，让你快速掌握这个伟大工具的使用，让你在Web上创造出惊艳的设计。点击这里获取这篇帖子的PDF/ePub/Mobi版本离线阅读CSS。它是级联样式表的缩写，是Web的主要组成部分之一。它的历史可以追溯到90年代，随着HTML的出现，它发生了很大的变化。由于我在CSS存在之前就一直在创建网站，所以我看到了它的演变。CSS是一个神奇的工具。在过去的几年里，它已经发展了很多，并推出了许多伟大的功能，如CSS网格，Flexbox和CSS自定义属性。这本手册是面向读者的。首先，新手。我从零开始简明全面地解释CSS，所以你可以用这本书从基础开始学习CSS。然后，专业上。CSS通常被认为是次要的东西，尤其是对于JavaScript开发者来说。他们知道CSS不是真正的编程语言，他们是程序员，所以他们不应该费心去用正确的方法学习CSS。我也为你写了这本书。接下来，那些已经知道CSS好几年，但是还没有机会在里面学到新东西的人。我们将广泛讨论CSS的新特性，这些特性将在未来十年构建网络。在过去的几年里，CSS得到了很大的改进和快速的发展。即使你不是以写CSS为生，了解CSS的工作原理也可以帮助你在不时需要理解的时候避免一些头疼的事情，比如调整网页的时候。感谢您获得这本电子书。我的目标是给你一个快速和全面的CSS概述。你可以通过电子邮件flavio@flaviocopes.com或推特@ flavio联系我。我的网站是flaviocopes.com。
CSS简介CSS简史将CSS添加到HTML页面选择器级联特定遗产导入属性选择器伪类伪元素颜色单位URL计算背景注释自定义属性字体排版框模型边界填充利润框大小显示定位浮动和清除Z索引CSS网格弹性框表格居中列表媒体查询和响应设计功能查询过滤转换动画标准化CSS错误处理用商前缀包装用于打印的CSS。CSS简介。CSS(层叠样式表的缩写)是我们用来设计HTML文件的语言，它告诉浏览器如何在页面上显示元素。
在本书中，我只讨论HTML文档的样式，尽管CSS也可以用来设计其他东西的样式。
一个CSS文件包含多个CSS规则。每个规则由两部分组成：
声明块选择器是一个字符串，用于标识页面上的一个或多个元素，遵循一种特殊的语法，我们将很快详细讨论这种语法。一个声明包含一个或多个声明，这些声明依次由属性和值对组成。这些都是我们在CSS中拥有的东西。仔细组织属性，关联它们的值，并使用选择器将它们附加到页面的特定元素上，这是这本电子书的全部论点。
CSS是什么样子的？CSS规则集的一部分叫做选择器，另一部分叫做声明。声明各种规则，每个规则由一个属性和值组成。在此示例中，p是选择器，并且应用了将20px的值设置为字体大小属性的规则：
p { font-size : 20px；}多个规则一个接一个堆叠：
p { font-size : 20px；}a { color:蓝色；}选择器可以定位一个或多个项目：
p，a { font-size : 20px；}它可以定位HTML标签，比如上面的，或者。包含特定类属性的my-classHTML元素，或者包含特定id属性的HTML元素#my-id。更高级的选择器允许您选择属性与特定值匹配的项目，或者响应伪类的项目(稍后将详细介绍)。
分号每个CSS规则都以分号结束。分号不是可选的，除了在最后一个规则之后。但是我建议在添加另一个属性而忘记在前一行添加分号时，始终使用它们以保持一致性并避免错误。
格式和缩进格式没有固定的规则。这个CSS是有效的：
p { font-size : 20px；} a { color:blue}但是很痛苦。坚持一些约定，正如你在上面的例子中看到的：坚持选择器和左括号。每个规则缩进2个空格，左括号在选择器的同一行，用空格隔开。正确和一致地使用间距和缩进有助于理解代码。
CSS简史在继续之前，我想简单回顾一下CSS的历史。CSS是出于网页风格的需要而开发的。在CSS引入之前，人们希望有一种方法来设计他们的网页，这些网页在当时看起来都非常相似和“学术”。对于个性化，你无能为力。HTML 3.2引入了将颜色内联定义为HTML元素属性的选项，以及像center和这样的表示标记字体，但这很快升级到一个远非理想的情况。让我们将所有与表示相关的内容从HTML转移到CSS中，这样HTML就可以再次成为定义文档结构的格式，而不是它在浏览器中的外观。CSS是不断发展的。随着新的惯用CSS技术的出现和浏览器的变化，你五年前用的CSS可能已经过时了。很难想象CSS是什么时候诞生的，网络有多大的不同。当时，我们有几个相互竞争的浏览器，主要是Internet Explorer或Netscape Navigator。页面HTML用于样式设置，有特殊的表示标签，比如粗体和特殊属性，现在大部分都不赞成使用。这意味着您的定制机会有限。大多数风格的决定都留给了浏览器。另外，你专门为他们中的一个人建立了一个网站，因为每个人都推出了不同的非标准标签，以提供更多的权力和机会。很快，人们意识到他们需要一种方法来设置可以在所有浏览器上工作的页面样式。在1994年提出最初的想法后，CSS的第一个版本于1996年发布，当时发布了CSS Level 1(“CSS 1”)提案。级别2(“CSS 2”)于1998年发布。从此，CSS三级的工作开始了。CSS工作组决定将每个功能拆分，在模块中单独处理。浏览器在实现CSS方面并不是特别快。我们不得不等到2002年第一个浏览器实现完整的CSS规范：IE for Mac，正如这篇CSS提示文章所描述的：https ://CSS-tricks . com/look-back-history-CSS/Internet Explorer从一开始就错误地实现了box模型，这导致了多年来试图在浏览器中一致地应用同一风格的痛苦。我们必须使用各种技巧和技术来使浏览器根据我们的意愿呈现内容。今天情况好多了，好多了。很多时候我们可以直接使用CSS标准，不用考虑怪癖，CSS从来没有这么强大过。现在我们不再有CSS的官方发布号，但是CSS工作组已经发布了目前被认为是稳定的并且准备好包含在浏览器中的模块的“快照”。这是2018年的最新快照：https ://www . w3 . org/tr/CSS-2018/cssly 2仍然是我们今天编写的CSS的基础，我们在它上面构建了更多的特性。
将CSS添加到HTML页面CSS以不同的方式附加到HTML页面。
1:使用链接标签链接标签是包含CSS文件的方式。这是使用CSS的首选方式，因为它的目的是：站点中的所有页面都包含一个CSS文件，更改这个文件中的一行会影响站点中所有页面的显示。要使用此方法，请添加一个link标记，其href属性指向要包含的CSS文件。你把它加到网站的标签上(而不是正文的标签):
和rel属性也是必需的类型，因为它们告诉浏览器我们链接到什么类型的文件。
2:使用样式标签，我们可以直接在标签中添加CSS，而不是使用链接标签指向包含CSS的单独样式表样式。这是语法：
使用这种方法，我们可以避免创建单独的CSS文件。我发现在将CSS“正式化”到一个单独的文件中之前，或者在文件中添加特殊的CSS行之前，这是一个很好的实验方法。
3:内联样式内联样式是向页面添加CSS的第三种方式。我们可以为任何HTML标签添加属性，并为其添加CSS。
.
示例：
.
选择器允许我们将一个或多个声明与页面上的一个或多个元素相关联。
基本的选择器假设我们在页面上有一个元素，我们想用黄色显示单词。我们可以使用这个选择器来定位这个元素，它使用页面中的标签p来定位所有元素。实现我们想要的一个简单的CSS规则是：
p { color:黄色；}每个HTML标签都有对应的选择器，例如：p，span，img。如果一个选择器匹配多个元素，页面中的所有元素都将受到更改的影响。HTML元素有两个属性，它们通常在CSS中用于将样式与页面上的特定元素相关联：class和id。两者有很大的区别：在HTML文档中，可以使用class在多个元素中重复相同的值，但是只能使用一次id。作为推论，您可以通过使用类来选择具有2个或更多特定类名的元素，但是您不能通过使用id来做到这一点。使用类。符号来标识，而ids使用#符号。使用类的示例：
罗杰。狗名{ color:黄色；}使用id的示例：
罗杰
#dog-name { color:黄色；}组合选择器到目前为止，我们已经学会了如何定位元素、类或id。下面介绍一个更强大的选择器。
使用类或id来定位元素。您可以将附加了类或id的特定元素作为目标。使用类的示例：
罗杰
p.dog-name { color:黄色；}使用id的示例：
罗杰
p #狗名{ color:黄色；}如果类或id已经为这个元素提供了方法，为什么还要这么做？您可能必须这样做，以获得更多的特异性。稍后我们会看到这意味着什么。
定位多个类。class-name如前所述，您可以使用来定位具有特定类的元素。通过组合由点(没有空格)分隔的类名，可以定位具有2个(或更多)类的元素。示例：
罗杰。dog-name.roger { color:黄色；}用同样的方法组合类和id，你可以组合一个类和一个ID。示例：
罗杰。狗名#罗杰{ color:黄色；}分组选择器您可以组合选择器，将同一个声明应用于多个选择器。为此，请用逗号将它们分隔开。示例：
我的狗叫：
罗格普。狗名{ color:黄色；}您可以在这些陈述中添加空格，使其更加清晰：
p，狗名{ color:黄色；}使用选择器跟踪文档树我们已经学习了如何使用标记名、类或id来定位页面中的元素。您可以通过组合多个项目来创建更具体的选择器，以遵循文档树结构。例如，如果在p标记中嵌套了一个span标记，则可以定位该标记，而无需对其span不包含在标记中的p标记应用样式：
你好！我的狗叫：罗杰
黄色；}看看我们怎么在两个标记中标注p和span。即使右边的元素有多个深度级别，这也是有效的。要使第一级依赖关系严格，可以在两个标记之间使用符号：
黄色；}在这种情况下，如果aspan不是元素的第一个子p元素，则不会应用新颜色。直属子女将应用以下风格：
这是黄色的这不是黄色的
相邻的兄弟选择器让我们只能在特定元素之前设计元素的样式。我们使用运算符来实现这一点：例如：
黄色；}这将为元素前面的所有span元素分配一个黄色的P:
这是一个段落
这是一个黄色范围，我们可以使用更多选择器：
属性伪类选择器伪元素选择器我们将在下一节中找到关于它们的所有信息。
级联是CSS的一个基本概念。毕竟它的名字本身就是CSS的第一个C——级联样式表。这一定是一件重要的事情。这是什么意思？级联是确定应用于页面上每个元素的属性的过程或算法。试图从不同地方定义的CSS规则列表中收敛。这样做是考虑到：
特定遗产文件中的顺序。它还负责解决冲突。应用于同一元素的同一属性的两个或多个竞争CSS规则需要根据CSS规范进行详细说明，以确定需要应用哪一个。即使只有一个CSS文件被加载到你的页面上，也有其他的CSS文件会成为这个过程的一部分。我们有浏览器(用户代理)CSS。浏览器有一套默认规则，每个浏览器都不一样。然后你的CSS就发挥作用了。然后浏览器应用任何用户样式表，浏览器扩展也可以应用这些样式表。所有这些规则都将在页面呈现时发挥作用。现在我们将看到特异性和继承性的概念。
特定性当一个元素被多个规则定位时会发生什么，这些规则有不同的选择器并影响相同的属性？例如，让我们来谈谈这个元素：
罗杰
我们可以有。狗名{ color:黄色；}和另一个目标规则p，它将颜色设置为另一个值：
p { color:红色；}还有一个是p.dog-name的。哪个规则将优先于其他规则，为什么？输入特异性。更具体的规则会胜出。如果两个或多个规则具有相同的特征，则最后出现的规则优先。有时候，实践中比较具体的内容会让初学者感到有些困惑。我想说，对于那些不经常检查这些规则或者只是忽略它们的专家来说，这也会让他们感到困惑。
如何计算特异性特异性是使用约定来计算的。我们有4个插槽，每个插槽都以0: 0 0 0 0 0 0 0 0开始。左边的槽最重要，最右边的槽最不重要。就像它适用于十进制的数字一样：1000高于0，100。
1槽最右边的第一个槽最不重要。当我们有一个元素选择器时，我们将增加这个值。是元素名称。如果规则中有多个元素选择器，则相应地增加存储在该槽中的值。示例：
p { }/* 0001 */span { }/* 0001 */p span { }/* 0002 */p span { }/* 0002 */p span { }/* 0003 */slot 2第二个slot增加了三样东西：
类选择器伪类选择器属性选择器每当一个规则满足其中一个，我们就增加从右边数第二列的值。示例：name { }/* 0010 */. users . name { }/* 0020 */[href $=’。pdf ‘]{ }/* 0010 */3360 hover { }/* 0010 */当然，槽2选择器可以和槽1选择器组合使用：
P.name {}/* 0011 */a [href $=’。pdf’] {}/* 0011 */。图片img : hover { }/* 0021 */该类的一个很好的窍门就是可以重复同一类，增加针对性。例如：name { }/* 0010 */. name . name { }/* 0020 */. name . name { }/* 0030 */Slot 3 Slot 3包含了最重要的东西，它会影响CSS文件中的CSS特异性：id。每个元素都可以通过id分配一个属性，我们可以用它来定位样式表中的元素。示例：
# name {}/* 0100 */。用户# name { }/* 0110 */# name span { }/* 0101 */Slot 4 Slot 4受内联样式影响。任何内联样式都将优先于在外部CSS文件中定义的规则，或者在样式头的标记中定义的规则。示例：
试验
/* 1 0 0 0 */即使CSS中的任何其他规则定义了颜色，也将应用此内联样式规则。除了一种情况：3354如果！重要，它将填充槽5。
如果重要性规则以结尾，那么特殊性就无关紧要了！重要事项：
p { font-size: 20px！重要；}此规则将优先于任何更具体的规则。根据具体规则，补充！重要说明CSS规则将使该规则比任何其他规则都更重要。另一个规则可以优先的唯一方法是！重要在其他不太重要的槽中也具有更高的特异性。
一般来说，你应该使用所需数量的特异性，但不能更多。这样，你就可以让其他的选择器去覆盖前面规则设置的规则，而不会发疯。重要是CSS提供的一个有争议的工具。许多CSS专家反对使用它。我发现自己在用，尤其是在尝试某种风格的时候，而CSS规则有那么多特殊性，我需要用到它！重要的是让浏览器应用我的新CSS。但是一般来说，重要的不应该在你的CSS文件中出现。使用id属性设置CSS样式也引起了很多争议，因为它具有非常高的特异性。一个很好的替代方法是使用类，类不太具体，所以更容易使用，功能也更强大(可以为一个元素设置多个类，一个类可以重用很多次)。
计算特异性的工具您可以使用网站https://specificity.keegan.st/为您自动执行特定的计算。这很有用，尤其是如果你想弄清楚事情，因为它可以是一个很好的反馈工具。
当你在CSS中为一个选择器设置某些属性时，它们将被该选择器的所有子元素继承。我说了一些，因为不是所有的属性都表现出这种行为。这是因为有些属性是可以继承的。这有助于我们更简洁地编写CSS，因为我们不必再次在每个子节点上显式设置该属性。其他一些属性不被继承更有意义。考虑字体：您不需要应用于字体系列页面的每个标签。您设置了body标签字体，每个子元素都将继承它和其他属性。另一方面，这个属性对于继承是没有意义的。
继承的属性这是继承属性的列表。此列表并不全面，但这些规则只是您可能使用的最常用的规则：
折叠边框间距副标题颜色光标方向空单元格字体系列字体大小字体样式字体变化字体粗细字体大小调整字体拉伸字体字母间距线高列表样式图像列表样式位置列表样式类型列表孤立引号标签大小文本对齐文本对齐最后一个文本装饰颜色文本缩进文本对齐文本阴影文本转换可见性空白窗口断字间距我是从这个站点得到的关于CSS继承的文章。
强制属性继承如果您有一个默认情况下不被继承的属性，并且您希望它在子代中被继承，该怎么办？在子项中，将属性值设置为特殊关键字inherit。示例：
车身{背景色：黄色；}p { background-color:继承；}强制属性不要继承。相反，你可能继承了一个属性，你想避免这种情况。您可以使用revert关键字来恢复它。在这种情况下，该值将恢复为浏览器在其默认样式表中提供的原始值。实际上，这很少使用，大多数时候你只需要为这个属性设置另一个值来覆盖这个继承的值。
其他特殊值除了我们刚刚看到的inherit和revert特殊关键字之外，您还可以将任何属性设置为：
初始：如果可用，使用默认浏览器样式表。如果不是，并且默认情况下继承属性，则继承值。否则，什么都不做。未设置：如果默认情况下属性是继承的，则它是继承的。否则，什么都不做。从任何CSS文件导入，您可以使用这个@import指令导入另一个CSS文件。你可以这样使用它：
@import url(myfile.css)url()可以管理绝对或相对url。你需要知道的一件重要事情是，@import指令必须放在文件中任何其他CSS之前，否则它们将被忽略。您可以使用媒体描述符仅在特定媒体上加载CSS文件：
@导入URL(my file . CSS)all；@导入url(myfile-screen.css)屏幕；@导入url(myfile-print.css)打印；选择器我们已经介绍了几种基本的CSS选择器：使用元素选择器，class，id，如何组合它们，如何定位多个类，如何在同一规则中设置多个选择器的样式，如何使用child和direct child跟随页面层次选择器和相邻兄弟。在这一节中，我们将分析属性选择器，在接下来的两节中，我们将讨论伪类和伪元素选择器。
属性存在选择器第一种选择器类型是属性存在选择器。我们可以使用语法来检查元素是否有属性。将选择页面中所有具有属性的标签，不管它们的值如何：[]p[id]pid
P[id] {/*.*/}精确属性值选择器在括号中，您可以使用它来检查属性值=，只有当属性与指定的精确值匹配时，才会应用CSS:
P[id=’my-id’] {/*.*/}匹配属性值部分虽然=让我们检查一下确切的值，我们还有其他运算符：
*=检查属性是否包含部分=检查属性是否以部分开头$=检查属性是否以部分结尾|=检查属性是否以部分开头，后面跟一个破折号(例如类中常见的)，或者只包含一个部分~=检查属性中是否包含该部分，但用空格将其与其余部分隔开。我们提到的所有检查都是区分大小写的。如果您在右括号前添加一个，检查将不区分大小写。许多浏览器都支持它，但并非所有浏览器都支持。请检查https://caniuse.com/#feat=css-case-insensitive.
伪伪类(Pseudo-pseudo-class)是一个预定义的关键字，用于根据元素的状态选择元素，或者用于特定的子元素。它们以冒号：开头。它们可以用作选择器的一部分，对于设置活动链接或访问链接的样式非常有用，例如，在悬停、聚焦或定位第一个子项或奇数行时更改样式。在很多情况下非常方便。这些是您可能使用的最流行的伪类：
举个例子吧。实际上，是一个普通的。您想要设置链接的样式，所以您创建了一个CSS规则来定位这个A元素：
黄色；}一切似乎都很好，直到你点击一个链接。当您单击该链接时，它将恢复为预定义的颜色(蓝色)。然后，当您打开链接并返回页面时，链接现在是蓝色的。为什么会这样？因为点击后链接会改变状态，进入：主动状态。当它被访问时，它处于：被访问状态。永远，直到用户清除浏览历史。因此，要正确地将状态中的所有链接变成黄色，您需要编写
a、a :已访问，a:active { color:黄色；}:nth-child()特别值得一提。它可以用来定位奇数或偶数子：nth子(偶数)与3360nth子(奇数)和。它通常用于列表中，使奇数行不同于偶数行：
ul : th-child(奇数){ color: white背景色：黑色；}你也可以用它来定位一个元素的前3个子元素，n th-child(-n ^ 3)。或者可以在每5个元素中设置1个style :n-child(5n)。有些伪类只用于打印，比如：First、Left、Right，这样你就可以定位首页、全左页、全右页，它们的样式通常会略有不同。
元素伪元素用于样式化元素的特定部分。它们以双冒号：3360开头。
有时您会发现它们在字段外带有冒号，但这只是出于向后兼容的原因而支持的语法。您应该使用两个冒号来区分它们和伪类。
:before和：after可能是最常用的伪元素。它们用于在元素之前或之后添加内容，如图标。这是一个伪元素列表：
举个例子吧。假设你想把一个段落的第一行字体做得稍微大一点，这在排版中很常见：
p :一线{ font-size : 2 rem；}或者，您可能希望第一个字母更粗一些：
p:first第一个字母{ font-weight : bold；}:after和：before不是很直观。我记得当我必须添加图标时，我使用CSS。您可以指定内容属性，在元素前后插入任何类型的内容：
p : before { content : URL(/my image . png)；} . my elements : before { content : ‘嘿嘿！’；}颜色默认情况下，网页浏览器渲染的HTML页面在使用的颜色方面是非常悲哀的。我们有白色背景，黑色和蓝色的链接。就是这样。幸运的是，CSS允许我们在设计中添加颜色。我们有这些属性：
颜色背景-颜色边框-颜色它们都接受一个颜色值，可以是不同的形式。
命名颜色首先，我们有定义颜色的CSS关键字。CSS从16开始，但是今天有很多颜色名称：
aliceblueantiquewhiteaquanablueazurebeigebisqueblackblanchedalmondblueuviolet brownburlywood cadetbluechartreusechocolatoral corn flower blue cornsi lkcrimson cyandark blue dark dark green dark grey dark khakid ark magenta dark olivegreendark orangdark orchid dark dark dark salmondarksaegreen和arkslate blue dark它们是在CSS颜色模块，级别4中定义的。它们不区分大小写。维基百科有一个漂亮的表格，可以让你根据它的名字选择最完美的颜色。命名颜色并不是唯一的选择。
Rgb和RGBa您可以使用这个RGB()函数根据颜色的RGB表示来计算颜色，它根据颜色的红绿蓝部分来设置颜色。从0到255:
p { color: rgb(255，255，255)；/*白色*/background-color: rgb(0，0，0)；/* black */}rgba()允许您为输入透明部分添加Alpha通道。这可以是0到1之间的一个数字：
p { background-color: rgb(0，0，0，0.5)；}十六进制记数法的另一个选项是用十六进制记数法表示颜色的RGB部分，由3块组成。黑色，rgb(0，0，0)表示为#000000或#000(如果两者相等，我们可以将2个数字简化为1)。白色，rgb(255，255，255)可以表示为#ffffff或者#fff。十六进制记数法允许我们用两位数来表示从0到255的数字，因为它们可以是从0到“15”(F)。我们可以在末尾添加1或2位数字来添加alpha通道，例如# 0000033。并不是所有的浏览器都支持缩写符号，所以请全部使用6位数字来表示RGB部分。
这是对CSS的更新。HSL=色调饱和亮度。在这个表示中，黑色是hsl(0，0%，0%)，白色是hsl(0，0%，100%)。如果你因为过去的知识，对HSL比对RGB更熟悉，那么你绝对可以用。您还可以hsla()将alpha通道添加到混音中，这也是一个从0到1的数字：hsl(0，0%，0%，0.5)
在unit CSS中你每天都会用到的一个东西就是unit。它们用于设置长度、填充、边距、对齐元素等。像px，em，rem或者百分比之类的东西。他们无处不在。还有一些比较隐晦的。我们将在本节中逐一介绍。
像素是使用最广泛的测量单位。像素实际上与屏幕上的物理像素无关，因为它因设备而异(想想高DPI设备与非retina设备)。有一个惯例使这个单元在设备上一致地工作。
百分比是另一个非常有用的衡量标准。百分比允许您将值指定为此父元素的相应属性的百分比。示例：父{ width: 400px}.子{ width : 50%；/*=200px */}真实世界的度量单位我们有那些从外部世界翻译过来的度量单位。大部分在屏幕上没什么用，但是对于打印样式表很有用。它们是：
Cm(映射到37.8像素)mm mm mm (0.1cm)q quarter mm in inch(映射到96像素)pt one point (1英寸=72点)pc pica (1 pica=12点)相对单位em是分配给此元素的字体大小值，因此其确切值会因元素而异。不根据使用的字体变化，只根据字号变化。在排版中，它测量字母m的宽度。Rem类似于em，但它不改变当前元素的字体大小，而是使用根元素(html)的字体大小。您只需设置一次字体大小，就能使rem在所有页面上保持一致。Ex就像em，但是插入是为了测量宽度，它测量字母m的高度，X可以根据使用的字体和字体大小来改变。Ch类似于ex，但它不是测量其高度，而是测量(零)x的宽度。0视口单位vw视口宽度单位表示视口宽度的百分比。50vw表示50%的视口宽度。vh视口高度单位表示视口高度的百分比。50vh表示视口高度的50%。Vmin视口最小单位以百分比形式表示高度或宽度之间的最小值。30vmin是当前宽度或高度的30%，具体取决于哪个较小的vmax视口最大单位以百分比表示最大高度或宽度。30vmax是当前宽度或高度的30%，具体取决于哪个更大的小数单位fr是小数单位。它们在CSS网格中用于将空间分割成多个部分。我们将在后面的CSS网格环境中讨论它们。
Url当我们谈到背景图片@import时，我们使用这个URL()函数来加载资源：
p { background-image : URL(test . png)；}在本例中，我使用了相对URL，它在定义CSS文件的文件夹中搜索文件。我可以退一步。
p { background-image: url(./test . png)；}或者进入文件夹。
p { background-image: url(子文件夹/test . png)；}或者我可以从托管CSS的域的根目录开始加载文件：
p { background-image : URL(/test . png)；}或者我可以使用绝对URL来加载外部资源：
p { background-image : URL(https://my site . com/test . png)；} Calculate这个calc()函数允许你对数值进行基本的数学运算。当您需要从百分比中增加或减去长度值时，它特别有用。它是这样工作的：
p { max-width : calc(80%-100px)}它返回一个长度值，所以你可以在任何你想要像素值的地方使用它。你可以执行。
加法减法使用-乘法使用*除法使用/A警告：在加法和减法中，运算符周围的空格是强制的，否则不能按预期工作。
示例：
P { max-width 3360 calc(50%/3)} P { max-width 3360 calc(50% 3px)}背景您可以使用几个CSS属性来更改元素的背景：
背景-颜色背景-图像背景-剪辑背景-位置背景-原点背景-重复背景-附件背景-大小和速记属性背景，它允许我们缩短定义并将其分组在一行中。背景色接受颜色值，该值可以是颜色关键字之一，也可以是rgb或hsl值：
p {背景色：黄色；} p { background-color : # 333；}通过指定图像位置URL，您可以使用图像作为元素的背景，而不是颜色：
p { background-image : URL(image . png)；}background-clip允许您确定使用背景图像或颜色的区域。默认值是border-box，它延伸到边框的外边缘。其他值有
Padding-box扩展背景以填充边缘，content-box将背景扩展到没有边框的内容边缘，并在没有填充的情况下应用inherit的父值。当使用图像作为背景时，需要使用background-position属性来设置放置图像的位置：left、right和center都是X轴的有效值，而top和bottom是Y轴的有效值：
p { background-position:右上角；}如果图像比背景小，则需要使用背景-重复。repeat-x、repeat-y或repeat应该在所有轴上吗？最后一个是默认值。另一个值是不重复。Background-origin允许您选择应用背景的位置：使用包含填充的整个元素(默认)填充框，使用包含边框的整个元素，对没有填充的内容框使用边框框。我们可以将背景-附件背景附加到视口，以便滚动不会影响背景：
p {背景-附件：已修复；}默认情况下，该值是scroll。还有一个值，local。可视化他们行为的最好方法是这个代码笔。最后一个背景属性是背景大小。我们可以使用3个关键字自动：覆盖和包含。Auto是默认值。覆盖扩展图像，直到整个元素被背景覆盖。当一维(x或y)覆盖图像的整个最小边缘时，Contain停止扩展背景图像，因此它完全包含在元素中。您还可以指定一个长度值，如果是这样，它将设置背景图像的宽度(并且自动定义高度):
p {背景-大小： 100%；}如果指定两个值，一个是宽度，另一个是高度：
p { background-size : 800 px 600 px；}速记属性背景允许缩短定义并将它们分组在一行上。这是一个例子：
p { background: url(bg.png)左上角无重复；}如果您使用图像并且不能载入它们，您可以设置备份颜色：
p { background: url(image.png)黄色；}您也可以将渐变设置为背景：
p { background:线性渐变(#fff，# 333)；} Comment CSS使您能够在CSS文件或样式头的标记中编写注释。格式是/*这是一个comment */C风格(或者JavaScript风格，如果你喜欢)的注释。这是多行评论。在添加结束*/标记之前，开始标记之后的所有行都将被注释掉。示例：
# name { display: block} /*不错的规则！*//* # name { display : block；} */# name { display : block；/* color:红色；*/}CSS没有内联注释，就像C或JavaScript中的//一样。但是请注意，——如果您//在规则前添加，该规则将不会被应用。看来评论是有根据的。实际上，CSS检测到一个语法错误，由于它的工作方式，它会忽略错误的行，直接进入下一行。知道这个方法可以让你有目的地写行内注释，尽管你必须小心，因为你不能像在块注释中那样添加随机文本。例如：
//规则不错！# name { display: block}在这种情况下，由于CSS的工作原理，#name规则实际上已经被注释掉了。如果你觉得这很有趣，你可以在这里找到更多的细节。为了避免伤害自己，请避免使用行内注释和依赖块注释。
浏览器支持根据Can I Use，浏览器对CSS变量的支持非常好。CSS变量将继续存在，如果不需要支持旧版本的Internet Explorer和其他浏览器，可以立即使用它们。如果需要支持较老的浏览器，可以使用PostCSS或Myth等库，但会失去通过JavaScript或浏览器开发工具与变量交互的能力，因为它们被转换成了良好的旧式不变CSS(因此，失去了CSS变量的大部分功能)。
CSS变量区分大小写。这个变量：
-宽度： 100px；不像这样：
-宽度： 100px；CSS变量中的数学要在CSS变量中执行数学运算，需要使用calc()，例如：
: root {-default-left-padding : calc(10px * 2)；}使用CSS变量的媒体查询在这里没什么特别的。CSS变量通常适用于媒体查询：
body {-width : 500 px；} @媒体屏幕和(max-width: 1000px)和(min-width : 700 px){-width : 800 px；}.container { width : var(-width)；}为var()设置备份值var()接受第二个参数，该参数是变量值未设置时的默认备份值：容器{ margin : var(-default-margin，30px)；}字体在网络初期，你只有几种字体可以选择。幸运的是，今天您可以在页面上加载任何类型的字体。多年来，CSS在字体方面获得了许多好的功能。字体属性是许多属性的缩写：
font-family font-weight font-stretch font-style font-size我们先来看看每一种，然后再介绍字体。然后我们将讨论如何使用@ @importor @font-face或者通过加载字体样式表来加载自定义字体。
设置元素将使用的字体系列。为什么是“家人”？因为我们知道的字体实际上是由几个子字体组成的，它们提供了我们需要的所有样式(粗体、斜体、浅……)。这是我的Mac的字体簿应用程序中的一个例子。——Fira代码字体系列包含以下几种特殊字体：
此属性允许您选择特定的字体，例如：
body { font-family : Helvetica；}可以设置多个值，所以如果第一个选项因为某种原因无法使用(比如在机器上找不到，或者下载单词父元素）或使用数字关键字
100200300400，映射到normal500600700 映射到bold800900其中 100 是最轻的字体，而 900 是最粗的。其中一些数值可能不会映射到字体，因为必须在字体系列中提供。当缺少一个时，CSS 会使该数字至少与前一个一样粗体，因此您可能有指向相同字体的数字。
font-stretch允许您选择字体的窄面或宽面（如果可用）。这很重要：字体必须配备不同的面。允许的值从窄到宽：
ultra-condensedextra-condensedcondensedsemi-condensednormalsemi-expandedexpandedextra-expandedultra-expandedfont-style允许您将斜体样式应用于字体：
p { font-style: italic;}此属性还允许值oblique和normal。italic使用和之间几乎没有区别（如果有的话）oblique。第一个对我来说更容易，因为 HTML 已经提供了一个i表示斜体的元素。
font-size此属性用于确定字体的大小。您可以传递 2 种值：
长度值，如px,em等rem，或百分比预定义的值关键字在第二种情况下，您可以使用的值是：
xx-小x-小小的中等的大的x-大xx-大更小（相对于父元素）更大（相对于父元素）用法：
p { font-size: 20px;}li { font-size: medium;}font-variant此属性最初用于将文本更改为小型大写字母，它只有 3 个有效值：
normalinheritsmall-caps小型大写字母意味着文本在其大写字母旁边以“较小的大写字母”呈现。
font该font属性使您可以在一个字体中应用不同的字体属性，从而减少混乱。我们必须至少设置 2 个属性，font-size并且font-family，其他的都是可选的：
body { font: 20px Helvetica;}如果我们添加其他属性，它们需要按正确的顺序放置。这是顺序：
font: ;例子：
body { font: italic bold 20px Helvetica;}section { font: small-caps bold 20px Helvetica;}使用加载自定义字体@font-face@font-face允许您添加新的字体系列名称，并将其映射到包含字体的文件。这种字体将由浏览器下载并在页面中使用，它对网络上的排版产生了根本性的改变——我们现在可以使用任何我们想要的字体。我们可以将@font-face声明直接添加到我们的 CSS 中，或者链接到专门用于导入字体的 CSS。在我们的 CSS 文件中，我们也可以@import用来加载那个 CSS 文件。@font-face声明包含我们用来定义字体的几个属性，包括字体的srcURI（一个或多个 URI）。这遵循同源策略，这意味着只能从当前源（域+端口+协议）下载字体。字体通常采用以下格式
woff（网页开放字体格式）woff2（Web 开放字体格式 2.0）eot（嵌入式开放式）otf（OpenType 字体）ttf（TrueType 字体）如上所示，以下属性允许我们为要加载的字体定义属性：
font-familyfont-weightfont-stylefont-stretch性能说明当然，加载字体会影响性能，您在创建页面设计时必须考虑这一点。
排版我们已经讨论过字体，但还有更多关于样式文本的内容。在本节中，我们将讨论以下属性：
text-transformtext-decorationtext-alignvertical-alignline-heighttext-indenttext-align-lastword-spacingletter-spacingtext-shadowwhite-spacetab-sizewriting-modehyphenstext-orientationdirectionline-breakword-breakoverflow-wraptext-transform此属性可以转换元素的大小写。有 4 个有效值：
capitalize将每个单词的首字母大写uppercase将所有文本大写lowercase小写所有文本none禁用转换文本，用于避免继承属性例子：
p { text-transform: uppercase;}text-decoration此属性用于为文本添加装饰，包括
underlineoverlineline-throughblinknone例子：
p { text-decoration: underline;}您还可以设置装饰的样式和颜色。例子：
p { text-decoration: underline dashed yellow;}有效的样式值为solid, double, dotted, dashed, wavy。您可以在一行中完成所有操作，或使用特定属性：
text-decoration-linetext-decoration-colortext-decoration-style例子：
p { text-decoration-line: underline; text-decoration-color: yellow; text-decoration-style: dashed;}text-align默认情况下，文本对齐具有start值，这意味着文本从包含它的框的“开始”，原点 0, 0 开始。这意味着从左到右的语言是左上角，而从右到左的语言是右上角。可能的值为start, end, left, right, center, justify（很高兴在行尾有一致的间距）：
p { text-align: right;}vertical-align确定内联元素如何垂直对齐。我们有这个属性的几个值。首先，我们可以指定一个长度或百分比值。这些用于将文本对齐到高于或低于父元素基线的位置（使用负值）。然后我们有关键字：
baseline（默认），将基线与父元素的基线对齐sub使元素下标，模拟subHTML 元素结果super使元素上标，模拟supHTML 元素结果top将元素的顶部与行的顶部对齐text-top将元素的顶部与父元素字体的顶部对齐middle将元素的中间对齐到父行的中间bottom将元素的底部与行的底部对齐text-bottom将元素的底部与父元素字体的底部对齐line-height这允许您更改线条的高度。每一行文本都有一定的字体高度，但行之间垂直有额外的间距。那是行高：
p { line-height: 0.9rem;}text-indent按设定的长度或段落宽度的百分比缩进段落的第一行：
p { text-indent: -10px;}text-align-last默认情况下，段落的最后一行与该text-align值对齐。使用此属性来更改该行为：
p { text-align-last: right;}word-spacing修改每个单词之间的间距。您可以使用normal关键字来重置继承的值，或使用长度值：
p { word-spacing: 2px;}span { word-spacing: -0.2em;}letter-spacing修改每个字母之间的间距。您可以使用normal关键字来重置继承的值，或使用长度值：
p { letter-spacing: 0.2px;}span { letter-spacing: -0.2em;}text-shadow对文本应用阴影。默认情况下，文本现在有阴影。这个属性接受一个可选的颜色，以及一组设置的值
阴影与文本的 X 偏移量阴影与文本的 Y 偏移量模糊半径如果未指定颜色，阴影将使用文本颜色。例子：
p { text-shadow: 0.2px 2px;}span { text-shadow: yellow 0.2px 2px 3px;}white-space设置 CSS 如何处理元素内的空白、新行和制表符。折叠空白的有效值是：
normal折叠空白。当文本到达容器末端时，在必要时添加新行nowrap折叠空白。当文本到达容器末尾时不添加新行，并禁止添加到文本中的任何换行符pre-line折叠空白。当文本到达容器末端时，在必要时添加新行保留空白的有效值为：
pre保留空白。当文本到达容器末尾时不添加新行，但保留添加到文本的换行符pre-wrap保留空白。当文本到达容器末端时，在必要时添加新行tab-size设置制表符的宽度。默认情况下它是 8，你可以设置一个整数值来设置它所需要的字符空间，或者一个长度值：
p { tab-size: 2;}span { tab-size: 4px;}writing-mode定义文本行是水平还是垂直布局，以及块的前进方向。您可以使用的值是
horizontal-tb（默认）vertical-rl内容是垂直布局的。新行放在前一行的左侧vertical-lr内容是垂直布局的。新行放在前一行的右侧hyphens确定在换行时是否应自动添加连字符。有效值为
none（默认）manual仅当已经存在可见连字符或隐藏连字符（特殊字符）时才添加连字符auto确定文本可以有连字符时添加连字符。text-orientation当writing-mode处于垂直模式时，确定文本的方向。有效值为
mixed是默认值，如果一种语言是垂直的（如日语），它会保留该方向，同时旋转用西方语言编写的文本upright使所有文本垂直定向sideways使所有文本水平方向direction设置文本的方向。有效值为ltr和rtl：
p { direction: rtl;}word-break此属性指定如何在单词中换行。
normal（默认）表示文本仅在单词之间断开，而不是在单词内部break-all浏览器可以断词（但不添加连字符）keep-all抑制软包装。主要用于 CJK（中文/日文/韩文）文本。说到 CJK 文本，该属性line-break用于确定文本行的中断方式。我不是这些语言的专家，所以我会避免涉及它。
overflow-wrap如果一个词太长而无法容纳一行，它可能会溢出容器之外。
此属性也称为word-wrap，尽管这是非标准的（但仍可用作别名）
这是默认行为 ( overflow-wrap: normal;)。我们可以用：
p { overflow-wrap: break-word;}在行的确切长度处打破它，或
p { overflow-wrap: anywhere;}如果浏览器在更早的地方发现有软包装机会。在任何情况下都不会添加连字符。此属性与 非常相似word-break。我们可能想在西方语言上选择这个，而word-break对非西方语言有特殊处理。
盒子模型每个 CSS 元素本质上都是一个盒子。每个元素都是一个通用框。盒子模型基于一些 CSS 属性解释了元素的大小。从内到外，我们有：
内容区填充边界利润可视化盒子模型的最佳方法是打开浏览器 DevTools 并检查它的显示方式：
在这里，您可以看到 Firefox 如何告诉我span我突出显示的元素的属性。我右键单击它，按下 Inspect Element，然后转到 DevTools 的 Layout 面板。看，浅蓝色的空间是内容区域。围绕它的是填充，然后是边框，最后是边距。默认情况下，如果您在元素上设置宽度（或高度），它将应用于内容区域。所有的内边距、边框和边距计算都是在值之外完成的，因此在进行计算时必须牢记这一点。稍后您将看到如何使用 Box Sizing 更改此行为。
边界边框是填充和边距之间的薄层。通过编辑边框，您可以使元素在屏幕上绘制其周边。您可以使用这些属性处理边框：
border-styleborder-colorborder-width该属性border可以用作所有这些属性的简写。border-radius用于创建圆角。您还可以使用图像作为边框，这是由它赋予您的能力border-image及其特定的单独属性：
border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat让我们从border-style.
边框样式该border-style属性允许您选择边框的样式。您可以使用的选项是：
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden查看此 Codepen以获取实时示例。样式的默认值为none，因此要使边框完全显示，您需要将其更改为其他内容。solid大多数时候是一个不错的选择。您可以使用属性为每个边缘设置不同的样式
border-top-styleborder-right-styleborder-bottom-styleborder-left-style或者您可以使用border-style多个值来定义它们，使用通常的 Top-Right-Bottom-Left 顺序：
p { border-style: solid dotted solid dotted;}边框宽度border-width用于设置边框的宽度。您可以使用预定义值之一：
thinmedium（默认值）thick或以像素、em 或 rem 或任何其他有效长度值表示值。例子：
p { border-width: 2px;}您可以使用 4 个值分别设置每条边的宽度（Top-Right-Bottom-Left）：
p { border-width: 2px 1px 2px 1px;}或者您可以使用特定的边缘属性border-top-width, border-right-width, border-bottom-width, border-left-width.
边框颜色border-color用于设置边框的颜色。如果您不设置颜色，则默认情况下边框使用元素中文本的颜色进行着色。您可以将任何有效的颜色值传递给border-color.例子：
p { border-color: yellow;}您可以使用 4 个值分别设置每条边的颜色（Top-Right-Bottom-Left）：
p { border-color: black red yellow blue;}或者您可以使用特定的边缘属性border-top-color, border-right-color, border-bottom-color, border-left-color.
边框速记属性提到的这 3 个属性border-width,border-style和border-color可以使用简写属性 进行设置border。例子：
p { border: 2px black solid;}您还可以使用特定于边缘的属性border-top, border-right, border-bottom, border-left。例子：
p { border-left: 2px black solid; border-right: 3px red dashed;}边界半径border-radius用于为边框设置圆角。您需要传递一个值，该值将用作圆角的圆的半径。用法：
p { border-radius: 3px;}您还可以使用特定于边缘的属性border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius。
使用图像作为边框边框的一件非常酷的事情是能够使用图像来设置它们的样式。这让您可以非常有创意地使用边框。我们有 5 个属性：
border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat和速记border-image。我不会在这里详细介绍，因为作为边框的图像需要像我在这一小章中所做的那样进行更深入的介绍。我建议阅读边框图像上的 CSS 技巧年鉴条目以获取更多信息。
填充CSS 属性通常在paddingCSS 中用于在元素的内侧添加空间。记住：
margin在元素边框外添加空间padding在元素边框内添加空间特定的填充属性padding有 4 个相关属性可以一次改变单个边缘的填充：
padding-toppadding-rightpadding-bottompadding-left它们的用法非常简单，不能混淆，例如：
padding-left: 30px;padding-right: 3em;使用padding速记padding是同时指定多个填充值的简写，根据输入的值的数量，它的行为会有所不同。
1 个值使用单个值将其应用于所有填充：上、右、下、左。
padding: 20px;2 个值使用 2 个值将第一个应用于bottom & top，将第二个应用于left & right。
padding: 20px 10px;3 个值使用 3 个值将第一个应用于顶部，第二个应用于左右，第三个应用于底部。
padding: 20px 10px 30px;4 个值使用 4 个值将第一个应用于顶部，第二个应用于右侧，第三个应用于底部，第四个应用于左侧。
padding: 20px 10px 5px 0px;所以，顺序是top-right-bottom-left。
接受的值padding接受以任何长度单位表示的值，最常见的是 px、em、rem，但也存在许多其他单位。
利润marginCSS 属性通常在 CSS 中用于在元素周围添加空间。记住：
margin在元素边框外添加空间padding在元素边框内添加空间特定边距属性margin有 4 个相关的属性可以一次改变单个边缘的边距：
margin-topmargin-rightmargin-bottommargin-left它们的用法非常简单，不能混淆，例如：
margin-left: 30px;margin-right: 3em;使用margin速记margin是同时指定多个边距的简写，根据输入的值的数量，它的行为会有所不同。
1 个值使用单个值将其应用于所有边距：上、右、下、左。
margin: 20px;2 个值使用 2 个值将第一个应用于bottom & top，将第二个应用于left & right。
margin: 20px 10px;3 个值使用 3 个值将第一个应用于顶部，第二个应用于左右，第三个应用于底部。
margin: 20px 10px 30px;4 个值使用 4 个值将第一个应用于顶部，第二个应用于右侧，第三个应用于底部，第四个应用于左侧。
margin: 20px 10px 5px 0px;所以，顺序是top-right-bottom-left。
接受的值margin接受以任何长度单位表示的值，最常见的是 px、em、rem，但也存在许多其他单位。它还接受百分比值和特殊值auto。
使用auto居中元素auto可以用来告诉浏览器自动选择一个边距，它最常用于以这种方式使元素居中：
margin: 0 auto;如上所述，使用 2 个值将第一个应用于bottom & top，将第二个应用于left & right。居中元素的现代方法是使用Flexbox及其justify-content: center;指令。较老的浏览器当然没有实现 Flexbox，如果需要支持它们margin: 0 auto;仍然是一个不错的选择。
使用负边距margin是唯一可以具有负值的与大小相关的属性。它也非常有用。设置一个负的上边距会使一个元素移动到它之前的元素上，并且给定足够的负值，它将移出页面。负的下边距将其后的元素向上移动。负的右边距使元素的内容扩展超出其允许的内容大小。负左边距将元素移动到它之前的元素之上，并且给定足够的负值，它将移出页面。
盒子尺寸浏览器在计算元素宽度时的默认行为是将计算出的宽度和高度应用于内容区域，而不考虑任何填充、边框和边距。事实证明，这种方法使用起来相当复杂。box-sizing您可以通过设置属性来更改此行为。该box-sizing物业是一个很大的帮助。它有 2 个值：
border-boxcontent-boxcontent-box是默认设置，我们在很久以前就有的那个box-sizing变成了一个东西。border-box是我们正在寻找的新的和伟大的东西。如果你在一个元素上设置它：
.my-p { box-sizing: border-box;}宽度和高度计算包括填充和边框。只留下了边距，这是合理的，因为在我们看来，我们通常也将其视为一个单独的东西：边距在框外。这个属性是一个很小的变化，但有很大的影响。CSS Tricks 甚至宣布了一个国际盒子尺寸意识日，只是说，建议将其应用到页面上的每个元素，开箱即用，如下：
*, *:before, *:after { box-sizing: border-box;}展示对象的display属性决定了浏览器如何呈现它。这是一个非常重要的属性，并且可能是您可以使用的值最多的属性。这些值包括：
blockinlinenonecontentsflowflow-roottable（和所有table-*的）flexgridlist-iteminline-blockinline-tableinline-flexinline-gridinline-list-item加上您不太可能使用的其他内容，例如ruby.选择其中任何一个都会显着改变浏览器对元素及其子元素的行为。在本节中，我们将分析其他地方未涵盖的最重要的部分：
blockinlineinline-blocknone我们将在后面的章节中看到其他一些内容，包括table,flex和grid.
inline内联是 CSS 中每个元素的默认显示值。除了由用户代理（浏览器）设置的一些元素（如p、p和）外，所有 HTML 标记都以内联方式显示。sectionblock内联元素没有应用任何边距或填充。高度和宽度相同。您可以添加它们，但页面中的外观不会改变——它们是由浏览器自动计算和应用的。
inline-block类似于inline，但按照您的指定使用inline-block width和应用。height
block如前所述，通常元素是内联显示的，但某些元素除外，包括
ppsectionulblock由浏览器设置。使用display: block，元素一个接一个地垂直堆叠，每个元素占据页面的 100%。分配给width和height属性的值会受到尊重，如果您设置它们，以及margin和padding。
none使用display: none使元素消失。它仍然存在于 HTML 中，但在浏览器中不可见。
定位定位是让我们确定元素在屏幕上出现的位置以及它们如何出现的原因。您可以四处移动元素，并将它们准确定位在您想要的位置。在本节中，我们还将了解页面上的事物如何根据不同元素之间的position交互方式发生变化。我们有一个主要的 CSS 属性：position.它可以有这 5 个值：
staticrelativeabsolutefixedsticky静态定位这是元素的默认值。静态定位元素显示在正常的页面流中。
相对定位如果您position: relative在一个元素上设置，您现在可以使用属性将其定位为偏移量
最佳对底部剩下这被称为偏移属性。它们接受长度值或百分比。以我在 Codepen 上制作的这个例子为例。我创建了一个父容器、一个子容器和一个带有一些文本的内框：
Test
用一些 CSS 给出一些颜色和填充，但不影响定位：
.parent { background-color: #af47ff; padding: 30px; width: 300px;}.child { background-color: #ff4797; padding: 30px;}.box { background-color: #f3ff47; padding: 30px; border: 2px solid #333; border-style: dotted; font-family: courier; text-align: center; font-size: 2rem;}结果如下：
您可以尝试将我之前提到的任何属性 ( top, right, bottom, left) 添加到.box, 不会发生任何事情。位置是static。现在，如果我们设置position: relative为盒子，起初显然没有任何变化。但是元素现在可以使用top, right, bottom,left属性移动，现在您可以更改它相对于包含它的元素的位置。例如：
.box { /* … */ position: relative; top: -60px;}负值top将使盒子相对于其容器向上移动。或者
.box { /* … */ position: relative; top: -60px; left: 180px;}注意盒子占据的空间是如何保留在容器中的，就像它仍然在它的位置一样。现在可以使用的另一个属性是z-index更改 z 轴位置。我们稍后再谈。
绝对定位对元素进行设置position: absolute会将其从文档流中移除。还记得在相对定位中，我们注意到元素最初占用的空间即使被移动也被保留了？使用绝对定位，一旦我们设置position: absolute了.box，它的原始空间现在就被折叠了，只有原点（x，y 坐标）保持不变。
.box { /* … */ position: absolute;}我们现在可以使用top, right, bottom,left属性随意移动盒子：
.box { /* … */ position: absolute; top: 0px; left: 0px;}或者
.box { /* … */ position: absolute; top: 140px; left: 50px;}坐标相对于最近的不是static.这意味着，如果我们添加position: relative到.child元素，并且我们将topand设置为 0，则框将不会定位在窗口left的左上角，而是定位在 0, 0 坐标处：.child
.child { /* … */ position: relative;}.box { /* … */ position: absolute; top: 0px; left: 0px;}这是我们已经看到.child的静态（默认）的方式：
.child { /* … */ position: static;}.box { /* … */ position: absolute; top: 0px; left: 0px;}与相对定位一样，您可以使用它z-index来更改 z 轴位置。
固定定位与绝对定位一样，当一个元素被分配时position: fixed，它就会从页面流中移除。与绝对定位的区别在于：元素现在总是相对于窗口定位，而不是第一个非静态容器。
.box { /* … */ position: fixed;}.box { /* … */ position: fixed; top: 0; left: 0;}另一个很大的区别是元素不受滚动的影响。将粘性元素放在某处后，滚动页面不会将其从页面的可见部分中删除。
粘性定位虽然上述值已经存在了很长时间，但这个值是最近推出的，它仍然相对不受支持（参见 caniuse.com）UITableView iOS 组件是我想到position: sticky. 您知道当您滚动联系人列表并且第一个字母卡在顶部时，让您知道您正在查看该特定字母的联系人吗？我们使用 JavaScript 来模拟这一点，但这是 CSS 原生允许它采用的方法。
浮动和清除过去，浮动一直是一个非常重要的话题。它被用于许多黑客和创造性用途，因为它是少数几种方式之一，与表格一起，我们可以真正实现一些布局。过去我们习惯将侧边栏浮动到左侧，例如，将其显示在屏幕左侧，并为主要内容添加一些边距。幸运的是，时代变了，今天我们有了 Flexbox 和 Grid 来帮助我们进行布局，而 float 又回到了原来的范围：将内容放置在容器元素的一侧，并使其兄弟元素出现在它周围。该float属性支持 3 个值：
leftrightnone（默认）假设我们有一个框，其中包含一个带有一些文本的段落，并且该段落还包含一个图像。这是一些代码：
This is some random paragraph and an image. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text.
.parent { background-color: #af47ff; padding: 30px; width: 500px;}.child { background-color: #ff4797; padding: 30px;}.box { background-color: #f3ff47; padding: 30px; border: 2px solid #333; border-style: dotted; font-family: courier; text-align: justify; font-size: 1rem;}和视觉外观：
如您所见，默认情况下，正常流程会考虑内联图像，并在行本身中为其留出空间。如果我们添加float: left到图像和一些填充：
img { float: left; padding: 20px 20px 0px 0px;}这是结果：
这就是我们通过应用浮点数得到的：对，相应地调整填充：
img { float: right; padding: 20px 0px 20px 20px;}浮动元素从页面的正常流程中移除，其他内容围绕它流动。请参阅 Codepen 上的示例您也不限于浮动图像。这里我们用一个span元素来切换图像：
This is some random paragraph and an image. Some text to float The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text.
span { float: right; margin: 20px 0px 20px 20px; padding: 10px; border: 1px solid black}这是结果：
清算当你浮动多个元素时会发生什么？如果在浮动时他们发现另一个浮动图像，默认情况下它们会水平堆叠在一起。直到没有空间，它们将开始被堆叠在一条新的线上。p假设我们在标签中有 3 个内联图像：
如果我们添加float: left到这些图像：
img { float: left; padding: 20px 20px 0px 0px;}这就是我们将拥有的：
如果添加clear: left到图像中，它们将垂直而不是水平堆叠：
我使用left了clear. 它允许
left清除左浮动right清除右浮动both清除左右浮动none（默认）禁用清除Z-索引当我们谈到定位时，我提到你可以使用z-index属性来控制元素的 Z 轴定位。当您有多个相互重叠的元素时，它非常有用，您需要决定哪个是可见的，离用户更近，哪些应该隐藏在它后面。此属性接受一个数字（不带小数）并使用该数字来计算在 Z 轴上哪些元素更靠近用户。z-index 值越高，元素越靠近用户。在决定哪个元素应该可见以及哪个元素应该位于其后面时，浏览器会计算 z-index 值。默认值为auto，一个特殊的关键字。使用auto，Z 轴顺序由页面中 HTML 元素的位置确定 – 最后一个兄弟元素首先出现，因为它是最后定义的。默认情况下，元素具有属性的static值position。在这种情况下，该z-index属性没有任何区别 – 它必须设置为absolute，relative或fixed才能工作。例子：
.my-first-p { position: absolute; top: 0; left: 0; width: 600px; height: 600px; z-index: 10;}.my-second-p { position: absolute; top: 0; left: 0; width: 500px; height: 500px; z-index: 20;}将显示具有类的元素.my-second-p，并在其后面.my-first-p。这里我们使用了 10 和 20，但您可以使用任何数字。负数也是。选择不连续的数字很常见，因此您可以将元素放置在中间。如果改为使用连续数字，则需要重新计算定位中涉及的每个元素的 z-index。
CSS 网格CSS Grid 是 CSS 小镇的新生事物，虽然尚未得到所有浏览器的完全支持，但它将成为未来的布局系统。CSS Grid 是一种使用 CSS 构建布局的全新方法。密切关注 caniuse.com ( https://caniuse.com/#feat=css-grid ) 上的 CSS 网格布局页面，了解当前支持它的浏览器。在撰写本文时，即 2019 年 4 月，所有主流浏览器（除了 IE，它永远不会支持它）已经支持这项技术，覆盖了 92% 的所有用户。CSS Grid 不是 Flexbox 的竞争对手。它们在复杂的布局上互操作和协作，因为 CSS Grid 工作在二维（行和列）上，而 Flexbox 工作在单个维度（行或列）上。传统上，为 Web 构建布局一直是一个复杂的话题。我不会深入研究这种复杂性的原因，这本身就是一个复杂的话题。但是您可以认为自己是一个非常幸运的人，因为现在您可以使用 2 个非常强大且支持良好的工具：
CSS 弹性盒CSS 网格这两个是构建未来 Web 布局的工具。除非您需要支持像 IE8 和 IE9 这样的旧浏览器，否则没有理由搞乱以下内容：
表格布局花车清除修复黑客display: table黑客在本指南中，您需要了解从零 CSS Grid 知识到成为精通用户的所有信息。
基础CSS Grid 布局通过设置在容器元素（可以是 ap或任何其他标签）上激活display: grid。与 flexbox 一样，您可以在容器上定义一些属性，并在网格中的每个单独项目上定义一些属性。这些属性结合起来将决定网格的最终外观。最基本的容器属性是grid-template-columns和grid-template-rows。
网格模板列和网格模板行这些属性定义了网格中的列数和行数，它们还设置了每列/行的宽度。下面的代码片段定义了一个网格，它有 4 列，每列 200px 宽，2 行，每列 300px 高。
.container { display: grid; grid-template-columns: 200px 200px 200px 200px; grid-template-rows: 300px 300px;}这是另一个具有 2 列和 2 行的网格的示例：
.container { display: grid; grid-template-columns: 200px 200px; grid-template-rows: 100px 100px;}自动尺寸很多时候，您可能有一个固定的页眉大小、一个固定的页脚大小，以及高度灵活的主要内容，具体取决于其长度。在这种情况下，您可以使用 auto 关键字：
.container { display: grid; grid-template-rows: 100px auto 100px;}不同的列和行维度在上面的示例中，我们通过对行使用相同的值和对列使用相同的值来制作规则网格。您可以为每一行/列指定任何值，以创建许多不同的设计：
.container { display: grid; grid-template-columns: 100px 200px; grid-template-rows: 100px 50px;}另一个例子：
.container { display: grid; grid-template-columns: 10px 100px; grid-template-rows: 100px 10px;}在单元格之间添加空间除非指定，否则单元格之间没有空格。您可以使用这些属性添加间距：
grid-column-gapgrid-row-gap或简写语法grid-gap。例子：
.container { display: grid; grid-template-columns: 100px 200px; grid-template-rows: 100px 50px; grid-column-gap: 25px; grid-row-gap: 25px;}使用简写相同的布局：
.container { display: grid; grid-template-columns: 100px 200px; grid-template-rows: 100px 50px; grid-gap: 25px;}在多列和/或多行上生成项目每个单元格项目都可以选择在行中占据多个框，并水平或垂直扩展以获得更多空间，同时尊重容器中设置的网格比例。这些是我们将使用的属性：
grid-column-startgrid-column-endgrid-row-startgrid-row-end例子：
.container { display: grid; grid-template-columns: 200px 200px 200px 200px; grid-template-rows: 300px 300px;}.item1 { grid-column-start: 2; grid-column-end: 4;}.item6 { grid-column-start: 3; grid-column-end: 5;}数字对应于分隔每列的垂直线，从 1 开始：
相同的原则适用于grid-row-startand grid-row-end，除了这次不是占用更多列，一个单元格占用更多行。
速记语法这些属性具有由以下方式提供的简写语法：
grid-columngrid-row用法很简单，下面是复制上述布局的方法：
.container { display: grid; grid-template-columns: 200px 200px 200px 200px; grid-template-rows: 300px 300px;}.item1 { grid-column: 2 / 4;}.item6 { grid-column: 3 / 5;}另一种方法是设置起始列/行，并设置它应该占用多少span：
.container { display: grid; grid-template-columns: 200px 200px 200px 200px; grid-template-rows: 300px 300px;}.item1 { grid-column: 2 / span 2;}.item6 { grid-column: 3 / span 2;}更多网格配置使用分数指定每列或每行的确切宽度并不是在每种情况下都是理想的。分数是一个空间单位。下面的示例将一个网格分成 3 列，宽度相同，每列占可用空间的 1/3。
.container { grid-template-columns: 1fr 1fr 1fr;}使用百分比和 rem您还可以使用百分比，并混合和匹配分数、像素、rem 和百分比：
.container { grid-template-columns: 3rem 15% 1fr 2fr}使用repeat()repeat()是一个特殊函数，它接受一个数字，表示行/列将被重复的次数，以及每个的长度。如果每列具有相同的宽度，您可以使用以下语法指定布局：
.container { grid-template-columns: repeat(4, 100px);}这将创建 4 个具有相同宽度的列。或使用分数：
.container { grid-template-columns: repeat(4, 1fr);}指定行的最小宽度常见用例：当您调整窗口大小时，有一个侧边栏不会折叠超过一定数量的像素。这是一个示例，侧边栏占屏幕的 1/4，并且从不小于 200 像素：
.container { grid-template-columns: minmax(200px, 3fr) 9fr;}auto您还可以使用关键字设置最大值：
.container { grid-template-columns: minmax(auto, 50%) 9fr;}或者只是一个最小值：
.container { grid-template-columns: minmax(100px, auto) 9fr;}使用定位元素grid-template-areas默认情况下，元素使用它们在 HTML 结构中的顺序定位在网格中。使用grid-template-areas您可以定义模板区域以在网格中移动它们，也可以在多行/列上生成一个项目，而不是使用grid-column.这是一个例子：
… … … …
.container { display: grid; grid-template-columns: 200px 200px 200px 200px; grid-template-rows: 300px 300px; grid-template-areas: “header header header header” “sidebar main main main” “footer footer footer footer”;}main { grid-area: main;}aside { grid-area: sidebar;}header { grid-area: header;}footer { grid-area: footer;}尽管它们的原始顺序，项目被放置在grid-template-areas定义的位置，这取决于grid-area与它们关联的属性。
在模板区域中添加空单元格.您可以使用点而不是区域名称来设置一个空单元格grid-template-areas：
.container { display: grid; grid-template-columns: 200px 200px 200px 200px; grid-template-rows: 300px 300px; grid-template-areas: “. header header .” “sidebar . main main” “. footer footer .”;}用网格填充页面您可以使用以下方法扩展网格以填充页面fr：
.container { display: grid; height: 100vh; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr;}示例：页眉、侧边栏、内容和页脚这是一个使用 CSS Grid 创建站点布局的简单示例，该布局提供顶部顶部、左侧边栏和右侧内容的主要部分，以及之后的页脚。
这是标记：
Header Welcome Hi!
SidebarFooter这是CSS：
header { grid-area: header; background-color: #fed330; padding: 20px;}article { grid-area: content; background-color: #20bf6b; padding: 20px;}aside { grid-area: sidebar; background-color: #45aaf2;}footer { padding: 20px; grid-area: footer; background-color: #fd9644;}.wrapper { display: grid; grid-gap: 20px; grid-template-columns: 1fr 3fr; grid-template-areas: “header header” “sidebar content” “footer footer”;}我添加了一些颜色使其更漂亮，但基本上它为每个不同的标签分配了一个名称，grid-area该名称用于grid-template-areas..wrapper当布局较小时，我们可以使用媒体查询将侧边栏放在内容下方：
@media (max-width: 500px) { .wrapper { grid-template-columns: 4fr; grid-template-areas: “header” “content” “sidebar” “footer”; }}参见 CodePen这些是 CSS Grid 的基础知识。有很多东西我没有包含在这个介绍中，但我想让它变得非常简单，这样你就可以开始使用这个新的布局系统而不会让人感到不知所措。
弹性盒Flexbox，也称为灵活盒模块，是两个现代布局系统之一，与 CSS Grid 一起。与 CSS Grid（它是二维的）相比，flexbox 是一个一维的布局模型。它将基于行或列控制布局，但不会同时控制。flexbox 的主要目标是允许项目填充其容器提供的整个空间，具体取决于您设置的一些规则。除非您需要支持 IE8 和 IE9 等旧浏览器，否则 Flexbox 是让您忘记使用的工具
表格布局花车清除修复黑客display: table黑客让我们深入 flexbox 并在很短的时间内成为它的大师。
浏览器支持在撰写本文时（2018 年 2 月），它得到了 97.66% 的用户的支持。多年来，所有最重要的浏览器都实现了它，因此甚至涵盖了较旧的浏览器（包括 IE10+）：
虽然我们必须等待几年让用户赶上 CSS Grid，但 Flexbox 是一项较旧的技术，现在可以使用。
启用弹性盒一个 flexbox 布局被应用到一个容器，通过设置
display: flex;或者
display: inline-flex;容器内的内容将使用 flexbox 对齐。
容器属性一些 flexbox 属性适用于容器，它为其项目设置一般规则。他们是
flex-directionjustify-contentalign-itemsflex-wrapflex-flow对齐行或列我们看到的第一个属性flex-direction, 确定容器是否应该将其项目对齐为行或列：
flex-direction: row将项目按文本方向排成一行（西方国家从左到右）flex-direction: row-reverserow以相反的方向放置物品flex-direction: column将项目放在一列中，从上到下排序flex-direction: column-reverse将项目放在一列中，就像column但方向相反垂直和水平对齐默认情况下，如果是行，项目从左侧开始，如果flex-direction是列，则从顶部开始flex-direction。
您可以使用justify-content更改水平对齐和align-items更改垂直对齐来更改此行为。
更改水平对齐方式justify-content有 5 个可能的值：
flex-start：对齐到容器的左侧。flex-end：对齐到容器的右侧。center：在容器的中心对齐。space-between: 以相等的间距显示。space-around: 在它们周围以相等的间距显示更改垂直对齐方式align-items有 5 个可能的值：
flex-start: 与容器顶部对齐。flex-end: 与容器底部对齐。center：在容器的垂直中心对齐。baseline：显示在容器的基线处。stretch：物品被拉伸以适合容器。关于baseline：baselineflex-start由于我的盒子太简单了，看起来和这个例子很相似。查看这个 Codepen以获得更有用的示例，我从最初由Martin Michálek创建的 Pen 中派生了该示例。如您所见，项目尺寸是对齐的。
裹默认情况下，flexbox 容器中的项目保持在一行中，并缩小它们以适应容器。要强制项目跨多行分布，请使用flex-wrap: wrap. 这将根据 中设置的顺序分配项目flex-direction。用于flex-wrap: wrap-reverse反转此顺序。一个名为的速记属性flex-flow允许您在一行中指定flex-direction和，方法是先添加值，然后添加值，例如：.flex-wrapflex-directionflex-wrapflex-flow: row wrap
适用于每个项目的属性到目前为止，我们已经看到了可以应用于容器的属性。单个项目可以具有一定程度的独立性和灵活性，您可以使用这些属性更改它们的外观：
orderalign-selfflex-growflex-shrinkflex-basisflex让我们详细看看它们。
使用顺序在另一个之前/之后移动项目项目根据分配的顺序进行排序。默认情况下，每个项目都有顺序0，HTML 中的外观决定了最终顺序。order您可以在每个单独的项目上使用覆盖此属性。这是您在项目而不是容器上设置的属性。您可以通过设置负值使一个项目出现在所有其他项目之前。
使用 align-self 进行垂直对齐一个项目可以选择覆盖容器align-items设置，使用align-self，它具有相同的 5 个可能值align-items：
flex-start: 与容器顶部对齐。flex-end: 与容器底部对齐。center：在容器的垂直中心对齐。baseline：显示在容器的基线处。stretch：物品被拉伸以适合容器。必要时扩大或缩小项目弹性成长任何项目的默认值为 0。如果所有项目都定义为 1，其中一项定义为 2，则较大的元素将占用两个“1”项目的空间。弹性收缩任何项目的默认值为 1。如果所有项目都定义为 1，其中一项定义为 3，则较大的元素将缩小其他元素的 3 倍。当可用空间减少时，它将减少 3 倍的空间。弹性基础如果设置为auto，它会根据项目的宽度或高度调整项目的大小，并根据flex-grow属性添加额外的空间。如果设置为 0，则在计算布局时不会为项目添加任何额外的空间。如果您指定一个像素数值，它将使用它作为长度值（宽度或高度取决于它是行还是列项）柔性此属性结合了上述 3 个属性：
flex-growflex-shrinkflex-basis并提供简写语法：flex: 0 1 auto
表格过去表格在 CSS 中被过度使用，因为它们是我们可以创建精美页面布局的唯一方法之一。今天，使用 Grid 和 Flexbox，我们可以将表格移回它们原本要做的工作：样式化表格。让我们从 HTML 开始。这是一个基本表：
Name Age Flavio 36 Roger 7 默认情况下，它不是很有吸引力。浏览器提供了一些标准样式，仅此而已：
当然，我们可以使用 CSS 为表格的所有元素设置样式。让我们从边界开始。一个漂亮的边界可以走很长的路。我们可以将它应用在table元素上，也可以应用在内部元素上，比如thand td：
table, th, td { border: 1px solid #333;}如果我们将它与一些边距配对，我们会得到一个不错的结果：
表格的一个常见问题是能够为一行添加颜色，并为另一行添加不同的颜色。这可以使用:nth-child(odd)or:nth-child(even)选择器：
tbody tr:nth-child(odd) { background-color: #af47ff;}这给了我们：
如果添加border-collapse: collapse;到表格元素，所有边框都折叠为一个：
定心如果您需要水平或垂直居中，则在 CSS 中居中是一项非常不同的任务。在这篇文章中，我解释了最常见的场景以及如何解决它们。如果Flexbox提供了新的解决方案，我会忽略旧的技术，因为我们需要继续前进，而且 Flexbox 已经被浏览器支持多年，包括 IE10。
水平居中文本text-align使用设置为 的属性使文本水平居中非常简单center：
p { text-align: center;}块将非文本内容居中的现代方法是使用 Flexbox：
#mysection { display: flex; justify-content: center;}里面的任何元素#mysection都将水平居中。
如果您不想使用 Flexbox，这是另一种方法。任何不是文本的内容都可以通过向左右应用自动边距并设置元素的宽度来居中：
section { margin: 0 auto; width: 50%;}以上margin: 0 auto;是以下的简写：
section { margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;}display: block如果它是内联元素，请记住将项目设置为。
垂直居中传统上，这一直是一项艰巨的任务。Flexbox 现在为我们提供了一种以最简单的方式完成此任务的好方法：
#mysection { display: flex; align-items: center;}里面的任何元素#mysection都将垂直居中。
垂直和水平居中垂直和水平居中的 Flexbox 技术可以结合使用以使页面中的元素完全居中。
#mysection { display: flex; align-items: center; justify-content: center;}使用CSS Grid也可以做到这一点：
body { display: grid; place-items: center; height: 100vh;}列表列表是许多网页中非常重要的一部分。CSS 可以使用多个属性来设置它们的样式。list-style-type用于设置列表使用的预定义标记：
li { list-style-type: square;}我们有很多可能的值，您可以在此处查看https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type及其外观示例。一些最受欢迎的是disc,circle和。squarenonelist-style-image用于在预定义标记不合适时使用自定义标记：
li { list-style-image: url(list-image.png);}list-style-position允许您在页面流中而不是在页面外部添加标记outside（默认）或inside列表内容
li { list-style-position: inside;}速记属性让我们可以在list-style同一行中指定所有这些属性：
li { list-style: url(list-image.png) inside;}媒体查询和响应式设计在本节中，我们将首先介绍媒体类型和媒体特征描述符，然后我们将解释媒体查询。
媒体类型在媒体查询和@import 声明中使用，媒体类型允许我们确定在哪个媒体上加载 CSS 文件或一段 CSS。我们有以下媒体类型
all意味着所有媒体print打印时使用screen当页面出现在屏幕上时使用speech用于屏幕阅读器screen是默认值。过去我们有更多，但大多数都被弃用了，因为它们被证明是确定设备需求的无效方法。我们可以像这样在@import 语句中使用它们：
@import url(myfile.css) screen;@import url(myfile-print.css) print;我们可以在多种媒体类型上加载 CSS 文件，每种媒体类型用逗号分隔：
@import url(myfile.css) screen, print;同样适用link于 HTML 中的标签：
我们不仅限于在media属性和@import声明中使用媒体类型。还有更多。
媒体特征描述符首先，让我们介绍媒体特征描述符。它们是我们可以添加到media属性link或@import声明中的附加关键字，以在加载 CSS 时表达更多条件。以下是他们的名单：
widthheightdevice-widthdevice-heightaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionorientationscangrid它们中的每一个都有相应的 min-和 max-，例如：
min-width,max-widthmin-device-width,max-device-width等等。其中一些接受可以用px或rem或任何长度值表示的长度值。这是width, height, device-width,的情况device-height。例如：
@import url(myfile.css) screen and (max-width: 800px);请注意，我们使用括号中的媒体特征描述符包装每个块。有些接受固定值。orientation，用于检测设备方向，接受portrait或landscape。例子：
scan，用于确定屏幕类型，接受progressive（对于现代显示器）或interlace（对于旧 CRT 设备）。其他一些人想要一个整数。就像color检查设备使用的每个颜色分量的位数一样。非常低级，但您只需要知道它是供您使用的（例如grid, color-index, monochrome）。aspect-ratio并device-aspect-ratio接受一个代表宽高视口比率的比率值，以分数表示。例子：
@import url(myfile.css) screen and (aspect-ratio: 4/3);resolution表示设备的像素密度，以分辨率数据类型表示，例如dpi.例子：
@import url(myfile.css) screen and (min-resolution: 100dpi);逻辑运算符我们可以使用以下规则组合规则and：
我们可以使用逗号执行“或”类型的逻辑操作，它结合了多个媒体查询：
@import url(myfile.css) screen, print;我们可以not用来否定媒体查询：
@import url(myfile.css) not screen;重要提示：not只能用于否定整个媒体查询，因此必须放在它的开头（或逗号之后）。
媒体查询我们看到的所有上述规则都适用于 @import 或linkHTML 标记，也可以在 CSS 中应用。您需要将它们包装在一个@media () {}结构中。例子：
@media screen and (max-width: 800px) { /* enter some CSS */}这是响应式设计的基础。媒体查询可能非常复杂。此示例仅在它是屏幕设备、宽度在 600 到 800 像素之间且方向为横向时才应用 CSS：
@media screen and (max-width: 800px) and (min-width: 600px) and (orientation: landscape) { /* enter some CSS */}功能查询特征查询是 CSS 的一项最近且相对未知的能力，但得到了很好的支持。我们可以使用它来检查浏览器是否支持使用@supports关键字的功能。在撰写本文时，我认为这对于检查浏览器是否支持 CSS 网格特别有用，例如，可以使用以下方法完成：
@supports (display: grid) { /* apply this CSS */}我们检查浏览器是否支持该属性的grid值。display我们可以使用@supports任何 CSS 属性来检查任何值。我们还可以使用逻辑运算符and，or并not构建复杂的特征查询：
@supports (display: grid) and (display: flex) { /* apply this CSS */}过滤器过滤器允许我们对元素执行操作。您通常使用 Photoshop 或其他照片编辑软件执行的操作，例如更改不透明度或亮度等。您使用该filter物业。这是应用于图像的示例，但此属性可用于任何元素：
img { filter: ;}您可以在此处使用各种值：
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()sepia()saturate()url()注意每个选项后面的括号，因为它们都需要一个参数。例如：
img { filter: opacity(0.5);}表示图像将是 50% 透明的，因为opacity()它采用从 0 到 1 的一个值或一个百分比。您还可以一次应用多个过滤器：
img { filter: opacity(0.5) blur(2px);}现在让我们详细讨论每个过滤器。
blur()模糊元素内容。您将一个值传递给它，用pxorem或 or表示，该值rem将用于确定模糊半径。例子：
img { filter: blur(4px);}opacity()opacity()取一个从 0 到 1 的值，或者一个百分比，并根据它来确定图像的透明度。0, 或0%, 表示完全透明。1，或100%，或更高，意味着完全可见。例子：
img { filter: opacity(0.5);}CSS 也有一个opacity属性。filter但是可以硬件加速，具体取决于实现，所以这应该是首选方法。
drop-shadow()drop-shadow()显示元素后面的阴影，它遵循 Alpha 通道。这意味着如果你有一个透明的图像，你会得到一个应用于图像形状的阴影，而不是图像框。如果图像没有 alpha 通道，阴影将应用于整个图像框。它接受最少 2 个参数，最多 5 个：
offset-x设置水平偏移量。可以是负数。offset-y设置垂直偏移量。可以是负数。blur-radius，可选，设置阴影的模糊半径。它默认为 0，没有模糊。spread-radius，可选，设置传播半径。表示为px,rem或emcolor，可选，设置阴影的颜色。您可以在不设置扩散半径或模糊半径的情况下设置颜色。CSS 理解该值是颜色而不是长度值。例子：
img { filter: drop-shadow(10px 10px 5px orange);}img { filter: drop-shadow(10px 10px orange);}img { filter: drop-shadow(10px 10px 5px 5px #333);}grayscale()使元素具有灰色。您将一个值从 0 传递到 1，或从 0% 传递到 100%，其中 1 和 100% 表示完全灰色，0 或 0% 表示未触摸图像，并且保留原始颜色。例子：
img { filter: grayscale(50%);}sepia()使元素具有棕褐色。您将一个值从 0 传递到 1，或从 0% 传递到 100%，其中 1 和 100% 表示完全棕褐色，而 0 或 0% 表示未触摸图像，并且保留原始颜色。例子：
img { filter: sepia(50%);}invert()反转元素的颜色。反转颜色意味着在 HSL 色轮中查找与颜色相反的颜色。如果您不知道这意味着什么，只需在 Google 中搜索“色轮”即可。例如，黄色的反面是蓝色，红色的反面是青色。每一种颜色都有对立面。您传递一个数字，从 0 到 1 或从 0% 到 100%，它决定了反转的数量。1 或 100% 表示完全反转，0 或 0% 表示不反转。0.5 或 50% 将始终呈现 50% 的灰色，因为您始终处于轮子的中间。例子：
img { filter: invert(50%);}hue-rotate()HSL 色轮以度数表示。使用hue-rotate()您可以使用正或负旋转来旋转颜色。该函数接受一个deg值。例子：
img { filter: hue-rotate(90deg);}brightness()改变元素的亮度。0 或 0% 给出总黑色元素。1 或 100% 给出不变的图像。高于 1 或 100% 的值会使图像更亮，直至达到全白元素。例子：
img { filter: brightness(50%);}contrast()改变元素的对比度。0 或 0% 给出总的灰色元素。1 或 100% 给出不变的图像。高于 1 或 100% 的值会提供更多对比度。例子：
img { filter: contrast(150%);}saturate()改变元素的饱和度。0 或 0% 给出总灰度元素（饱和度较低）。1 或 100% 给出不变的图像。高于 1 或 100% 的值会提供更高的饱和度。例子：
img { filter: saturate();}url()此过滤器允许应用在 SVG 文件中定义的过滤器。您指向 SVG 文件位置。例子：
img { filter: url(filter.svg);}SVG 过滤器超出了本文的范围，但您可以在 Smashing Magazine 帖子中阅读更多内容：https ://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/
变换变换允许您在 2D 或 3D 空间中平移、旋转、缩放和倾斜元素。它们是一个非常酷的 CSS 功能，尤其是与动画结合使用时。
2D 变换该transform属性接受这些功能：
translate()移动元素rotate()旋转元素scale()缩放元素的大小skew()扭曲或倾斜元素matrix()一种使用 6 个元素的矩阵执行上述任何操作的方法，语法不太友好，但不太冗长我们还具有特定于轴的功能：
translateX()在 X 轴上移动元素translateY()在 Y 轴上移动元素scaleX()在 X 轴上缩放元素的大小scaleY()在 Y 轴上缩放元素的大小skewX()在 X 轴上扭曲或倾斜元素skewY()在 Y 轴上扭曲或倾斜元素这是一个变换示例，它将.box元素宽度更改为 2（复制它），将高度更改为 0.5（将其减半）：
.box { transform: scale(2, 0.5);}transform-origin让我们设置(0, 0)变换的原点（坐标），让我们改变旋转中心。
组合多个变换您可以通过用空格分隔每个函数来组合多个转换。例如：
transform: rotateY(20deg) scaleX(3) translateY(100px);3D 变换我们可以更进一步，在 3D 空间而不是 2D 空间中移动我们的元素。在 3D 中，我们添加了另一个轴 Z，它为我们的视觉效果增加了深度。使用该perspective属性，您可以指定 3D 对象与查看器之间的距离。例子：
.3Delement { perspective: 100px;}perspective-origin决定了观察者位置的外观，我们在 X 和 Y 轴上如何看待它。现在我们可以使用额外的函数来控制 Z 轴，并添加到其他 X 和 Y 轴变换：
translateZ()rotateZ()scaleZ()以及相应的简写translate3d()，rotate3d()以及scale3d()作为使用translateX(),translateY()和translateZ()函数等的简写。3D 变换对于这本手册来说有点太高级了，但是你自己去探索是一个很好的话题。
过渡CSS 过渡是在 CSS 中创建动画的最简单方法。在过渡中，你改变一个属性的值，你告诉 CSS 根据一些参数慢慢改变它，朝向最终状态。CSS 过渡由以下属性定义：
该transition属性是一个方便的简写：
.container { transition: propertydurationtiming-functiondelay;}CSS 过渡示例这段代码实现了一个 CSS 转换：
.one,.three { background: rgba(142, 92, 205, .75); transition: background 1s ease-in;}.two,.four { background: rgba(236, 252, 100, .75);}.circle:hover { background: rgba(142, 92, 205, .25); /* lighter */}请参阅 Glitch 上的示例https://flavio-css-transitions-example.glitch.me当悬停.one和.three元素时，紫色圆圈有一个过渡动画，可以缓解背景的变化，而黄色圆圈则没有，因为它们没有transition定义属性。
转换计时函数值transition-timing-function允许您指定过渡的加速曲线。您可以使用一些简单的值：
lineareaseease-inease-outease-in-out这个故障显示了这些在实践中是如何工作的。您可以使用三次贝塞尔曲线创建完全自定义的计时函数。这是相当先进的，但基本上上述任何功能都是使用贝塞尔曲线构建的。我们有方便的名称，因为它们是常见的。
浏览器 DevTools 中的 CSS 过渡这Browser DevTools提供了一种可视化转换的好方法这是铬：
这是火狐：
从这些面板中，您可以直接在页面中实时编辑过渡和实验，而无需重新加载代码。
您可以使用 CSS 动画为哪些属性设置动画很多！它们与您也可以使用 CSS 过渡制作动画相同。这是完整列表：
backgroundbackground-colorbackground-positionbackground-sizeborderborder-colorborder-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-widthborder-leftborder-left-colorborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-widthborder-spacingborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-widthbottombox-shadowcaret-colorclipcolorcolumn-countcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-widthcolumn-widthcolumnscontentfilterflexflex-basisflex-growflex-shrinkfontfont-sizefont-size-adjustfont-stretchfont-weightgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-column-endgrid-column-gapgrid-column-startgrid-columngrid-gapgrid-row-endgrid-row-gapgrid-row-startgrid-rowgrid-template-areasgrid-template-columnsgrid-template-rowsgrid-templategridheightleftletter-spacingline-heightmarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-widthmin-heightmin-widthopacityorderoutlineoutline-coloroutline-offsetoutline-widthpaddingpadding-bottompadding-leftpadding-rightpadding-topperspectiveperspective-originquotesrighttab-sizetext-decorationtext-decoration-colortext-indenttext-shadowtoptransform.vertical-alignvisibilitywidthword-spacingz-index动画CSS 动画是创建视觉动画的好方法，不仅限于像 CSS 过渡这样的单一动作，而且更加清晰。animation使用该属性将动画应用于元素。
.container { animation: spin 10s linear infinite;}spin是动画的名称，我们需要单独定义。我们还告诉 CSS 让动画持续 10 秒，以线性方式执行（没有加速度或速度有任何差异）并无限重复。您必须使用关键帧定义动画的工作方式。旋转项目的动画示例：
@keyframes spin { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); }}在@keyframes定义中，您可以拥有任意数量的中间航路点。在这种情况下，我们指示 CSS 使变换属性将 Z 轴从 0 度旋转到 360 度，从而完成整个循环。您可以在此处使用任何 CSS 转换。请注意，这并没有规定动画应该采用的时间间隔。这是在您使用它时定义的animation。
一个 CSS 动画示例我想画四个圆，都有一个共同的起点，彼此相距90度。
body { display: grid; place-items: center; height: 100vh;}.circle { border-radius: 50%; left: calc(50% – 6.25em); top: calc(50% – 12.5em); transform-origin: 50% 12.5em; width: 12.5em; height: 12.5em; position: absolute; box-shadow: 0 1em 2em rgba(0, 0, 0, .5);}.one,.three { background: rgba(142, 92, 205, .75);}.two,.four { background: rgba(236, 252, 100, .75);}.one { transform: rotateZ(0);}.two { transform: rotateZ(90deg);}.three { transform: rotateZ(180deg);}.four { transform: rotateZ(-90deg);}你可以在这个 Glitch 中看到它们：https ://flavio-css-circles.glitch.me让我们让这个结构（所有的圆圈一起）旋转。为此，我们在容器上应用动画，并将该动画定义为 360 度旋转：
@keyframes spin { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); }}.container { animation: spin 10s linear infinite;}在https://flavio-css-animations-tutorial.glitch.me上查看您可以添加更多关键帧以获得更有趣的动画：
@keyframes spin { 0% { transform: rotateZ(0); } 25% { transform: rotateZ(30deg); } 50% { transform: rotateZ(270deg); } 75% { transform: rotateZ(180deg); } 100% { transform: rotateZ(360deg); }}请参阅https://flavio-css-animations-four-steps.glitch.me上的示例
CSS 动画属性CSS 动画提供了许多可以调整的不同参数：
该animation属性是所有这些属性的简写，按以下顺序：
.container { animation: name duration timing-function delay iteration-count direction fill-mode play-state;}这是我们上面使用的示例：
.container { animation: spin 10s linear infinite;}CSS 动画的 JavaScript 事件使用 JavaScript，您可以侦听以下事件：
animationstartanimationendanimationiteration请注意animationstart，因为如果动画在页面加载时开始，您的 JavaScript 代码总是在处理完 CSS 之后执行，因此动画已经开始并且您无法拦截事件。
const container = document.querySelector(‘.container’)container.addEventListener(‘animationstart’, (e) => { //do something}, false)container.addEventListener(‘animationend’, (e) => { //do something}, false)container.addEventListener(‘animationiteration’, (e) => { //do something}, false)您可以使用 CSS 动画为哪些属性设置动画很多！它们与您也可以使用 CSS 过渡制作动画相同。这是完整列表：
backgroundbackground-colorbackground-positionbackground-sizeborderborder-colorborder-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-widthborder-leftborder-left-colorborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-widthborder-spacingborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-widthbottombox-shadowcaret-colorclipcolorcolumn-countcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-widthcolumn-widthcolumnscontentfilterflexflex-basisflex-growflex-shrinkfontfont-sizefont-size-adjustfont-stretchfont-weightgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-column-endgrid-column-gapgrid-column-startgrid-columngrid-gapgrid-row-endgrid-row-gapgrid-row-startgrid-rowgrid-template-areasgrid-template-columnsgrid-template-rowsgrid-templategridheightleftletter-spacingline-heightmarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-widthmin-heightmin-widthopacityorderoutlineoutline-coloroutline-offsetoutline-widthpaddingpadding-bottompadding-leftpadding-rightpadding-topperspectiveperspective-originquotesrighttab-sizetext-decorationtext-decoration-colortext-indenttext-shadowtoptransform.vertical-alignvisibilitywidthword-spacingz-index规范化 CSS默认浏览器样式表是浏览器必须应用的一组规则，以便为元素提供一些最小样式。大多数时候，这些样式非常有用。由于每个浏览器都有自己的集合，因此找到共同点是很常见的。而不是删除所有默认值，例如CSS 重置之一删除浏览器的不一致性，同时保留一组您可以依赖的基本规则。Normalize.css http://necolas.github.io/normalize.css是这个问题最常用的解决方案。您必须在任何其他 CSS 之前加载规范化 CSS 文件。
错误处理CSS 是有弹性的。当它发现错误时，它不会像 JavaScript 那样打包所有东西并完全消失，在发现错误后终止所有脚本执行。CSS 非常努力地做你想做的事。如果一行有错误，它会跳过它并跳转到下一行而没有任何错误。如果您忘记了一行中的分号：
p { font-size: 20px color: black; border: 1px solid black;}出现错误的行 AND 下一个将不会应用，但第三条规则将成功应用到页面上。基本上，它会扫描所有内容，直到找到一个分号，但是当它到达分号时，规则就是现在font-size: 20px color: black;，它是无效的，所以它会跳过它。有时很难意识到某处有错误，以及错误在哪里，因为浏览器不会告诉我们。这就是CSS Lint等工具存在的原因。
供应商前缀供应商前缀是浏览器用来让 CSS 开发人员访问尚未被认为稳定的新功能的一种方式。在继续之前，请记住，这种方法的受欢迎程度正在下降。人们现在喜欢使用实验标志，必须在用户的浏览器中明确启用。为什么？因为开发人员有时不会将供应商前缀视为预览功能的一种方式，而是在生产中发布它们——这被 CSS 工作组认为是有害的。主要是因为一旦你添加了一个标志并且开发人员开始在生产中使用它，如果浏览器意识到必须改变某些东西，他们就会处于不利的境地。使用标志，除非您可以推动所有访问者在他们的浏览器中启用该标志，否则您无法发布功能（只是开玩笑，不要尝试）。也就是说，让我们看看供应商前缀是什么。我特别记得他们过去使用 CSS 过渡。您不仅要使用该transition属性，还必须这样做：
.myClass { -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear;}现在你只需使用
.myClass { transition: all 1s linear;}因为现在所有现代浏览器都很好地支持该属性。使用的前缀是：
-webkit-(Chrome, Safari, iOS Safari / iOS WebView, Android)-moz-（苹果浏览器）-ms-（边缘，Internet Explorer）-o-（歌剧、迷你歌剧）由于 Opera 是基于 Chromium 的，Edge 很快也会如此，-o-而且-ms-可能很快就会过时。但正如我们所说，供应商前缀作为一个整体也正在过时。写前缀很难，主要是因为不确定性。你真的需要一个属性的前缀吗？一些在线资源也已经过时，这使得做正确的事情变得更加困难。像Autoprefixer这样的项目可以使整个过程自动化，而我们无需再确定是否需要前缀，或者该功能现在已经稳定并且应该删除前缀。它使用来自 caniuse.com 的数据，这是一个非常好的参考站点，可以提供与浏览器支持相关的所有内容。如果您使用 React 或 Vue，create-react-app以及 Vue CLI 等项目，这是开始构建应用程序的两种常见方式，请使用autoprefixer开箱即用，因此您甚至不必担心。
用于打印的 CSS即使我们越来越多地盯着我们的屏幕，印刷仍然是一件事。即使是博客文章。我记得有一次在 2009 年，我遇到一个人，他告诉我他让他的私人助理打印我发表的每一篇博文（是的，我愣了一会儿）。绝对出乎意料。我研究打印的主要用例通常是打印到 PDF。我可能会在浏览器中创建一些东西，并希望将其作为 PDF 提供。浏览器使这变得非常容易，当尝试打印文档并且打印机不可用时，Chrome 默认为“保存”，而 Safari 在菜单栏中有一个专用按钮：
打印 CSS打印时您可能想要做的一些常见事情是隐藏文档的某些部分，可能是页脚、页眉中的某些内容、侧边栏。也许您想使用不同的字体进行打印，这是完全合法的。如果你有一个大的 CSS 用于打印，你最好使用一个单独的文件。浏览器只会在打印时下载它：
CSS @媒体打印前一种方法的替代方法是媒体查询。您在此块中添加的任何内容：
@media print { /* … */}将仅适用于打印的文档。
链接由于链接，HTML 很棒。它被称为超文本是有充分理由的。打印时，我们可能会丢失很多信息，具体取决于内容。CSS 提供了一种解决此问题的好方法，方法是编辑内容，在<;a> 标记文本之后附加链接，使用：
@media print { a[href*=’//’]:after { content:” (” attr(href) “) “; color: $primary; }}我的目标a[href*=’//’]是只对外部链接执行此操作。我可能有用于导航和内部索引目的的内部链接，这在我的大多数用例中都是无用的。如果您还想打印内部链接，只需执行以下操作：
@media print { a:after { content:” (” attr(href) “) “; color: $primary; }}页边距您可以为每一页添加边距。cm或者in是纸张印刷的好单位。
@page { margin-top: 2cm; margin-bottom: 2cm; margin-left: 2cm; margin-right: 2cm;}@page也可以用于仅定位第一页，使用，或仅使用and来定位@page :first左右页面。@page :left@page: right
分页符您可能希望在某些元素之后或之前添加分页符。使用page-break-after和page-break-before：
.book-date { page-break-after: always;}.post-content { page-break-before: always;}这些属性接受各种各样的值。
避免在中间破坏图像我在 Firefox 中遇到过这种情况：默认情况下，图像在中间被剪切，并在下一页继续。它也可能发生在文本中。采用
p { page-break-inside: avoid;}并将您的图像包装在p标签中。直接定位img在我的测试中不起作用。这也适用于其他内容，而不仅仅是图像。如果您发现不需要的内容被剪切，请使用此属性。
调试打印演示Chrome DevTools 提供了模拟打印布局的方法：
面板打开后，将渲染仿真更改为print：
包起来我希望这篇文章能帮助您快速掌握 CSS，并大致了解可用于设置页面和应用程序样式的主要功能。我写它是为了帮助您熟悉 CSS ，让大家快速上手使用这个很棒的工具，让大家在 Web 上创建令人惊叹的设计，希望大家实现我的预期目标。