重新学习 CSS

2019-08-08 本文已影响0人可乐前端

人生总是会让人困惑。如果你不了解自己、不明白自己存在的价值、不知道自己想要什么，你就可能会得到错误的信息，同时也很难去实现自己的梦想。

Photo by Caspar Camille Rubin on Unsplash

为何要重新学习 CSS？

在前端领域，任何的入门都是从三大块开始的：HTML、CSS 以及 JavaScript。在日常的工作中，HTML 用来搭建整体的框架，而 JavaScript 来描述具体的业务逻辑，通常我都是最后对照着设计稿来写 CSS，完成最后的美化工作。对于 CSS 的知识，一直处于一个知道怎么写，但是不知道为什么这样写，也不知道如何能写的更好的一个混沌状态。于是，我便决定花些时间，重新来学学 CSS。

在业务场景复杂的 web 应用中，JavaScript 才是主角，它负责了前后端的交互、页面路由的控制、业务场景的实现等等。但是在静态网页中，主体仍然是有 HTML 和 CSS 构成的，而 CSS 甚至在设计传达上起了决定性的作用。对于最近想要做些静态网站的我来说，这应该算是想要重学 CSS 的一个比较重要的原因。其次，在日常的工作里，为了实现某个样式通常是去翻阅文档，查询资料，最后复制粘贴，发现确实实现了该样式，却没有更多的探究，对于 CSS 的整体逻辑不甚了解。所以当碰到一些样式上的问题，也是需要花较多的时间去调试，这种低效的工作经历也促使我系统化的重新学一学 CSS。

有了重学的动机，下面就来聊聊如何学习 CSS 吧！这些方式也是从前辈那里总结来的，不论你是前端的新手还是已经有了一些经验，相信都能有所收获 ^_

如何学习 CSS？

首先需要谨记的是：学习 CSS，你用不着去死记每个 CSS 的属性以及它们对应的值，你需要知道的是一些基础的东西，那些会让你在理解 CSS 的时候更轻松的东西。所以今天我们就来聊一聊这些能让你系统理解 CSS 的基础吧！

1. 选择器，可不只是类选择器

顾名思义，选择器会让你选择到页面上的某一些元素，你可以对它们添加样式规则。最常见的选择器就是类选择器（例如 .container），除此之外，其实还有很多其他的选择器可供使用，比如你可以直接选择某个 HTML 元素、基于某些位置条件选择元素、或者是选择表格元素中的某些特定的行。

还有一些称为伪元素类（pseudo element class）的选择器，可以选择块级元素的第一行（::first-line）或者是第一个字母（::first-letter）

这里不得不提我发现的一篇关于选择器的好文章：《30 Selectors by Tutplus》这篇文章里介绍的 30 个选择器差不多是最常用、最重要的了，看了它们，基本上可以应对大多数的场景了。

2. 继承与级联（Inheritance and Cascade）

Cascade 定义了当多个样式被应用在同一个元素上时，哪一个样式会最终胜出（产生效果）。如果你曾经有过无法理解为什么某个样式规则不生效的情况，那么你应该是被 cascade 给捉弄了。级联又和另一个概念「继承」有很大的关系，继承是指子元素从父元素那里获得的一些样式属性。级联还和选择器的优先级有关，不同的选择器在样式应用上也有着不同的优先级。

3. 盒子模型

标准的 CSS 盒子模型会使用你赋值的宽度（width），再加上 padding 和 border 的宽度，最后计算出它在屏幕上呈现的宽度；这意味着这个元素占用的位置实际上比你给它的宽度要大。如果我们想要这个元素呈现在屏幕上的宽度就和我们给它的宽度一样呢？那该怎么办？box-sizing: border-box 就派上了用场，说实话，以前我都不知道这东西是干啥的～

4. 文档流（flow）

在一个最简单的 HTML 文件中，文档内容是通过流布局的形式呈现的，文档的每个部分都是在「流」中的，它们彼此知晓彼此的位置，所以不会互相重叠。

5. 格式化上下文（formatting context）

现在你有了一个文档，其内容都是以正常流的形式呈现，如果你想要改变一些内容的排列方式，你可能需要改变某个元素的格式化上下文（formatting context）。举个简单的例子，如果你想让所有的段落（<p>标签）聚集在一起，而不是另起一行，你就可以使用 dispaly: inline。

从我自己的角度理解，这里格式化上下文的意思应该是这样的：由于在正常的文档流中，所有的元素都对于其他元素是有感知的，会通过其他原来定位自己的位置，使用 display: inline 等于是告诉其他元素，我现在变成了一个行内元素，类似于一个 span，这样其他的元素就会知道怎么和他排列在一起了。

6. 脱离文档流

CSS 中的元素可以描述为两种不同的状态：在文档流中或脱离文档流。在文档流中的元素会被给予文档中的空间，这个空间是相对于文档流中的其他元素的。想要让元素脱离文档流，你可以让它漂浮或者对它定位，这时，其他的元素就不会再关心这个元素占用的空间。

最常见的一个例子就是绝对定位，如果你使用 position: absolute 那么这个元素就会被移出文档流，这时候你就需要确保这个绝对的定位的元素不会覆盖其他元素（可以通过对文档流中的元素设置样式来解决）。虽然将元素设置为浮动后，其他的元素会环绕这个元素，但如果你将文档流中的元素设置一个背景色的话就不难发现，其实浮动元素占用的空间已经被环绕的元素给占用了。

回顾

通过重新学习了这些 CSS fundamentals 让我发现，其实写 CSS 的方法也是有迹可循的，掌握了这些基本规则，对于如何去理解 CSS 代码有了更好的方法。在碰到样式问题的时候，也有了逻辑化的思路和正确的思考方向。