# 《CSS揭秘》
这本书据说是CSS的经典，看了之后真的才发现CSS可以像公孙离那样花里胡哨，太酷了！！！
# 阅读时间：2020年8月16日 4小时15分
# 第1章 引言
Don't Repeat Yourself(DRY)，意思是不应该重复你已经做过的事。
如果改用百分比或em单位就好多了。
有时候，代码易维护和代码量少不可兼得。
如果把它拆成两条声明的话，改起来就容易多了，而且可读性或许更好一些：
border-width: 10px;
border-left-width: 0;
2
这并不是说媒体查询是一种不良实践。只要用对了，它就是利器。但是，你只应该把它作为最后的手段。
避免使用不必要的媒体查询：
- 使用百分比长度来取代固定长度。如果实在做不到这一点，也应该尝试使用与视口相关的单位（vw、vh、vmin和vmax）,它们的值解析为视口宽度或高度的百分比。
- 当你需要在较大分辨率下得到固定宽度时，使用max-width而不是width，因为它可以适应较小的分辨率，而无需使用媒体查询。
- 不要忘记为替换元素（比如img、object、video、iframe等）设置一个max-width，值为100%。
- 加入背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化，backgroud-size: cover这个属性都可以做到。
- 当图片（或其他元素）以行列式进行布局时，让视口的宽度来决定列的数量。弹性盒布局（即Flexbox）或者display: inline-block加上常规的文本折行行为，都可以实现这一点。
- 在使用多列文本时，指定column-width（列宽）而不是指定column-count（列数）,这样它就可以在较小的屏幕上自动显示为单列布局。
如果只为某个属性提供一个值，那它就会扩散并应用到列表中的每一项。因此我们可以把这些重复的值从简写属性中抽出来写成一个展开式属性：
background: url(tr.png) top right,
url(br.png) bottom right;
url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;
2
3
4
5
# 第2章 背景与边框
默认情况下，背景会延伸到边框所在的区域下层。
box-shadow的好处在于，它支持逗号分隔语法，我们可以创建任意数量的投影。
你可以给box-shadow属性加上inset关键字，来使投影绘制在元素的内圈。
background-position属性已经得到扩展，它允许我们指定背景图片距离任意的偏移量，只要我们在偏移量面前指定关键字。
默认情况下，background-position是以padding box为准的，这样边框才不会遮住背景图片。
如果把它的值改成content-box，我们在background-position属性中使用的边角关键字将会以内容区的边缘作为基准。
padding: 10px;
background: url("code-private.svg") no-repeat #58a
bottom right;
background-origin: content-box;
2
3
4
请不要忘记在calc()函数内部的-和+运算符的两侧各加一个空白符，否则会产生解析错误！
background: linear-gradient(#fb3 20%, #58a 80%);
现在容器顶部的20%区域被填充为#fb3实色，而底部20%区域被填充为#58a实色。真正的渐变只出现在容器60%的高度区域。
如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值得最大值。
repeating-linear-gradient()
重复线性渐变完美适用于——你已经猜到了吧——条纹效果!
网格中每个格子的大小可以调整，而网格线条的粗细同时保持固定。使用长度而不是百分比作为色标的场景：
background: #58a;
background-image:
linear-gradient(white 1px,transparent 0),
linear-gradient(90deg, white 1px,transparent 0);
background-size: 30px 30px;
2
3
4
5
为了让下层的图片背景透过边框区域显示出来，我们需要给两层背景指定不同的background-clip值。
设置蚂蚁行军边框：animation: ants 12s linear infinite；
# 第3章 形状
如果它的宽高相等，就显示为一个圆；如果宽高不等，就显示为一个椭圆。
相同的百分比可能会计算出不同的水平和垂直半径。
通过skew()的变形属性来对这个矩形进行斜向拉伸。
# 第4章 视觉效果
单侧投影：最终的解决方案来自box-shadow鲜为人知的第四个长度参数。它排在模糊半径参数之后，称作扩张半径。这个参数会根据你指定的值去扩大或（当指定负值时）缩小投影的尺寸。
双侧投影：唯一的办法是用两块投影（每边各一块）来达到目的。
# 第5章 字体排版
如果要把font-variant-ligatures属性复位为初始值，应该使用normal而不是none。
我们通常会在font-family声明中同时指定多个字体（即字体队列）。这样，即使我们指定的最优字体不可用，浏览器还可以回退到其他符合整体设计风格的字体。但是，很多开发者都忽略了一点：这个机制对单个字符来说也是有效的。
# 第6章 用户体验
其实有一个元素总是跟复选框形影不离、息息相关，它就是<label>(标签元素)。当<label>元素与复选框关联之后，也可以起到触发开关的作用。
由于label不是复选框那样的替换元素，我们可以为它添加生成性内容（伪元素），并基于复选框的状态来为其设置样式。然后，就可以把真正的复选框隐藏起来（但不能把它从tab键切换焦点的队列中完全删除），再把生成性内容美化一番，用来顶替原来的复选框！
# 第7章 结构与布局
只要换用基于百分比的CSS变形来对元素进行偏移，就不需要再偏移量中把元素的尺寸写死了。这样我们就可以彻底解除对固定尺寸的依赖：
main{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2
3
4
5
6
请注意，当我们使用Flexbox时，margin: auto不仅在水平方向上将元素居中，垂直方向上也是如此。
在未来，对于简单的垂直居中需求，我们完全不需要动用特殊的布局模式了。因为只需要下面这行代码可以搞定：
align-self: center;
此时我们所期望的是，页头和页脚的高度由其内部因素来决定，而内容区块的高度应该可以自动伸展并占满所有的可用空间。我们只要给<main>这个容器的flex属性指定一个大于0的值，（比如1即可），就可以实现这个效果了：
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
main { flex: 1; }
2
3
4
5
6
# 第8章 过渡与动画
圆圈环绕效果