英文：rachel-andrew 翻译：刘泽恩
很多人希望我向他们推荐有关CSS部分的教程，或者问我如何学习CSS。 我还听说很多人对 CSS 的某些部分感到困惑，部分原因是语言知识过时。 鉴于 CSS 在过去几年中发生了很大变化，现在是刷新您的知识的好时机。 尽管 CSS 只是您所做工作的一小部分（因为您使用其他技术堆栈），但 CSS 是您希望最终出现在屏幕上的内容，因此值得合理学习。
因此，本文致力于概述关键的 CSS 基础和资源css3盒布局，以便进一步阅读现代 CSS 开发的关键领域。 其中许多资源已经在 Smashing 出版物上提供，但我也选择了其他一些资源，还有其他一些资源专注于 CSS 的关键领域。 这并不是一本完整的初学者手册，也没有涵盖所有知识点。 我的目标是涵盖现代 CSS 的广度，同时重点关注几个关键领域，帮助您理解 CSS 的其余部分。
语言基础知识
对于大多数 CSS，您无需费力去学习属性和值，只需在需要时查找即可。 然而，如果没有很好地掌握 CSS 的一些基础知识，你将很难理解它。 这些基础知识值得你花时间去了解，从长远来看，它会为你节省大量时间，少走弯路。
选择器，而不仅仅是类
选择器执行标题所示的操作，它选择文档的各个部分，以便您可以对其应用 CSS 规则。 大多数人都熟悉使用class，或者直接使用HTML元素设置样式，比如body，但是还有很多中间选择器可以根据元素在文档中的位置来选择元素，直接选择位于该元素之后的元素，或者select in表 的素数行。
这些选择器是 CSS3 规范的一部分（您可能听说过它们称为 3 级选择器），并且具有出色的浏览器支持。 有关可以使用的各种类型选择器的详细信息css3盒布局，请参阅 MDN 参考。
某些选择器的行为就像您已将类应用到文档中的各个内容一样。 例如 p:first-child 当您向第一个 p 元素添加类时，这些称为伪类选择器。 伪元素选择器就像动态插入一个元素，例如 ::first-line 的行为就像用跨度包裹第一行文本。 但是，如果行的宽度发生变化，则会重新应用，而插入元素则不会出现这种情况。 这些选择器可能非常复杂。 下面的 CodePen 是与伪类链接的伪元素的反例。 我们使用 :first-child 伪类来定位第一个 p 元素，然后 ::first-line 选择器选择该元素的第一行，就像在第一行周围添加 a 以使其变为斜体并更改颜色一样。
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.
Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.
body {
padding: 20px;
font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;}* {box-sizing: border-box;}
p {
margin: 0 0 1em 0;}.container {
border: 5px solid rgb(111,41,97);
border-radius: .5em;
padding: 10px;
column-count: 2;}.container p:first-child::first-line {
font-weight: bold;
color: rgb(111,41,97);}继承和级联
级联是指当多个样式规则应用于一个元素时，哪个规则优先。 如果你遇到过很难理解为什么个别CSS没有应用的情况，可能是级联没有用好。 层叠与继承密切相关，继承定义了子元素可以继承父元素的样式属性。 这也与特殊性有关。 不同的选择器有不同的特异性。 当多个选择器可以应用于一个元素时，继承可以决定应用哪个规则。
注意：要了解所有这些内容，我建议阅读 MDN CSS 简介中的级联和继承。
如果您尝试将一些 CSS 应用于某个元素，那么浏览器的开发人员工具是最好的起点。 看一下下面的示例，我使用元素选择器 h1 将 h1 标题设置为蓝色。 同时，我还使用类选择器将 h1 设置为黄色。 由于类别更具体，h1 是红色的。 在开发者工具中，您可以看到元素选择器被划掉，因为它没有被应用。 一旦您看到浏览器正在获取您的 CSS（但其他东西正在覆盖它），您就可以开始找出原因。
I like veggies
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.
Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.
body {
padding: 20px;
font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;}* {box-sizing: border-box;}
p {
margin: 0 0 1em 0;}.container {
border: 5px solid rgb(111,41,97);
border-radius: .5em;
padding: 10px;}.veggies {
color: rebeccapurple;}
h1 {
color: orange;}盒子模型
CSS 中的所有内容都是一个包。 屏幕上显示的所有内容都有一个盒子，盒子模型描述了如何估计该盒子的大小 - 考虑前导、前导和边框。 标准 CSS 盒模型采用给定元素的长度，然后将内部边框和边框添加到该长度 - 这意味着该元素占用的空间小于给定长度。
最近，我们可以选择使用 IE 框模型，以便元素上的给定长度是屏幕上可见元素的长度。 任何填充或边框都会从边缘插入框的内容。 这对于许多布局来说更有意义。
在下面的演示中，我有两个包。 两者的长度均为 200 像素，边框为 5 像素，填充为 20 像素。 第一个盒子使用标准盒子模型，因此总长度为 250 像素，第二个盒子使用 IE 盒子模型，因此实际上宽度为 200 像素。
I use the standard box model.
I use the alternate box model.
body {
padding: 20px;
font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;}
p {
margin: 0 0 1em 0;}.box {
border: 5px solid rgb(111,41,97);
border-radius: .5em;
padding: 20px;
width: 200px;
margin-bottom: 2em;}.box2 {
box-sizing: border-box;}浏览器开发工具可以再次帮助您了解您正在使用的包型号。 在右图中，我使用 Firefox 的开发人员工具来选中使用默认内容框模型的框。 该工具告诉我这是正在使用的盒模型，我可以听到尺寸以及如何将边框和内边框添加到指定的长度。
注意：在 IE6 之前，Internet Explorer 使用 IE 框模型，其中内边框和边框插入到给定长度的内容中。 所以有一段时间浏览器使用了不同的盒子模型！ 如果明天的互操作性问题令人失望，那么现在情况已经有所改善，我们就不会以不同的方式处理浏览器估计元素长度的情况。
CSS Tricks 中对盒子模型和包规格有很好的解释，并解释了在站点中全局使用 IE 盒子模型的最佳方法。
标准流
如果您的文档内容用一些 HTML 标记，您的文档将是可读的。 标题和段落以新行开始，单词之间有一个空格形成短语。 标记使用小写，例如 em 不会破坏语句的流程。 句子将呈现标准流或块流布局。 句子的每个部分都被描述为“流入”，并且它知道句子的其余部分，因此不会重叠。
如果你理解这些行为而不是对抗它们，你会显得更放松。 这就是为什么从正确标记的 HTML 文档开始是有意义的原因之一，因为浏览器遵循正常流程和外部样式表，您的内容从这里开始读取。
格式化上下文
一旦文档的内容处于正常流程中，您可能希望修改其中某些内容的外观。 您可以通过修改元素的格式设置上下文来完成此操作。 举个很简单的例子，如果想让所有段落连接在一起而不是另起一行，可以设置p元素的样式属性display:inline，让p元素从块级元素变成内联元素。
本质上，格式化上下文定义了外部类型和内部类型。 外部控制元素与页面上其他元素的行为方式，内部控制子元素的外观。 例如，当您设置 display:flex 时，您将设置外部块低帧上下文，并将子元素设置为 Flex 格式化上下文。
注意：最新版本的 Display 规范更改了 display 的值，以显式声明外部和内部类型。 因此，您可以声明 display:block flex; （外侧为块状，内侧为弯曲状）
