为什么 CSS 这么难学？
因为CSS是一门非常奇怪的语言。他有两条不同的学习曲线，一条是入门以后直线上升然后慢慢变得平坦，一条是稳定上升的斜线。打个比方，修一台电视机我们有两种方法: 一种是在外壳上敲敲打打，找到敲哪里敲几下的规律；另外一种是看一本电视机原理的大厚书，然后去拆开修。对应到CSS就是不停地试各种排列组合和读规范读权威指南。这两种方法其实没有高下之分，只有适用范围。如果只是用CSS做很简单的工作，那试一试很经济实惠，但如果经常跟CSS打交道，那么读规范就会节省大量跳坑排坑的时间。高票答案说CSS不正交化我不是很赞同，他举的三个例子都清楚写在了规范和权威指南里面。如果先读规范会觉得这些行为是自然而然的。我本人同时写JavaScript, Java, CSS, Python，在学习C++，但是并没有感觉到高票的所谓理性和感性的区别。你觉得它没有规律，也许只是因为你没有好好读规范。CSS是一门正儿八经的编程语言，请拿出你学C++或者Java的态度对待它，该看书看书，该查文档查文档。
CSS 最不正交的地方就是明明有 BFC，却非要把 BFC 藏起来，然后用 overflow:hidden 和 display: inline-block 等属性来触发 BFC。但用这些属性触发 BFC 总是会有副作用，这就是典型的不正交。要触发 BFC 就单独发明一个触发 BFC 的属性不就好了。display: flow-root; 不就是在填这个坑嘛？所以你们说 CSS 是正交的，我肯定是不服的。怎么学习「不正交」的东西？有一个办法：试。你试的组合情况越多，就越能了解各种奇怪的现象。其实不用那么悲观，常用的组合也就几十种吧，都试出来并记下来就行了。目前我们知道不同属性的组合会有不同的效果；新的属性会影响你已经学会的知识；这些规律，毫无逻辑可言，你只能试出来。这，就是 CSS 难学的原因。以我的经验，越是理性的人，越难理解 CSS；越是感性的人，越容易理解 CSS。这就是为什么大部分后端程序员能学会 JS，却学不会 CSS——他们太理性了。你想用学编程的思路来学 CSS？放弃吧！你需要用学画画的思路来学习 CSS——每天不停地画画，一个鸡蛋用不同的方式画一千遍，就成了。所以我在课上说过一句话：CSS 不是科学，CSS 是艺术。
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS 不正交并不是对 CSS 的指责，如果能正交它肯定会做到正交的，现在的设计虽然不完美，但可能是最好的设计。下文列举的问题能在规范里找到解释不能说明 CSS 是正交的，因为正不正交应该是从表面上就能看出来的。正交一般都是对接口的约束，具体实现我不管的。本答案可以很好地解释「为什么你会觉得 CSS 难学」，至于不难的学习方式，其实是不存在的。要么你大量练习从实践中总结，要么你大量阅读文档从理论中领悟，反正 CSS 就是很难学。我是这么觉得的，如果有人问 CSS 为什么这么难学，我们就应该好好回答 CSS 为什么这么难学；至于 CSS 多牛逼，应该另开一个问题。
我们发现 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 的意义，觉得这不是「不正交」。其实我只是举例说明「你无法只看一个属性就知道这个属性对应的效果，你必须结合另一个属性一起来看」。
