讲的很详细。
读完时间：2019 年 3 月 24 日
出版时间：2015 年 1 月
2.4 动态伪类选择器
锚点伪类的设置必须遵守一个“爱恨原则”LoVe/HAte，也就是“link-visited-hover-active”。
2.5 目标伪类选择器
E:target 目生效标。伪类选择器是动态选择器，只有存在URL指向该匹配元素时，样式效果才会生效。
2.8 结构伪类选择器
通过 :nth-child(-n+5) 来选择列表中前5个子元素 li。
:empty 用来选择没有任何内容的元素，这里“没有任何内容”指的是一点内容都没有，哪怕是一个空格。这个选择器用来处理动态输出内容方面非常方便。例如想高亮提示用户搜索出来的结果为空时，就可以这样使用。
2.10 伪元素
伪元素 ::selection 仅接受两个属性，一个是 background，另一个是 color。
2.11 属性选择器
E[attr|=val] 为特定属性选择器，选择 attr 属性值等于 val，或以 val- 开头的所有字符串属性的元素。
a[title~=links] 属性值中的 links 是一个单词，而 a[title*=links] 中的 links 不一定是一个单词，就如上面的示例中，可以是 linksitem。换句话来说，<a title='linksitem'></a > 元素只有 a[title*=links] 匹配，但是 <a title='links item'></a > 元素，a[title~=links] 和 a[title*=links] 都匹配。
表示选择 attr 属性值以 val 结尾的所有元素。运用在一些特殊的链接加背景图很方便，例如给 PDF、PNG、DOC 等不同文件加上不同的 ICON 图标就可以使用这个属性。
3.2 CSS3 边框颜色属性
当 border-color 只设置一个颜色值时，效果和 CSS1 中的 border-color 效果一样。只有设置了 n 个颜色，并且边框宽度也为 n 像素，就可以使用 CSS3 的 border-color 属性设置 n 个颜色，每种颜色显示 1 像素的宽度，如果宽度值大于颜色数量的值，最后一种颜色用于显示剩下的宽度。
3.4 CSS3 圆角边框属性
四个子属性取值和 border-radius 是一样的，只不过水平和垂直方向仅一个值，/ 前面的值为水平方向半径，后面的值为垂直方向半径。
当 border-radius 半径值小于或等于 border 的厚度时，元素边框内部就不具有圆角效果。
3.5 CSS3 盒子阴影属性
主要通过 box-shadow 的水平和垂直阴影的偏移量来实现，其中 x-offset 为正值时，生成右边阴影，反之为负值时，生成左边阴影；y-offset 为正值时，生成底部阴影，反之为负值时生成顶部阴影。
box-shadow 不会影响页面的任何布局。div.border 元素的边框被计算了宽度，但 div.box-shadow 的阴影被浏览器忽略不计，所以借助 box-shadow 属性的这个特性，border-shadow 用来模拟元素的边框效果可以自由地使用，但必须注意其层级关系。
边框在内阴影之上，内阴影在背景图片之上，背景图片在背景色之上，背景色在外阴影之上。
在使用多层级 box-shadow 时，还需要特别注意阴影的顺序，最先写的阴影将显示在最顶层。
4.2 CSS3 背景原点属性
background-origin 属性主要用来决定 background-position 属性的参考原点，即决定背景图片定位的起点。
IE8 下以版本 background-origin 的默认值 border，背景图片的 background-position 是从 border 开始显示背景图片。
如果将 background-attachment 设置为 fixed，background-origin 将不起任何作用。
4.3 CSS3 背景裁切属性
在 CSS2.1 至 CSS3 中，背景在整个盒模型中，它是布满整个元素的盒子区域的，并不是从内部补白（ padding ）开始，只不过边框部分遮住了部分 background，但有一点需要注意，当元素的 background-repeat 为 no-repeat 时，background-color 是从元素的边框左上角起到边框右下角止，而 background-image 却不一样，从内部补白（ padding ）边缘的左上角起到元素边框（ border ）的右下角边缘止。
4.4 CSS3 背景尺寸属性
当 background-size 取值为百分值时，不是相对于背景图片的尺寸大小来计算，而是相对于元素宽度来计算。
background-size: cover 配合 background-position: center 常用来制作满屏背景效果。唯一的缺点是，需要制作一张足够大的背景图片，不然在较大分辨率浏览器下会致使背景图片失真。
4.6 CSS3 多背景属性
background-color 只能设置一个，如果设置了多个 background-color 将是一种致命的语法错误(MAZEY!颜色不会生效)。
5.3 CSS3 溢出文本属性
text-overflow 属性仅用于决定文本溢出时是否显示省略标记（ … ），并不具备样式定义的功能。要实现文本溢出时裁切文本显示省略标记（ … ）效果，还需要两个属性的配合；强制文本在一行显示（ white-space: nowrap ）和溢出内容隐藏（ overflow: hidden ），并且需要定义容器的宽度。
要让 text-overflow 属性起到实际的样式效果，必须同时具备以下三个属性，缺一不可。
width：明确给需要截取文本的容器设置宽度值。white-space: nowrap：给文本容器设置强制不换行，让元素文本一行内显示。overflow: hidden：设置容器文本溢出时隐藏。
5.4 CSS3 文本换行
pre 标签自动换行: 主要问题就是长串英文和英文单词会被断开。为了解决这个问题，可使用 word-wrap: break-word 和 overflow: hidden 结合，而不是 word-wrap: break-word 和 wordbreak: break-all 结合。
(MAZEY! 彻底搞懂word-break、word-wrap、white-space)
6.2 CSS3 透明属性
opacity 却只能给整个元素设置一个透明度，并且其透明度直接会继承给其后代元素。
IE8 以下版本不支持 opacity 透明属性，但可以使用其专有的滤镜来实现 opacity 透明属性的透明效果。
6.3 CSS3 颜色模式
H：色调（Hue）。取整数值（
7.1 CSS 盒模型简介
padding、content、background-image、background-color，它们四者构成了 Z 轴（垂直屏幕的坐标）多重层叠关系。但是 border 与 margin、padding 三者之间应该是平面上的并级关系，并不能构成Z轴的层叠关系。
7.2 CSS3 盒模型属性
在 W3C 规范中，元素的 box-sizing 默认属性值是 content-box 值，如果不显式重置 box-sizing 属性值为 border-box，才能明确对元素设置一个总宽度。
7.5 CSS3 外轮廓属性
outline-offset：定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。
8.1 Flexbox 模型基础知识
若元素 display 的指定值是 inline-flex 且元素是一个浮动或绝对定位元素，则 display 的计算值是 flex。
伸缩流方向主要通过 flex-direction 属性来设置，其默认值为 row。伸缩流方向和书写模式有关系，换句话说，伸缩项目根据书写模式的方向布局。
8.4 新版本 Flexbox 模型的基本使用
CSS 的 columns 在伸缩容器上没有效果；float、clear 和 vertical-align 在伸缩项目上没有效果。
flex-flow 属性和 writing-mode 有直接的关系。当使用 writing-mode: vertical-rl 时转向垂直布局（如传统的中文、日文和韩文排版，也就是竖排），flex-flow: row 将垂直排列伸缩项目，和 column 将水平排列伸缩项目。
如果伸缩项目的任一个侧轴上的外边距为 auto，则 align-self 没有效果。
这个属性只有伸缩项目有多行时才生效，这种情况只有 display 的 flex-wrap 为 wrap 时，并且没有足够的空间把伸缩项目行放在同一行中。也就是这个属性将对每一行起作用而不是每个伸缩项目。
默认状态下，伸缩项目不会收缩至比其最小内容尺寸更小，可以设置 min-width 或 min-height 属性来改变这个默认状态。
9.1 CSS3 多列布局简介
columns：集成 column-width 和 column-count 两个属性，用于实现元素多列布局效果。
column-gap：定义列间距。
9.3 CSS3 多列布局列宽属性
column-count 属性指定了最大列数。
9.8 CSS3 多列布局列高度属性
在列布局当中，有时由于内容不足，在多列之中最后列往往会没有足够内容填充。但实际制作中往往有时候的页面效果就必须让所有列都具有相同的高度效果。这个时候需要这一节将要介绍的属性 column-fill。
11.2 CSS 变形属性详解
CSS3 变形中旋转、缩放、倾斜都可以通过 transform-origin 属性重置元素的原点，但其中的位移 translate() 始终以元素中心点进行位移。
11.4 CSS3 3D 变形
倾斜是二维变形，不能在三维空间变形。元素可能会在 X 轴和 Y 轴倾斜，然后转化为三维，但它们不能在Z轴倾斜。
12.2 CSS3 过渡子属性详解
用 transition-property 来指定过渡属性并不是所有属性都可以过渡，只有属性具有一个中点值的属性才能具备过渡效果。
transition-delay 用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行过渡效果，其取值为
12.3 CSS3 触发过渡
触发元素状态变化的另一种方法是使用 CSS3 媒体查询（ Media Queries ）。
12.4 CSS3 过渡技巧
在这段代码中，将最初的声明转为 :hover 状态，并在触发 :hover 前向元素应用的样式添加了一行新代码。现在，“开启”过渡需要 2 秒（指定为 2s linear ），“关闭”过渡需要 1 秒（指定为 1s ease-out ）。
另一项关于过渡的技巧是使用无限延迟模拟永久状态更改，并且无须使用 JavaScript 脚本代码。
14.2 媒体特性
对于屏幕同样可以使用 min / max 对应参数，如 min-device-width 或者 max-device-width。
15.2 实现 @font-face
@font-face 规则中的 font-family 与其他样式中的 font-fmaily 略有不同。在 @font-face 中的 font-family 只是声明了字体的名称（也就是自定义了字体的名称），而没有向元素中分配这种字体。而样式中的 font-family 却是显式地为元素指定字体名称。
