1.1 CSS世界的”世界观”-网站源码下载

对于 CSS 这门语言，我学习和研究已经有 10 年之久，在点点滴滴的积累中，逐渐形成了一套完整的体系。在 CSS 这个世界中，CS并不是一个机械枯燥的语言，所有属性都是有血有肉，有着不同个性和身世的个体。不同的个体可以碰撞出不同的火花，激荡出异彩纷呈的故事。

这里，我们不妨 “脑洞大开” 一下：如果把 CSS 世界拍成动漫的话，会是什么样子？

首先，动漫名可以叫作《建筑神域》，讲述一群建筑魔法师为国家存亡惊心动魄战斗的故事，然后，出现了 “Chrome 王国” 的几位建筑魔法师日常训练的画面。只见名为 width的魔法师手持名叫选择器的法器，准确指向称为<div>的最普通的块状建筑魔法石，口中念道：“层叠天星，幻化有变，50%，变!” 只听见一声清脆的 “啪” ，<div>魔法石宽度变成了原来的一半，然而，width 却锁眉摇头，空中喃喃念道：“1毫秒，还不赶快，还要再练，不然在和’IE王国’ 的战斗中很难占得先机！”（如图 1-1 所示）图 1-1 CSS 世界观示图

此时，width 突然发现前面 1 米之处有一块<span>之石，具有 class=”test”的特殊标记，立即拿出法器，念道：“类名之石，test 为名，为我选择，出 !” 话音刚落，<span>之石蓝色荧光一闪，明眼人都能看出来，width 魔法师和<span>魔法石现在处于契约状态，width 继续念道：“层叠天星，幻化有形，50%，变!” 但<span>魔法石却没有任何变化，此时 width 一拍自己的脑门，似乎明白了什么，转过头对旁边的display 魔法师大声叫道：“小 D，这边这边，过来帮个忙······”

只见，display 迅速结束自己的练习，屁颠屁颠跑过来：“咋啦？”

“此为内联之石，我无法驾驭，你帮我重塑一下”

“小问题！正好，魔法师技能委员会刚通过了我的一个新法术，我给你秀一秀？”

“哟，不错啊，快让我啾啾！”

“好勒！”只见 display 拿出自己的法器，念道：“类名之石，test 为名，为我选择，出！” 紧接着，“层叠天星，幻化有形，flex，变！”

只听见一声清脆的 “啪” ，在两人的合作之下，<span>魔法石宽度也变化了（如图 1-2 所示）。

CSS 世界示意图2

“哟，很酷嘛！”width 对display 竖着大拇指称赞道。

只见 display 腼腆一笑，小手在面前轻轻一挥：“就算你这么夸我，人家也不会开心的啦········”

从上面的描述可以看出，在CSS世界中，HTML 是魔法石，选择器就是选择法器，CSS 属性就是魔法师，CSS 各种属性值就是魔法师的魔法技能，浏览器就是他们所在的 “王国” ，“王国” 会不断更新法律规制（版本升级），决定是否允许使用新的魔法石（HTML5 新标签新属性），是否允许新的魔法师入 “国籍”（CSS3 新属性）或者允许使用新的魔法石（HTML5 新的属性值）以及是否舍弃某些魔法技能（如 display:run-in）操作系统就是他们所在的世界，不同的操作系统代表不同的平行世界，所以，CSS 世界有这么几个比较大的平行世界，即Windows 世界，OS X 世界以及移动端的 IOS 世界和 Android 世界。不同的世界的浏览器王国的命运不一样，列如，在 OS X 世界中，IE王国是不存在的，而Safari 王国却异常强大，但在Windows 世界中，Safari 王国却异常落寞。

以上这一切就构成了完整的 CSS 世界的 “世界观”。

下面回答一个很重要的问题，为何要这样认识 CSS 世界呢？

首先，将抽象的 CSS 直接和具体的现实世界相对应，更加易于理解。试想一下，对于普通人，理解魔法师和魔法石是不是要比理解 CSS 代码容易得多？其次，以完整的体系来学习 CSS 要比单纯关注属性值理解得更加深刻，可以培养从宏观层面认识与理解 CSS 的习惯。再次，这也方便我们记忆，枯燥的代码总是过目就忘，鲜活的角色总是印象深刻。最后，这样也可以让本书散发出与众不同的气质。