1.2 CSS思维方式

原创声明。未经许可，不得转载，作者：小步教程。

错误思维MindError000：认为CSS就是一系列的CSS属性。这是常见的严重级别最高的错误之一。CSS语言不同于C、Java等语言，需要转换思维方式。

1.2.1 排版思维

CSS是一门排版型技术，排列每个元素的位置与设置每个元素的大小。CSS设计思维更接近photoshop或者画画，排版逻辑相似。C、Java等语言的主要逻辑是流程控制（if、for等），不能用纯流程思维来思考CSS。

错误思维MindError001：用纯流程思维学习CSS。

1.2.2 模型化与规范规则思维

CSS是一门模型化与规范规则性的技术。CSS为实现排版，设计各种布局模型：盒子模型、display模型、BFC模型等；模型内部包含多条规范规则保证模型的设计。

CSS属性服务于相应的布局模型与规范规则。例如IFC模型，display: inline使width等属性设置无效，IFC模型详细说明设计原因。有些同学开发页面如果没有达到预期效果，盲目的、反复不断的尝试其它属性与值，即使最后实现需求也不能真正理解原因。这时需要学习模型与规范规则。

规则的特点。规则之间互相补充，所以不绝对化规则。以交通规则为例，它是为了保证交通的安全与效率，存在基本规则1：红灯停绿灯行，同时还存在特殊规则2：紧急任务车辆例如消防车可以在红灯时通，以及特殊规则3：普通车辆协助紧急任务车辆可以在红灯时通行。CSS规范规则同理，教学时逐条讲解，并不意味着它永远成立，有可能被打破。

错误思维MindError002：各种看似合理原因拒绝学习CSS模型与规范规则，拒绝把CSS属性融入到CSS模型学习，绝对化看待规则。

1.2.3 浏览器角度思维

HTML与CSS代码由浏览器程序运行。从界面开发角度，HTML代码与CSS代码是界面配置文件，HTML与CSS代码不是可执行程序，真正的程序是C++语言编写的浏览器程序。公认难度极高的三大软件：操作系统、浏览器、数据库，浏览器属于其一。浏览器源码包含极其复杂逻辑，这些逻辑包含CSS属性、模型、规范规则的实现，最终显示页面。浏览器源代码大小上G级别，通常不研究它，也不对它断点调试。不研究浏览器源码，但是需要理解浏览器工作原理，即它对HTML与CSS代码的处理过程与中间处理结果。

1.2.4 阶段结果化调试

CSS调试方法属于阶段结果化调试。浏览器运行页面有5个关键步骤，通过开发者工具分别查看每个步骤的结果。

1.2.5 属性之间存在关系

（1）CSS属性之间可能存在联系。一个属性设置可能影响另一个属性设置的效果。

错误思维MindError003：认为CSS属性是孤立的。

（2）CSS属性之间可能互相制约。CSS属性服务于各布局模型与各规范规则，所以各个CSS属性会互相联系，有时也会互相制约，例如：一个属性自动修改另一个属性的值，一个属性让另一个属性值无效。

错误思维MindError004：认为设置的每项CSS属性设置总是有效的。

1.2.6 合理运用

每个CSS属性与值都有它的合理运用场景。CSS语法简单，“允许”我们不合理的使用，可能导致CSS属性被乱用。例如有初学者了解到flex布局好用，一出问题就设置display: flex来试图解决问题。需要理解CSS属性真正的适用场景，特别是细分场景，例如垂直居中的细分：单行文本、多行文本、图片垂直、块元素在父元素、多行，每种细分场景使用相应CSS属性。

错误思维MindError007：不分具体场景稀里糊涂地乱用CSS属性。

1.2.7 包容

CSS的历史包袱。理论上CSS的后期版本兼容所有历史版本，CSS从96年诞生至今仍在广泛使用。如果随意更改规范将导致：新开发页面显示正常，历史页面显示不正常。因为历史包袱，CSS设计存在妥协，CSS官方公布了此类遗憾，例如box-sizing的默认值应设成border-box而不是content-box。而且CSS官方仅制定规范，由不同浏览器厂商编码具体实现，也会存在差异。一个跨度十年级的世界级主流产品，很难做到一开始就是完美的设计。

1.2.8 细节思维

CSS技术体现在细节，一个细节可能隐藏着相应知识点，包括：CSS属性的细节、模型与规范规则的细节、开发者工具的细节、概念的细节。需要耐心的学习、观察、理解与积累。