为什么 CSS 这么难学？

CSS 不正交并不是对 CSS 的指责，如果能正交它肯定会做到正交的，现在的设计虽然不完美，但可能是最好的设计。

下文列举的问题能在规范里找到解释不能说明 CSS 是正交的，因为正不正交应该是从表面上就能看出来的。正交一般都是对接口的约束，具体实现我不管的。

本答案可以很好地解释「为什么你会觉得 CSS 难学」，至于不难的学习方式，其实是不存在的。要么你大量练习从实践中总结，要么你大量阅读文档从理论中领悟，反正 CSS 就是很难学。

我是这么觉得的，如果有人问 CSS 为什么这么难学，我们就应该好好回答 CSS 为什么这么难学；至于 CSS 多牛逼，应该另开一个问题。

短答案：因为 CSS 不正交。

长答案：

我先来解释一下什么是正交。

你调过显示器的「亮度」、「色调」和「饱和度」吧。

「亮度」就是明暗程度，值越大，屏幕越亮。

「色调」就是颜色，你通过调色调，可以把红色调成绿色。

「饱和度」就是鲜艳程度，值越大越鲜艳。

「正交」就是，你调节这三者中的一个时，不影响其他两个效果。

你调节「亮度」的时候「色调」和「饱和度」不会变化。

你调节「色调」的时候「亮度」和「饱和度」不会变化。

你调节「饱和度」的时候「亮度」和「色调」不会变化。

「正交」看起来应该是理所当然的，对吧。

想象一下「不正交」的情况：你调节「亮度」的时候，「色调」和「饱和度」会跟着无规律的变化。如果是这样，你会调得想死，因为你很难调到你想要的效果。

而 CSS，就是「不正交」的。

我以 width 对 margin-left 的影响为例，假设有如下代码：

.parent 里面的 .child 宽度为 300px，现在我给他添加一个 margin-left: -10px，会发现

整个 .child 左移 10 像素

好的，于是我们知道 margin-left: -10px 会让元素整体左移。

真的是这样吗？

这个时候把 width 去掉重新做实验，这是在添加 margin-left 之前：

这是在添加 margin-left 之后：

我们发现 margin-left: -10px 并没有让整个元素左移，只是让左边缘左移了，右边缘并没有动。

现在来总结一下：

如果指定了 width，那么 margin-left: 10px 会使元素整体左移

如果没有指定 width，那么 margin-left: 10px 只会使做边缘左移（也就是宽度扩大）

看到这里，你就会觉得 CSS 特别不正交：

为什么 width 的存在与否会影响 margin-left 的作用？

有没有 width 之外的其他属性也会影响 margin-left 的作用？恐怕你无法得知。

这就是不正交的恐怖之处，你只有把所有属性与 margin-left 一起用一下，才能得知 margin-left 的真正规律。

这还只是两个属性的影响，你能想象三个属性互相影响的情况吗？

P.S. 有些前端老手已经能「感性」地理解 width: auto 的意义，觉得这不是「不正交」。其实我只是举例说明「你无法只看一个属性就知道这个属性对应的效果，你必须结合另一个属性一起来看」。

我再举第二个例子，大家都知道 position: fixed 是相对于视口（viewport）定位的。

但是这个「真理」会受另一个元素的影响……对，我知道你很震惊……

先看正常情况：

网页右边是一个 iframe，红色的 .fixed 元素相对于 iframe 视口左上角定位，与我们预期一致。

接下来我在 .box 上面加一个 CSS3 中的属性，就会改变你的认知：

父容器加了 transform 之后，fixed 定位的元素居然相对于父容器定位。

天知道以后 CSS 会不会加更多元素来影响我已经认为是真理的事情？

我说一个更实际的问题吧，你敢在接手一个项目时，在任意一个元素上加 transform 属性吗？

你不敢！除非你把它的每个子元素的属性都检查一遍……确定没有 fixed 定位。

这就是「不正交」的恶心之处。

我再举一个例子，大家都知道给固定宽度的 div 加 margin: 0 auto 可以让它水平居中，很多人就问，那为什么 margin: auto 0（注意 auto 和 0 的位置反过来了）不能做到垂直居中呢？

其实是可以的：
但是必须是在当前元素有 position: absolute; top: 0; bottom:0; 的情况下才能垂直居中。或者与 flex 结合起来用也行。

这就很「不正交」了……

还有一些很常见的例子我就不一一详细列举了：

border、padding、overflow、display:table、display:inline-block 会影响 margin

position: absolute 会影响 display 和 float

transform 会影响 z-index

display 会影响 li 前面的小黑点 JS Bin

关键在于这些例子，要一个一个记，各属性被影响的情况都不一样！

CSS 最不正交的地方就是明明有 BFC，却非要把 BFC 藏起来，然后用 overflow:hidden 和 display: inline-block 等属性来触发 BFC。但用这些属性触发 BFC 总是会有副作用，这就是典型的不正交。

要触发 BFC 就单独发明一个触发 BFC 的属性不就好了。display: flow-root; 不就是在填这个坑嘛？所以你们说 CSS 是正交的，我肯定是不服的。

在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

怎么学习「不正交」的东西？

有一个办法：试。

你试的组合情况越多，就越能了解各种奇怪的现象。

其实不用那么悲观，常用的组合也就几十种吧，都试出来并记下来就行了。

目前我们知道

不同属性的组合会有不同的效果；

新的属性会影响你已经学会的知识；

这些规律，毫无逻辑可言，你只能试出来。

这，就是 CSS 难学的原因。

以我的经验，越是理性的人，越难理解 CSS；越是感性的人，越容易理解 CSS。

这就是为什么大部分后端程序员能学会 JS，却学不会 CSS——他们太理性了。

你想用学编程的思路来学 CSS？放弃吧！

你需要用学画画的思路来学习 CSS——每天不停地画画，一个鸡蛋用不同的方式画一千遍，就成了。

所以我在课上说过一句话：

CSS 不是科学，CSS 是艺术。

不过凡事都有例外，如果你愿意老老实实看完 CSS 规格文档，然后再写 CSS，可能就不觉得有那么多不正交的地方了，但是有多少人有这个能力和精力呢？

P.S. 「正交」概念我是从《Unix编程艺术》学到的，少逛知乎多读书吧。

---

我也觉得有点难

本文地址：https://blog.csdn.net/BOM485480/article/details/109256895