text-transform:capitalize：none 、 uppercase 、 lowercase 、 capitalize
vertical-align 以基线为参照上下移动文本，但这个属性只影响行内元素
使用紧邻同胞选择符 +
li + li 选择符的意思是“任何跟在 li 之后的 li ”。
修改input-placeholder默认样式
form.search input::-webkit-input-placeholder {color:#ccc;}
图片垂直居中
可以将容器的 display 属性设定为 table-cell，再设定（只对单元格有效的）vertical-align 属性为 middle，比如：display:table-cell; /*借用表格的行为*/vertical-align:middle; /*垂直居中*/text-align:center; /*水平居中*/
input:-webkit-autofill
input:-webkit-autofill { color:#fff !important; } /*去掉 WebKit 默认的黄色背景*/
请不要忘记在 calc() 函数
内部的 - 和 + 运算符的两侧各加
一个空白符，否则会产生解析错
误！这个规则如此怪异，是为了
向前兼容：未来，在 calc() 内部
可能会允许使用关键字，而这些
关键字可能会包含连字符（即减
号）让我们回顾一下本节开头的挑战：把背景图片定位到距离底边 10px 且
距离右边 20px 的位置。如果我们仍然以左上角偏移的思路来考虑，其实
就是希望它有一个 100% - 20px 的水平偏移量，以及 100% - 10px 的垂直
偏移量。谢天谢地， calc() 函数允许我们执行此类运算，它可以完美地在
background-position 属性中使用：
background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
最终的解决方案来自 box-shadow 鲜为人知的第四个长度参数。它排在
模糊半径参数之后，称作扩张半径。这个参数会根据你指定的值去扩大或
（当指定负值时）缩小投影的尺寸。举例来说，一个 -5px 的扩张半径会把投
影的宽度和高度各减少 10px （即每边各 5px ）
min-content
---
CSS 内部与外部尺寸模型（第三版）（http://w3.org/TR/css3-sizing）是
一个相对较新的规范，它为 width 和 height 属性定义了一些新的关键字，
其中最有用的应该就是 min-content 了。这个关键字将解析为这个容器内
部最大的不可断行元素的宽度（即最宽的单词、图片或具有固定宽度的盒元
素）
1① 。这正是我们梦寐以求的！现在，使用以下两行简单的 CSS 代码就可以
把 figure 设置为恰当的宽度，并让它水平居中：
<p>Some text [...]</p>
<figure>
<img src="adamcatlace.jpg" />
<figcaption>
The great Sir Adam Catlace was named after
Countess Ada Lovelace, the first programmer.
</figcaption>
</figure>
<p>More text [...].</p>
figure {
max- 300px;
max- min-content;
margin: auto;
}
figure > img { max- inherit; }
##calc实现水平居中
<footer>
<div class="wrapper">
<!-- 页脚的内容写在这里 -->
</div>
</footer>
同时用 CSS 来设置这两层元素的样式：
footer {
background: #333;
}
.wrapper {
max- 900px;
margin: 1em auto;
}
我们先来想一想， margin: auto 在这个场景下到底发挥了什么作用。
这条声明所产生的左右外边距实际上都等于视口宽度的一半减去内容宽度的
一半。由于百分比在这里是基于视口宽度来解析的（假设所有祖先元素都没
有显式指定宽度），我们可以把这个外边距的值表达为 50% - 450px 。实际
上，CSS 值与单位（第三版）（http://w3.org/TR/css-values-3/#calc）定义了一
HTML
借宿网站 airbnb.com 在页脚中采
用了这个设计
第 7 章 结构与布局 184
个 calc() 函数，它允许我们在 CSS 中直接以这种简单的算式来指定属性的
值。如果用 calc() 取代原先的 auto ，这个内层容器的样式就会变成：
.wrapper {
max- 900px;
margin: 1em calc(50% - 450px);
}
之所以要在页脚内加一层容器元素，唯一的原因就是为了给它的
margin 指定神奇的 auto 关键字，从而实现内容的水平居中布局。不过，现
在我们已经用 calc() 替代了这个神奇的 auto ，而且这个新值实际上可以作
为一个通用的 CSS 长度值应用到任何一个接受长度值的属性上。这意味着
如果我们愿意，还可以把这个长度值应用到父元素的 padding 上，而整个效
果是保持不变的：
footer {
max- 900px;
padding: 1em calc(50% - 450px);
background: #333;
}
.wrapper {}
##vw与vh
不过幸运的是，如果只是想把元素相对于视口进行居中，仍然是有希
望 的。CSS 值 与 单 位（ 第 三 版 ）（http://w3.org/TR/css-values-3/#viewport-
relative-lengths）定义了一套新的单位，称为视口相关的长度单位 1① 。
vw 是与视口宽度相关的。与常人的直觉不符的是， 1vw 实际上表示
视口宽度的 1%，而不是 100%。
与 vw 类似， 1vh 表示视口高度的 1%。
当视口宽度小于高度时， 1vmin 等于 1vw ，否则等于 1vh 。
当视口宽度大于高度时， 1vmax 等于 1vw ，否则等于 1vh 。
在我们的这个例子中，适用于外边距的是 vh 单位：