1.1 CSS世界的“世界观”
对于CSS这门语言，我学习和研究已经有10年之久，在点点滴滴的积累中，逐渐形成了一套完整的体系。在CSS这个世界中，CSS并不是一个机械枯燥的语言，所有属性都是有血有肉、有着不同个性和身世的个体。不同的个体可以碰撞出不同的火花，激荡出异彩纷呈的故事。
这里，我们不妨“脑洞大开”一下：如果把CSS世界拍成动漫的话，会是什么样子？
首先，动漫名可以叫作《建筑神域》，讲述一群建筑魔法师为国家存亡惊心动魄战斗的故事。然后，出现了“Chrome王国”的几位建筑魔法师日常训练的画面。只见名为width的魔法师手持名叫选择器的法器，准确指向称为<div>的最普通的块状建筑魔法石，口中念道：“层叠天星，幻化有形，50%，变！”只听见一声清脆的“啪”, <div>魔法石宽度变成了原来的一半。然而，width却锁眉摇头，口中喃喃念道：“1毫秒，还不够快，还要再练，不然在和‘IE王国’的战斗中很难占得先机！”（如图1-1所示）。
图1-1 CSS世界观示意1
此时，width突然发现前面1米之处有一块<span>之石，具有class="test"的特殊标记，立即拿出法器，念道：“类名之石，test为名，为我选择，出！”话音刚落，<span>之石蓝色荧光一闪，明眼人都能看出来，width魔法师和<span>魔法石现在处于契约状态。width继续念道：“层叠天星，幻化有形，50%，变！”但<span>魔法石却没有任何变化，此时width一拍自己的脑门，似乎明白了什么，转过头对旁边的display魔法师大声叫道：“小D，这边这边，过来帮个忙……来呀，快点……”
只见display迅速结束自己的练习，屁颠屁颠跑过来：“咋啦？”
“此为内联之石，我无法驾驭，你帮我重塑一下。”
“小问题！正好，魔法师技能委员会刚通过了我的一个新法术，我给你秀一秀？”
“哟，不错啊，快让我瞅瞅！”
“好嘞！”只见display拿出自己的法器，念道：“类名之石，test为名，为我选择，出！”紧接着，“层叠天星，幻化有形，flex，变！”
只听见一声清脆的“啪”，在两人的合作之下，<span>魔法石宽度也变化了（如图1-2所示）。
图1-2 CSS世界观示意2
“哟，很酷嘛！”width对display竖着大拇指称赞道。
只见display腼腆一笑，小手在面前轻轻一挥：“就算你这么夸我，人家也不会开心的啦……”
从上面的描述可以看出，在CSS世界中，HTML是魔法石，选择器就是选择法器，CSS属性就是魔法师，CSS各种属性值就是魔法师的魔法技能，浏览器就是他们所在的“王国”，“王国”会不断更新法律法规（版本升级），决定是否允许使用新的魔法石（HTML5新标签新属性），是否允许新的魔法师入“国籍”（CSS3新属性），或者允许魔法师使用某些新技能（CSS新的属性值），以及是否舍弃某些魔法技能（如display:run-in）；操作系统就是他们所在的世界，不同的操作系统代表不同的平行世界，所以，CSS世界有这么几个比较大的平行世界，即Windows世界、OS X世界以及移动端的iOS世界和Android世界。不同世界的浏览器王国的命运不一样，例如，在OS X世界中，IE王国是不存在的，而Safari王国却异常强大，但在Windows世界中，Safari王国却异常落寞。
以上这一切就构成了完整的CSS世界的“世界观”。
下面回答一个很重要的问题：为何要这样认识CSS世界呢？
首先，将抽象的CSS直接和具体的现实世界相对应，更加易于理解。试想一下，对于普通人，理解魔法师和魔法石是不是要比理解CSS代码容易得多？其次，以完整的体系来学习CSS要比单纯关注属性值理解得更加深刻，可以培养从宏观层面认识与理解CSS的习惯。再次，这也方便我们记忆，枯燥的代码总是过目就忘，鲜活的角色总是印象深刻。最后，这样也可以让本书散发出与众不同的气质。