books
第1章 概述
要深入理解一个事物之前，最好先对其整体有个大概了解，这样才不至于蠡测管窥（指人对事物的观察和了解很狭窄，很片面）。
如你把CSS看作是一座大山的话，那么当你对CSS有了整体的认知的时候，你深入此山就不会迷路了！
那么我们该如何提高这所谓的「整体认知」呢？—— 对 CSS 这门语言特性的描述就有助于对 CSS 的整体认知
具体表现为： CSS 这门语言本身并无逻辑可言，看重的是特性间的相互联系和具象能力。而典型的计算机开 发语言看重逻辑思维和抽象能力，这就是为啥那些擅长 C++或者 Java 之类的程序员学习 CSS 往往没有如鱼得水的感觉的原因……
如何学习CSS？——不要把CSS属性看作是干巴巴的属性，你要建立类似“人与人关系”这种很情感化的联系。还有就是关于对CSS的认知，你需要从多个角度进行，如CSS的「世界观」、CSS的历史等等，这样一来你就会对 CSS 这门语言的理解表现得更为准确和丰满……
★CSS 世界的“世界观”
◇形象点？
如果你把所有的CSS属性看作是个有血有肉、有着不同个性和身世的个体，你说这可以构造出怎样一个世界呢？
可以想想「盾之勇者成名录」、「刀剑神域」、「魔法禁书目录」等什么的
假如CSS世界就是一部动漫世界，而这部动漫叫做「建筑神域」，那么剧情呢？则是讲述一群建筑魔法师为国家存亡惊心动魄战斗的故事
在这个世界里，有很多国家，如「Chrome 王国」、「IE 王国」等等，每个国家里边都有很多子民。当然还有一个最最重要的旁白，那就是我啦，一个闲得蛋疼的吃瓜群众
有一天，来自Chrome王国的width魔法师正如往常一样，进行着无聊到爆的训练，只见它口中念念有词「对面的div石头看过来，50%，变」，一个魔法棒轻轻一挥，那块div石头，就被拦腰折断了……（旁白同样表示无聊到爆）
就这样一遍又一遍的训练着……（旁白表示要睡着了……）突然，天有不测之风云，狂发暴雨突然而至，此时，正有一块石头从天飞速而降，而且正对着width魔法师的头顶，width瞪大了双眼，或许是长久以往的训练结果，它便立刻逼逼几句，然而并无卵用啊！这块石头可并没有拦腰折断啊！啥变化都没有，这石头似乎在无视width呀！
此时width回忆起过往的种种，看来自己要死了，但临死之前，它一定要把这件事（误以为是敌国IE的袭击）告诉正在另一块山头训练的display魔法师知晓，好让Chrome王国做好防御与进攻的准备（旁白表示好感人，但觉得贱人就是矫情，因为你TM不会躲开啊，难道你TM吓得走不动了？……）
width酝酿一波舍身赴死的感情之后，就使出了平生所有的力气，如同祭出大招狮吼功般，怒喊「老d，哥们先走一步了，敌袭……」，老d一回头，便看到那块石头，或许也是长久以往的训练结果，看到石头，总得逼逼两句——「重塑，幻化，flex」
画面切回来
width看着那块近在矩尺的石头，便闭上眼睛等待着死亡的降临，此时它的内心独白「要死了吗？嗯，是吧！再见 了各位……」（旁白表示你TM平时不是喜欢逼逼吗？这次你的老d兄都把石头幻化了，你TM还不使用魔法吗？先前无效，不代表这次也无效啊！）
或许width有主角光环吧！突然刮起一阵大风，把width给吹倒了，刚好倒了个狗吃屎……（旁白表示无语……）
width吐出嘴巴的石子，便走了过去看看这块石头到底为何物，一看发现它是个flex，便想「这TM刚刚我的魔法怎么会无效呢？」，再试试，「对面的div石头看过来，50%，变」……结果，变为两半……
此时display跑过来了，然后便说道「老w你没事吧？」
「没事，刚刚我的魔法失效了，而现在又有效了……」
「应该不是这个原因，我在远处看到它的整个真面目了，它是块span之石，所以你的魔法才对它无效，为了让你的魔法有效，我便让它幻化为flex了，所以你现在的魔法又有效了……」
（完）
◇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 的习惯
- 方便我们记忆，枯燥的代码总是过目就忘，鲜活的角色总是印象深刻。
- 可以让本书散发出与众不同的气质。
这可不是单纯为了具体而具体哦！这是有很多理由的……而且这些理由足矣支撑为啥这样做的原因……
★世界都是创造出来的
◇CSS世界的出现难道是凭空而来的？
何为创造？简而言之，创造就是把以前没有的事物创立或者制造出来。而创造的一个最大特点是有意识的对世界进行探索性劳动的行为。
如语言、衣服、住房、食物、计算机等都是我们人类所创造出来的！至此，我们人类世界也就被创造出来了。
而我们之所以创造，那是因为创造出来的东东（不管是新方法、新理论，还是实实在在的东西等）都可以达到某种目的行为。
可见，这世界的事情只要发生了，都是有原因的，而这里边不管是人为的还是大自然所为的，它们都不是凭空就出现的！或许你会问「地球的存在是不是有原因的？当然，这也是有的，只是你不知道而已！」
所以CSS世界也是被创造出来的，即，CSS世界的出现不是没有原因的！
关于CSS世界出现的历史，你可以看看维基百科：
一句话可以概括之就是「之所以选择你，那是因为除了你CSS，它们都或多或少有些毛病！就你CSS目前看起来比较中庸」
为什么我们要去了解CSS世界出现的历史？
那是因为我们要想深入理解 CSS 属性的一些设计原因、表现原理还真离不开当时的历史环境
◇CSS世界之所以诞生的历史
1995年。互联网刚诞生没多久，那时CSS还未出现，而且当时的互联网几乎都是文字信息，即广大用户拿着浏览器所看到的网页是没有图片的，基本都是些文字信息，是不是很「朴素」？如果当时的网页能显示图片，那简直比性爱还要爽！
我们知道互联网的一个最重要的概念就是「联」，如果所有的用户的联到你这个网站的网页那岂不是「发财」了？
假如存在同样一份信息的网页，如果你的网页比它的表现得更好，那么用户肯定不去「联」对方的网页啦！
因此对设计师的要求也就要越来越多！
风水轮流转，现在的前端发展一如当年一样迅猛！因此，我这种渣渣也就顺应潮流，搞了一波前端学习……
话又说回来，那时的HTML越来越庞杂，用户以及开发者的眼神也就越来越不好使了，这时，就急需其他专门负责样式的语言，毕竟规模一起来，原先的那种做法也就不适用了！因此你就得创造另外一种姿势来满足大众的需求了。
据说当时有几个样式表语言，如CHSS、PSL 96、CSS等，而当时胜利的是CSS，并存活到了现在！
或许你会问「为啥是CSS赢了呢？这肯定是有后台的！」
这并没有什么后台！因为一个“层叠”特性就GG了所有竞争者！
层叠二字，显然不难理解，但是与样式表语言结合起来了，那么这就是一种新的创造了！而这种创造也为CSS的最终胜利埋下了伏笔！
或许有些时候，技术真得不如理念重要！如果其他样式表语言也用了「层叠」这种特性，我想今天的我们所写的样式就不是按CSS的那一套规则来了！
◇什么叫层叠？
CSS全称是 Cascading Style Sheets，翻译成中文即「层叠样式表」。而所谓的「层叠」，顾名思义就是样式可以层层累加。举个栗子来说：
页面的元素都继承了12px的大小，然而某个标题元素，表示12px不够我塞牙缝，于是它自己自行就叠加了个14px，于是它就显示成了14px！而不是继承而来的12px！需要注意的是，这里是叠加，而不是覆盖哈！
可见，这种层叠策略对于样式的显示是相当的灵活。
◇小结
- 1996-12-17，CSS1诞生，CSS 在样式呈现领域可谓所向披靡，没有遇到任何竞争对手
- 1998-5-12，CSS2 发布，推行内容和表现分离，表格（table）布局开始落寞。
◇那些年，那些信息
你要知道1998年那阵子，腾讯、新浪和网易成立了，而且那个时候可是门户的时代，可没有想现在这样有这么多千奇百怪的web应用！
既然是门户网站，那么那时的人们更关注的是信息的获取哈！
因此，网站的功能主要就是信息展示啦！
xx用户：「张三，你能不能把信息展示得好看一些？你看李四他们家的？多好看呀！要不是你这个网站有小色色的信息，我才不看你的呢！」
关于「信息」，就当时那个互联网而言的话，信息就是图片和文字，不像现在还有音频、视频等信息载体！
所以，那时候的网站前端技术关心的是图片和文字的呈现，你只要把图片和文字弄得好看一些，钞票大大得有！
而CSS2（包括 9 年之后，也就是 2007 年才出现的 CSS2.1）都是为图文展示服务的。
不管怎样，CSS 世界的诞生就是为图文信息展示服务的。
请把上面这句话当作是类似于「水往低处流」这样的物理规则、常识来记住！
◇世界都是创造出来的
来个首尾呼应，再次强调「世界都是创造出来的」。
为何我要反复强调这句话呢？如果站在造物主的角度去思考 CSS 世界的种种表现，很多问题就会迎刃而解。
讲真，这也忒难了吧！我可没有经历过那个时代啊！而且，即便经历过，就我这种「创造力」，只能回家卖红薯了呀！
假如有个机会可以让你当一回造物主，让你自己重新构建一个 CSS 世界，唯一的要求就是，这个世界要非常便于图片和文字的呈现，你会去如何构建呢？
「非常便于」？
图片和文字是两种不同的信息载体，图片，有一图胜千言的说法，可见图片对于用户来说，是极其重要的！毕竟，当你不理解这段文字内容的时候，或许一张图片，你就能完全理解和明白了！
根据，斯佩里左右脑分工理论：
我大致可以了解到，左脑文字不行，那就右脑图画来！
言归正传，文字、图片有了，那么它们是在一个叫做网页里边，或者说是一个容器里边所呈现的，而这个容器是个 矩形，类似于这样：
你说黄色框框里边的东西该如何呈现呢？既然是呈现，那就是CSS世界的事儿了，CSS说「水往低处流」，那么里边的内容就往低处流！
假如我是个小白，那么我会觉得，图片都文字混合在一起吧！就像写800字作文一样，第一行写完了就换第二行，中间偶尔就插入一张大图片，而且它是不换行的，独占一行，两边咩有文字的，居中的，类似于这样：
★CSS完胜SVG的武器—流
SVG（Scalable Vector Graphics）是啥？——它叫可缩放矢量图形，是W3C XML的分支语言之一，用于标记可缩放的矢量图形。具体细节，请查看MDN或者维基百科，当然，如果你想看W3C官方文档也是可以的！
虽然SVG有种种优点，如开放、标准，和 CSS 和 JavaScript 都能很方便地进行交等等，但是它也是最近几年才火的！2003年1月，SVG才被确立为W3C标准，不过之后长达10年的时间里边，它都是默默无闻的！
很多人认为它之所以不火的缘故是因为它的竞争对手Flash，其实不然，因为现在看来，SVG显然要比Flash优秀得多啊！
至于它为什么不火，正是那被你忽视的CSS的缘故！
我们知道，在很长一段时间里边，网站的主要功能都是图片和文字信息的展示，但是，SVG 的强项是图形，其文字内容的呈现实在不敢恭维。
如文字的排版：
而这对于CSS来说，这简直是小儿科啊！一行容纳不了就换一行呗！何必要吊死在「一行」上呢？总之，CSS它可以做到自然换行，多行显示，给人一种阅读书本的赶脚！
不管怎样，SVG处理文字（如自动折行），真不是它所擅长的事儿！
至此，SVG就被打入冷宫了！谁叫 你连最基本的信息——文字，都不搞好呢？即便你此刻把图片搞得再6也不行。
于是，CSS表示「我就问，还有谁？」
当然，就现在而言，技术不同往日，Web 呈现更加复杂和丰富多彩，图文显示仅仅是网页功能的一部分，于是，矢量且图形领域颇有造诣的 SVG 开始迎来了自己的第一春。
说了那么多，其实我就是想告诉你「为什么 CSS 世界的图文显示能力那么强？为什么它可以抑制 SVG 这么多年？」
这是因为「流」这个理念呀！
CSS之前因为层叠的缘故击败了其它的竞争对手，而如今又因为「流」的缘故，击败了在图形领域颇有造诣的SVG！
◇何为“流”
接触过CSS的人都知道「文档流」这个概念，当然，作者喜欢称它为「流」哈！因为这够简洁呀！如果你喜欢Rap的话，我想你对于flow或许再熟悉不过了！
那么什么是「流」呢？我想这个问题或许你没有深入思考过！
CSS 世界中的“流”指的是什么呢？“流”实际上是 CSS 世界中的一种基本的定位和布局机制，可以理解为现实世界的一套物理规则，“流”跟现实世界的“水流”有异曲同工的表现。
我们从小接触过这样一套物理规则：
当我们知道这套规则之后，就可以理解现象，并且预知现象。例如，水量超过容器的容积很多，我们就可以预测 到水会溢出来。
这类似于：
if(水量>容器体积) {
//水溢出来了
} else {
//水没有溢出来
}
回到CSS世界里边，我们借助现实生活中的物理学知识，就能很轻松地理解CSS世界里边「流」的概念了！为什么这么说呢？——因为CSS 世界的“流”似乎就是按照物理世界的“水流”创造的。
形象一点来说，就像这样：
根据CSS世界的物理规则，div你这块魔法石，默认就得自动铺满整个容器哈！而其它诸如图片、文字等依次排列，就像块木头一样，而且这无形中就把图片和文字给自动定位了！
◇流是如何影响整个CSS世界的
CSS2.1时期，整个CSS世界几乎就是围绕「流」来建立的！
既然「流」说了算，那么CSS世界的基石——HTML，默认的表现就得符合「流」才行！不然，整个CSS世界就没有秩序了，也就不「流」逼了！
当然，我们总不能总是让那些HTML表现得符合「流」，不然我们的网页也忒存粹了吧！就如W3C那样的文档网页一样！由于，我们现实中的页面是有很多复杂的布局的！因此我们就得通过破坏“流”来实现特殊布局。
当然，这还是得和「流」打交道才行！
在HTML文档里边，如果我们不写任何CSS的话，那么这文档经过浏览器渲染之后，所表现出来的「流」向默认是
「一江春水向东流」、「飞流直下三千尺」的。
你可以把浏览器视口当作是个容器，水槽等等
当然，我们是可以改变这种流向的！毕竟我们得让CSS 的展现更为丰富才行啊！
所以，我们经常听到的这样一句话：「文档流从左往右自上而下」是不严谨的，毕竟我们是可以改变默认的流向的啊！
好了，如果你是造物主的话，那么你能否想到「流」这种姿势可以让我们实现强大的图文排列功能呢？
当然，你可以发散一下思维，如果不用「流」这种姿势的话，是否还有其它设计思路？比如「亲缘机制」之类的！
适当地反问这些问题，通过逆向思维，会让我们对 CSS 世界有另外一个角度的认识。
逆向思维，也称求异思维，它是对司空见惯的似乎已成定论的事物或观点反过来思考的一种思维方式。 敢于“反其道而思之”，让思维向对立面的方向发展，从问题的相反面深入地进行探索，树立新思想，创立新形象。 当大家都朝着一个固定的思维方向思考问题时，而你却独自朝相反的方向思索，这样的思维方式就叫逆向思维。
比如就是用「流」这种姿势了，没有其它姿势了，此时你可以逆向思维一下，比如我就是不用「流」，即便打死我，也不说「真香」二字！
◇什么是流体布局
所谓“流体布局”，指的是利用元素“流”的特性实现的各类布局效果。
而“自适应布局”则是对凡是具有自适应特性的一类布局的统称。
由于「流」本身是具有自适应特性的，所以“流体布局”往往都是具有自适应性的
但流体布局 并不等同于 「自适应布局」，它要狭窄得多呀。如表格布局也可以设置为 100%自适应，但表格和“流”不是一路的，并不属于“流体布局”。
讲真，我不是很理解表格布局为啥不属于流体布局！就像是黄瓜就不属于水果吗？
既然这样说的话，那么我们经常用的div又是什么布局呢？div布局吗？
div这个最常用的魔法石，它是典型的具有“流”特性的元素，曾经风靡的“div+CSS 布局”，实际上指的就是这里的“流体布局”。
关于布局，我们经常写死宽度的布局，叫固定布局呀！而流体布局则是利用流的特性，不写宽高，单位类似于百分比！还有有一种叫弹性布局的，这种布局单位一般是em，根据字体大小来决定页面放大或缩小的效果！响应式布局则是rem加媒体查询了！
➹：★译文：固定布局，流体布局，弹性布局，哪一个适合你？_高小萌_新浪博客
➹：响应式设计：用html5和css3创建一个流体布局 - Janily(一直特立独行的猪)
★CSS世界的开启从IE8开始
这里得世界指的是凡人界——CSS2.1的世界！
而CSS3的世界则是仙界了！而那里的世界则更为庞杂和宏大
不过，凡人界已经足够我们畅游很多年了。至于仙界，目前表示还不能渡劫呀！
当然CSS3的世界并未真正到来！如果有那么一天的话，那么我想你足矣应付！
关于凡人界有哪些国度呢？IE8等这些国家。
对 CSS2.1 的全面支持是从微软公司的 IE8 开始的，因此，本书中几乎所有特性、行为表现都是针对 IE8 以上浏览器的。
★table自己的世界
table它有自己的世界，它比CSS世界的出现还要早，所以这个「流」看来是与你无缘了！
<table>比 CSS 还要老，也就是 CSS 正式诞生之前，<table>就已
经出现了。前面提到了“流影响了整个 CSS 世界”，其中并不包括<table>。<table>有着自
己的世界，“流”的特性对<table>并不适用，一些 CSS 属性的表现，如单元格的
vertical-align，也和普通的元素不一样。
虽然 CSS2.1 加强了和<table>的联系，如对 table 类别的 display 属性值的支持等，
但是本书并不会对<table>进行专门的介绍，因为毕竟不是同一个世界的。
我们知道display的众多值中，有很多是有「table」字眼的，我想这就是CSS世界对它的补偿吧！
★CSS新世界—CSS3
为什么CSS3这个世界会出现呢？
那时因为随着科技的发展，人们对互联网的需求也发生了巨大的变化，而且这是双向的，即技术又会随着需求而发展！
10年前以图文展示的门户网站，显然无法满足现在的用户了！
毕竟，就各种移动设备而言，以及网速显著上升等因素，用户每日所接触到的信息也日益增多，而且信息的载体也越来越丰富，总之，用户需要网页所呈现出来的信息更美观、布局更合理点、还有就是网页要更有活力一点等等
至此，这些需求推动了CSS进入新的世界！
而这个新世界里边：
- 布局更为丰富。
- 移动端的崛起，催生了 CSS3 媒介查询以及许多响应式布局特性的出现，如图片元素 的 srcset 属性、CSS 的 object-fit 属性。
- 弹性盒子布局（flexible box layout）终于熬出了头。
- 栅格布局（grid layout）姗姗来迟
- 视觉表现长足进步。
- 圆角、阴影和渐变让元素更有质感
- transform 变换让元素有更多可能。
- filter 滤镜和混合模式让 Web 轻松变成在线的 Photoshop；
- animation 让动画变得非常简单。
以上所提到的这些属性，都是CSS3的新属性，或者说是CSS3这个世界里边，造物主新配置的魔法师！
由于CSS3 的设计初衷是为了实现更丰富、更复杂的网页，所以基本上和“流”的关系并不大。可以说，和 CSS2 相比 CSS3 就是一个全新的世界，更加丰富，更加规范，更加体系化，也更加复杂。考虑到 CSS3 尚未完全成型，且自己尚未有足够深入的研究，无法同时驾驭太复杂的内容，因此，本书不会深入 CSS3 的知识点。
其实，我还是不太懂流啊！它是CSS2.1世界里边的物理规则，但CSS3世界呢？难道流这套物理规则就不适合了吗？
你总不能说凡人界的人渡劫到仙界，发现那里的人们都是飞来飞去的，根本就没有重力可言吧？
我想作者的意思是说，CSS3的出现与流没有太大关系，毕竟这没有说「流这种姿势不适合现在的网页了，因此我们的CSS3显然要换一套物理规则了」
所以说，CSS3还是一个流的世界，只是出现了一些类似于小世界之类的世界而且还有不被外界所知晓的强大魔法师，他们根据这套小世界的物理规则，可以把魔法石玩出花来！
具体到CSS代码的话，那就是flex容器，以及在这个容器里边所提供的一些属性等等了！
★总结
- CSS世界的「世界观」？即这个世界是怎样的……具体点就如动漫世界般，CSS属性为魔法师，CSS属性值为魔法技能等等……
- 我突然感觉到「先把书读厚，再把书读薄」的韵味！如上边就是对原文，不断地添加自己的理解！这是厚，至于「薄」，我想可以先记住一些关键点就好了！
- 我们可以把CSS属性独立出来看，而不是把它看做是某个元素的一部分！
★Q&A
①什么叫世界观？
(也说宇宙观)人们对整个世界的根本看法。基本内容包括：世界是物质的还是精神的；是发展的还是静止的；是可知的还是不可知的；人与世界的关系如何。
总之世界观就是世界是什么样的，也就是说CSS世界里所呈现的世界是什么样的（可以类比为动漫世界），如魔法师就是CSS属性等等
②「这世间上的事情只要发生了，都是有原因的。」这是真的吗？
CSS出现了，这是有原因的。
JavaScript出现了，这是有原因的。
我出生了，这是有原因的。
我选择学习前端，也是有原因的。
我与你相识相遇，也是有原因的，难道缘分也是原因？
……
换句话说，就是为什么这会发生？
可难道就没有一件事情是没有原因，然后自然而然地就发生了吗？
➹：每件事情都是有它註定會發生的原因，甚至是專為你而發生的 - khemame
③什么叫门户网站？
入口网站（英语对应词：Web portal），指的是将不同来源的信息以一种整齐划一的形式整理、储存并呈现的网站。用户可以根据信息来源、信息类型、关键字检索以及其他方式，来筛选并获取在门户网站内发布的所有内容。
关键点，信息都是来自该门户网站的服务器，不管是原创的，还是复制粘贴的都行！总之，这不是给个链接，链接到别人网站的网站！
④流体和响应式的区别？
fluid 与 responsive ，不太一样。流体的意思是页面的宽度会随着浏览器窗口的变化而变化。 responsive 的意思是，页面的元素或布局可以根据窗口的宽度做出响应，或者叫变化，适应。