CSS揭秘（引言）

**1.当某些值相互依赖时， 应该把
它们的相互关系用代码表达出来**

**2. 要把超链接的颜色设定为与页面中其他文本相同， 还是要用
inherit**

a { color: inherit; }

3.inherit 关键字对于背景色同样非常有用

.callout { position: relative; }
.callout::before {
content: "";
position: absolute;
top: -.4em; left: 1em;
padding: .35em;
background: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
}

4.如何避免不必要的媒体查询
（1）使用百分比长度来取代固定长度。 如果实在做不到这一点， 也应该
尝试使用与视口相关的单位（ vw、 vh、 vmin 和 vmax）， 它们的值解
析为视口宽度或高度的百分比。
（2）当你需要在较大分辨率下得到固定宽度时， 使用 max-width 而不是
width， 因为它可以适应较小的分辨率， 而无需使用媒体查询。
（3）不要忘记为替换元素（ 比如 img、 object、 video、 iframe 等） 设
置一个 max-width， 值为 100%。
（4）假如背景图片需要完整地铺满一个容器， 不管容器的尺寸如何变化，
background-size: cover 这个属性都可以做到。 但是， 我们也要时
刻牢记——带宽并不是无限的， 因此在移动网页中通过 CSS 把一张
大图缩小显示往往是不太明智的。
（5）当图片（ 或其他元素） 以行列式进行布局时， 让视口的宽度来决定
列的数量。 弹性盒布局（ 即 Flexbox） 或者 display: inline-block
加上常规的文本折行行为， 都可以实现这一点。
（6） 在 使 用 多 列 文 本 时， 指 定 column-width（列 宽） 而 不 是 指 定
column-count（ 列数）， 这样它就可以在较小的屏幕上自动显示为单
列布局。

5.简写属性

background: url(tr.png) no-repeat top right / 2em 2em,
url(br.png) no-repeat bottom right / 2em 2em,
url(bl.png) no-repeat bottom left / 2em 2em;

background: url(tr.png) top right,
url(br.png) bottom right,
url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;