CSS-Secrets
CSS-Secrets copied to clipboard
cssmagic
《CSS 揭秘》这本书的大本营
## 花絮与注解 #### 第 10 页 · 第三段 > 举例来说，要把表单元素的字体设定为与页面的其他部分相同，你并不需要重复指定字体属性，只需利用 `inherit` 的特性即可 “表单元素” 指的是输入框、按钮等元素。 为什么要把表单元素的字体设定为 “与页面的其他部分相同”？为什么表单元素不能自动从祖先元素那里继承字体样式？这是因为在浏览器的默认样式中，通常已经给表单元素指定了字体样式。当一个元素自身已经指定某个属性之后，就无法从祖先元素那里继承了。 #### 第 12 页 · 最后一行 > ——在 Iterations 中实践响应式设计 Iterations 是 Basecamp 公司的一个内部管理工具。...
## 花絮与注解 #### 第 205 页 ‧ 最后一行 > GIF 图片的所能使用的颜色数量被限制在 **256 色**。 在翻译这句话时，我对原文做了一些省略。原文是这样的： > They are limited to a **256 color palette**, **shared across all frames**. 我省略了后半句，原因在于原文有误。如果 GIF 动画采用...
## 花絮与注解 #### 第 199 页 ‧ 第二段 > 所有这五种曲线都是通过（三次）贝塞尔曲线来指定的…… 关于 “贝塞尔曲线” 的更多信息，请参见：https://zh.wikipedia.org/wiki/貝茲曲線 。 #### 第 200 页 ‧ “致敬” 区块 > 在 Dan Eden 编写的 animate.css 动画库中，所用到的调速函数分别是 `cubic-bezier(.215,.61,.355,1)` 和...
## 花絮与注解 #### 第 111 页 ‧ 警告栏 > 在编写本书时，**SCSS** 还没有原生支持三角函数。如果想正常使用三角函数，你就需要用到 [Compass 框架](http://compass-style.org) 或其他库。借助泰勒展开式，你其实还可以自己写一套三角函数的实现…… 关于 “泰勒级数”（Taylor Series）和 “泰勒展开式”（Taylor Expansion），可以参考 [维基百科的相关条目](https://zh.wikipedia.org/wiki/%E6%B3%B0%E5%8B%92%E7%BA%A7%E6%95%B0)。 关于在 Sass 中用泰勒展开式实现三角函数，可以参考这个代码片断： [SCSS/SASS module calculating sin/cos/tan using Taylor Expansion](https://gist.github.com/kamikat/c4d472ce3c61feec6376)...
## 花絮与注解 #### 第 191 页 ‧ 第一段 > 有一个具有块级样式的页脚（比如它设置了背景或阴影）…… 这里的 “块级样式” 指那些可以突显出整个元素的块级范围的样式。 这句话的原文是： > a footer with any block-level styling, such as a background or shadow... 这句话我最开始的翻译是 “有一个页脚，它的整个块级范围都填满了一层背景或阴影……”。 试读样章发布之后，收到了微博网友...
## 花絮与注解 #### 第 187 页 ‧ 第二个列表项 > 如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视口裁切掉。 它的底部也会超出视口，只不过我们可以通过页面滚动来查看超出视口的内容。但顶部超出视口的内容就完全没有办法了。 在这个方案中，如果希望这个垂直居中的元素居有停留在视口中央的效果（比如它是一个对话框），我们往往会把 `absolute` 换成 `fixed`。此时，如果这个元素的超高的话，则它底部超出视口的区域也将无法看到了，因为它已经不会随着页面的滚动而滚动了。 #### 第 187 页 ‧ 最后一个列表项 > 在某些浏览器中，这个方法可能会导致元素的显示有一些模糊，因为元素可能被放置在半个像素上。这个问题可以用 `transform-style: preserve-3d` 来修复，不过这个修复手段也可以认为是一个 hack，而且很难保证它在未来不会出问题。 这种现象往往出现在以下两种条件下： * 元素的宽度或高度是奇数像素值，因此引擎在计算...
## 花絮与注解 #### 第 48 页 · 第一段 > 原因是 `background-origin` 的默认值是 `padding-box`，因此，图片的显示尺寸不仅取决于 padding box 的尺寸，而且被放置在了 padding box 的原点（左上角）。 此时背景图片的显示尺寸取决于 padding box 的尺寸，原因在于元素设置了 `background-size: cover` 样式。这个属性的行为是在保持图片的宽高比不变的前提下，先把图片缩小至无穷小，再尝试逐渐拉伸图片，当图片刚刚好可以覆盖住元素时定形。 说到 “覆盖住元素”，还是那句话，实际上需要覆盖住的是元素的 “背景定位区域”。而元素的背景定位区域是由 `background-origin`...
术语翻译对照表
# 术语翻译对照表 | 原文 | 本书译法 | 其它译法（未采用） | | --- | --- | --- | | **CSS** | - | 层叠样式表、级联样式表、样式单 | | cascade | 层叠（机制） | 级联 |...
## 花絮与注解 #### 第 102 页 · 最后一段 > 为了补偿这种情况，我们需要让伪元素**相对其宿主元素的尺寸再向外扩大**至少 `20px`（即它的模糊半径），我们可以通过 `-20px` 的外边距来达到目的，由于不同浏览器的模糊算法可能存在差异，用一个更大的绝对值（比如 `-30px`）会更保险一些…… 书中采用 `margin: -30px` 来实现伪元素向外扩张的效果。当然我们也可以换用另一种方法，把 `top`、`left`、`right`、`bottom` 的值都设置为 `-30px`，效果是一样的。 但显然还是用 `margin` 比较优雅，它的简写语法一个顶四个，改起来也方便。 #### 第 101 页 ‧ 代码块...
## 花絮与注解 #### 第 169 页 ‧ 第二个代码块 > ```js > range.oninput = function() {...} > ``` 这一段在 JS 代码中，作者为简化代码，采用 `.oninput` 这样事件处理属性来绑定事件处理函数。需要提醒大家的是，这种写法在实际开发中应该杜绝。 具体原因请参考这篇文章：[《前端进阶之路：点击事件绑定》](https://github.com/cssmagic/blog/issues/48)。 #### 第 169 页 ‧ 侧栏的 “小提示”...