Add notes.

Author: cssmagic

.gitignore

@@ -36,3 +36,4 @@ notes/*/*.md
 !notes/*/508.md
 !notes/*/509.md
 !notes/chapter-6/*.md
+!notes/chapter-7/*.md

doc/index.md

@@ -71,8 +71,8 @@ issue: 17
 702| [37] 精确控制表格列宽|-|〃|-
 703| [38] 根据兄弟元素的数量来设置样式|-|〃|-
 704| [39] 满幅的背景、定宽的内容|-|〃|-
-705| [40] 垂直居中|-|〃|-
-706| [41] 紧贴底部的页脚|[试读](https://github.com/cssmagic/CSS-Secrets/issues/18)|〃|-
+705| [40] 垂直居中|-|〃| [免费阅读](https://github.com/cssmagic/CSS-Secrets/issues/77)
+706| [41] 紧贴底部的页脚|[试读](https://github.com/cssmagic/CSS-Secrets/issues/18)|〃| [免费阅读](https://github.com/cssmagic/CSS-Secrets/issues/78)
 | |
 **第八章** | **过渡与动画**|| [购买后阅读 <sup>↗</sup>](http://www.ituring.com.cn/book/tupubarticle4/9400)|
 801| [42] 缓动效果|-|〃|-

notes/chapter-7/705.md

@@ -0,0 +1,28 @@
+---
+title: "[注解] [705] 垂直居中"
+issue: 77
+---
+
+## 花絮与注解
+
+#### 第 187 页 ‧ 第二个列表项
+
+> 如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视口裁切掉。
+
+它的底部也会超出视口，只不过我们可以通过页面滚动来查看超出视口的内容。但顶部超出视口的内容就完全没有办法了。
+
+在这个方案中，如果希望这个垂直居中的元素居有停留在视口中央的效果（比如它是一个对话框），我们往往会把 `absolute` 换成 `fixed`。此时，如果这个元素的超高的话，则它底部超出视口的区域也将无法看到了，因为它已经不会随着页面的滚动而滚动了。
+
+#### 第 187 页 ‧ 最后一个列表项
+
+> 在某些浏览器中，这个方法可能会导致元素的显示有一些模糊，因为元素可能被放置在半个像素上。这个问题可以用 `transform-style: preserve-3d` 来修复，不过这个修复手段也可以认为是一个 hack，而且很难保证它在未来不会出问题。
+
+这种现象往往出现在以下两种条件下：
+
+* 元素的宽度或高度是奇数像素值，因此引擎在计算 `translate(-50%, -50%)` 时会产生小数（即书中提到的 “半个像素”）。
+
+* 引擎支持视网膜显示屏的物理像素级别的渲染（也就是说，引擎支持以 “半个像素” 或更小的单位来计算布局），而实际设备并没有配备视网膜显示屏。比如一台升级到了 iOS 4+ 的 iPod touch 2，或者运行在常规显示器上的 Chrome 浏览器。
+
+在这种情况下，引擎绘制出的元素布局与显示器的物理像素栅格之间存在错位，最终的显示效果就是模糊的了。
+
+如何避免这种模糊效果？除了书中提到的 `preserve-3d` 这个 hack 之外，最保险的方案还是确保这个元素的宽高总是偶数像素值。

notes/chapter-7/706.md

@@ -0,0 +1,33 @@
+---
+title: "[注解] [706] 紧贴底部的页脚"
+issue: 78
+---
+
+## 花絮与注解
+
+#### 第 191 页 ‧ 第一段
+
+> 有一个具有块级样式的页脚（比如它设置了背景或阴影）……
+
+这里的 “块级样式” 指那些可以突显出整个元素的块级范围的样式。
+
+这句话的原文是：
+
+> a footer with any block-level styling, such as a background or shadow...
+
+这句话我最开始的翻译是 “有一个页脚，它的整个块级范围都填满了一层背景或阴影……”。
+
+试读样章发布之后，收到了微博网友 [@残阳映枫红](http://weibo.com/haoycn) 的修改建议：
+
+> 我理解的是，原作者想要强调的是页脚具有块级样式，至于块级样式是什么无所谓，所以就举例背景和阴影好了。因为重点是块级样式造成这种视觉上的不紧贴视口，假如没有背景或者阴影而是边框，一样会出现这种情况。因此您翻译的 “有一个页脚，它的整个块级范围都填满了一层背景或阴影” 可能理解下来是说这个页脚必须得有个背景或者阴影，而且还得铺满，与原意有所出入。我简单译为“一个块级样式的页脚，比如设置了背景或阴影”。
+
+特此鸣谢！
+
+#### 第 193 页 ‧ 第一个标题
+
+> 更灵活的解决方案
+
+原文是 “Flexible solution”，一方面表示其基于 Flexbox，一方面表达出无需指定高度、更加灵活之意。
+
+一语双关。可惜我用汉语翻译不出来啊。
+