CSS 推荐阅读，张鑫旭大神的《CSS世界》，继《CSS选择器世界》又出进阶版——《CSS新世界》，号称“CSS世界三部曲”的“终结版”

• CSS这门语言入门易、深入难
• 学到的够用了？不够的百度就可以？不！CSS还可以更强大！

引用《微信读书》排在首位的读者 灵感_idea 点评：

• CSS看似零散的知识，也是有规可循，可以系统化的。
• 大部分因“难以实现”而妥协的方案，都是认知局限在作祟。
• 所有在其他地方学过的，都可以通过本书重学一次。
• 不是简单对新增属性罗列，是按照使用的场景分类讲解。
• 不仅知识点比较“绝”，解决问题的思路也很绝，都能显现出作者在该领域的专家级水平。

笔记内容仅作学习记录用，侵权立删

一、CSS3出现的历史和背景

技术的发展受到计算机网络基础设施的限制，CSS也不例外。

CSS2.1中的CSS属性的设计初衷是 展示图文，即为图文排版服务。因为在CSS2.1时代，互联网刚刚兴起，计算机硬件、网络带宽等基础设施都比较薄弱。

• 屏幕像素低，所以丰富的色彩和细腻的图形细节无法呈现；
• 硬件性能差，所以动画和滤镜渲染效果不佳；
• 网络速度慢，所以高清大图和视频加载不出来。

后来互联网技术兴起，需要复杂布局，没有办法，只能 充分挖掘 CSS当前版本的潜力（充分挖掘，结合当时的发展环境来看这个词用的很好）：

• float 盛行
• table 用来布局（原始<table> <td> <tr>标签）

终于 CSS3 来了！

根据应用场景的类型将CSS新特性划分为下面4个方向：

• 更复杂、更具弹性的布局的支持，如弹性布局、网格布局等；
• 更丰富的视觉表现的支持，如圆角、盒阴影、动画和渐变等；
• 更多样的浏览设备的支持，如CSS Media Queries媒体查询等；
• 开发者CSS自定义能力的支持，如CSS Houdini等。

CSS新特性：语法更加复杂，但是理解更加简单。

• CSS新特性语法设计非常明确，布局相关的CSS特性就用来布局，视觉表现相关的CSS特性就用来实现视觉效果，背后没有其他看不见的CSS特性互相干涉。只要记住了语法，就不会出现意料之外的渲染场景。
• CSS新特性是跟随时代发展而产生的，旨在构建更加丰富的Web应用程序。CSS新特性分工很细，这带来的好处是让语法理解起来更简单，但是这些CSS特性属性种类更复杂
• 简洁明了的语法是牺牲CSS属性的数量换来的，也就是理解成本降低了，但是记忆的成本提高了。

总结一下：更复杂！更简单！。。。

二、模块化的CSS新世界

会有CSS4吗？

No！

• CSS按照大版本的方式进行迭代实在是太低效了。
• 在Web前端领域，新技术的发展十分迅速，而CSS的规范又是基于当前环境制定的。
• 不能快速响应时代变化的语言不是一门好语言。

模块化的版本更新：

• 各自按照自己的速度走向标准化。例如，CSS选择器模块已经到了Level 4了，弹性布局模块还是Level 1。
• 浏览器厂商可以根据对自己需求的判断决定究竟对哪些模块进行支持，哪怕这个模块还处于草案状态。

但会有设计冗余：

• 弹性布局和网格布局中的对齐属性其实可以统一
• 分栏布局、弹性布局和网格布局中的间隙其实可以统一
  .

好在纠正及时，现在这三大布局全部开始改用gap属性表示间隙，减少了因为模块化带来的设计冗余。

模糊 => 明确

这个CSS新世界带来了新的CSS属性，并让很多CSS2中模糊的概念有了明确的定义，如尺寸体系、逻辑属性、CSS值类型划分等。

CSS新世界不仅是一个模块化的世界，还是一个 缤纷多彩 ，同时又 自成一体 的 严谨 的世界。

读完第一章，感觉豁然开朗，原来 CSS 是这样发展的，原来让人又爱又恨的 float ，是我们错怪了它。。。

接下来，CSS 新世界，我很期待。。。

Reading…