这本书很细，读到第4章有点举步维艰，重新回头，将未完成的笔记做完。复习一下，重新找到书的脉络，以及读这本书更有效的方法。这本书是张鑫旭大佬 css 三部曲的第一部。
这是本进阶的书，我没有系统学习过 css 的特性，比如菜鸟教程或其他的 css 的书，但是我有开发的经验，选择这本书是没问题的，只不过会难啃一些。
css 不能像其他编程语言一样去学习，css 呈现的效果是多个属性共同作用造成的，不像 js 中数组的某个方法，其效果就是这个 api 单独造成的。学习 css 更看重的是特性间的相互联系和具象能力，要将所有 css 属性当作一个整体，每个 css 属性都有其存在的原因，都和其他属性有着千丝万缕的关系，背后的联系非常庞大。
概念、术语
从整体出发构建一个 css 的世界观，让我们对 css 的认识更加立体、丰满。css 和其他的编程语言不同，更加抽象、感性，只有通过联系、具象的思考、理解，才能更好的学习。
书中构筑了一个世界，建筑魔法世界。属性为魔法师，值为技能，选择器为法器，标签元素为魔法石，浏览器为王国，操作系统为世界。可以想象，在 windows 世界中，有着几大王国（chrome、ie、firefox、safari、opera等等），魔法师挥舞着法杖发动五花八门的技能对魔法石进行打造，使其变化多端、形状各异、多姿多彩。利用这些魔法石以及改造后的魔法石构建起了一座座美丽的建筑，伫立在王国中。
凡事有因必有果，css 的各种奇异属性也是有原因的，和被创造时的需求不可分离。1995年，html 还是第一版，w3c 才成立，css 还没出现。后来，css 凭借“层叠”特性从几个样式语言中胜出，层叠策略可以让样式的显示十分灵活。1996年12月 css1 诞生。1998年5月 css2 诞生，推行内容与样式分离。98年是门户的时代，人们关注的是信息的获取，所以网站的需求就是信息的展示。那个时代，信息就是“图片和文字”。css2（以及，2007推出的 css2.1）都是为“图片”和“文字”服务的。
流
css 凭借流击败了2003年推出的 svg。svg 的强势在于图形处理，然而 css 的图形处理能力也不差，而文字方面完全被 css 碾压。这就导致 svg 被压制这么多年。
流就是文档流，css 中基本的定位和布局机制。这种机制是如何影响网页的呢？
首先，html 元素是网页的基石、骨架，html 元素默认的表现就是水平流。其次，有时候需要复杂特殊的布局效果，可以破坏“流”达到。最后，流的流向是可以改变的，只是默认的流向是水平向右，垂直向下。
除了流这种机制，还有其他机制能实现吗？比如，亲缘机制？这个听都没听说过，后续在捋。
“流式布局”就是利用元素流的特性实现的各类布局效果，“流”本身具有“自适应特性”，但是流布局并不等同于自适应布局，比如 table 布局就不是流布局。
table 布局用的 table 元素，这个元素比 css 出现的都早，流特性虽然影响整个 css 世界，但是并不适用于 table 元素，table 有着自己的世界。
css2.1 被 ie8 全面支持，这本书中的几乎所有 demo 都是针对 ie8 及以上浏览器的。
css3
css3 的重点在于“布局”、“视觉表现”。布局这块和流关系还是挺多的吧。2.1 就是 3 的大基础。
术语
属性、值、关键字、变量、长度单位、功能符、属性值、声明、声明块、规则或规则集、选择器。
- 值有很多种，整数值、小数、百分比、长度值、颜色值、字符串值、位置值、角度值、频率值、时间值。
- 关键字有 solid、inherit，inherit 又叫泛关键字，所有的属性都能用。
- 变量是 css3 的东西，内置的变量有 currentColor。
- 长度单位有 px、em 等，分为绝对长度单位和相对长度单位，相对字体（em、ex、rem、ch）和相对视区（vw、vh、vmin、vmax）。
- 功能符将值以函数的形式包裹起来，有表示颜色、背景图片地址、元素属性值、计算、过渡效果等，rgba(0,0,0,.5)、url(‘-css-world.png’)、attr(‘href’)、scale(-1)。
- 属性值可以是单一的值，也可以是值、关键字、功能符的组合。属性名冒号到分号前的内容都是属性值。
- 声明就是属性名加上属性值。声明块由花括号包括起来的声明序列。
- 普通规则由选择器和声明块组成。选择器又有3种分类，简单选择器，复合选择器，复杂选择器，选择器列表。
- @规则由@特殊字符开头，有 @media、@font-face、@page、@support 等特殊规则。
上面这些术语其实也可以叫做 css 的语法结构。 从最完整的规则，到选择器和声明块，再到声明块内的声明语句，声明又由属性名和属性值组成，属性值又有多种形式，可以是值、关键字、功能符之间的多种组合。
流、元素、基本尺寸
流为什么能影响 css 世界呢，html 元素默认的表现就是水平流。html 元素分为两类，块级元素、内联元素。“块级元素”和“display 为 block 的元素”不是一个概念 。
块级元素的特征，换行特性，水平流方向上一行只能放一个块级元素，多个块级元素会换行显示。当然还有其他特征，后面再总结。
块级元素的换行特性可以搭配 clear 属性清除浮动。实际应用中一般用 block、table 清除浮动，并不会用 list-item，原因有2个，①出现多余的项目符号；②ie 不支持伪元素 display 设置为 list-item。这两个原因背后的体系是盒模型，非常多的盒子来袭。
最初只有块级盒子、内联盒子，块级盒子负责结构，内联盒子负责宽高、内容呈现。每个元素都有这两个盒子，又分别叫做外在盒子、内在盒子（容器盒子）。
除了这两种盒子，还有标记盒子。list-item 元素会出现项目符号是因为生成 标记盒子（marker box），专门用来放圆点、数字这些项目符号。IE 浏览器下伪元素不支持 list-item 或许就是无法创建这个“标记盒子”导致的。
值为 block 的元素的盒子实际由外在的“块级盒子”和内在的“块级容器盒子”组成，值为 inline-block 的元素则由外在的“内联盒子”和内在的“块级容器盒子”组成，值为 inline 的元素则内外均是“内联盒子”。
display: inline-table 的盒子是如何组成的，外面是内联盒子，内部是table盒子。
无宽度，width: auto
witdth / height 属性作用在元素的容器盒子。块级元素的流特性主要体现在水平方向上。width 属性的默认值是 auto，这个默认值很叼，auto 在不同的场景有4种表现，fill-available、fit-content、min-content、max-content。
充分利用可用空间， 比方说，
这些元素的宽度默认是 100%于父级容器的 content-box 的宽度，fill-available。不论是标准盒模型还是怪异盒模型。
收缩与包裹，典型的代表是浮动、绝对定位、inline-block 元素或 table 元素，这些元素的宽度都由子元素决定。
收缩到最小， table-layout 为 auto 的表格中，当每一列的空间不够时，第一列文字的每个字符就会断开换行。
超出容器限制，内容很长的连续的英文和数字，或者内联元素被设置了 white-space:nowrap，内部元素的宽度就会超过外部元素容器的限制。
CSS 世界中，显示也分“内部显示”和“外部显示”，尺寸也分“内部尺寸”和“外部尺寸”。内部尺寸表示尺寸由内部元素决定；外部尺寸表示宽度由外部元素决定。auto 的第一种表现就属于外部尺寸，其余都是内部尺寸，这个唯一的外部尺寸表现正是流的精髓。
外部尺寸的流体特性，有两点，① 正常流宽度，②格式化宽度。“三无准则”，无宽度、无图片、无浮动。无宽度的原因是表现为外部尺寸的元素设置了 width 就会失去流动性。
块级元素的流动性，是一种 content / border / padding / margin 自动分配水平空间的机制，并不是宽度 100% 这么简单。css3 中，规定这种内在盒子为 flow，也就是说 display : block 应该是 display: block flow。设置了具体的值，就没法充分利用容器空间，丢失流动性。
格式化宽度，水就比较深了，和 position 有很大关系。position 为 absolute 或 fixed 的元素中，对于非替换元素，当 left/right 或 top/bottom 属性值同时存在时，元素的尺寸由外部元素来决定，相对于最近的具有定位特性（除了 static）的祖先元素进行计算。而默认情况下，绝对定位元素的宽度是“包裹性”，由内部元素决定。第6章有更多介绍。
内部尺寸的流动特性，内部尺寸有3种表现形式，包裹性、首选最小宽度、最大宽度。如果一个元素没有内容，宽度为0，那么就是应用的内部尺寸。浮动、绝对定位、inline-block 元素、table 的宽度都是由子元素决定的。
包裹性不仅能包裹，还能自适应，自适应特性就是元素宽度由内部元素决定，但元素宽度永远小于包含容器的尺寸，除了包含容器的宽度小于元素的最小宽度（min-width）。
若有收获，就点个赞吧
0 人点赞
