CSS编码技巧
下面三个按钮大小会随根元素html的字体大小改变，只需将半透明的黑色或者白色添加到主色调上，即可产生主色调的亮色或暗色变体
currentColor是CSS中有史以来的第一个变量，自动从文本颜色得到颜色，同时curentColor本事是很多CSS颜色属性的初始值，比如：border-color和outeline-color以及txt-shadow和box-shadow的颜色值,下面的p元素与hr元素的backgrond-color初始值也为currentColor
只设置color
inherit可以用在任何CSS属性中，而且总是绑定到父元素的就安置（对伪元素来说，则会取生成该伪元素的宿主元素）
下面的yolo
yolo减少媒体查询
- 使用百分比长度来取代固定长度。如果实在做不到这点，也应该尝试使用与视口相关的单位（vw、vh、vmin和vmax），它们的值解析为视口宽度或高度的百分比
- 当需要在较大分辨率下得到固定宽度是，使用max-width而不是width，因为他可以适应较小的分辨率，而无需使用媒体查询。
- 不要忘记为替换元素(如img、object、video、iframe等)设置一个max-width，值为100%。
- 假如背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化，background-size:cover这个属性都可以做到。但是，也要时刻牢记--带宽并不是无限的，因此在移动页面中通过CSS把一张大图缩小显示往往是不太明智的
- 当图片（或其他元素）以行列进行布局时，让视口的宽度来决定列的数量。弹性盒布局（即flexbox）或者display:inline-block加上常规的文本折行行为，都可以实现这一点。
- 在使用多列文本是，指定column-width(列宽)而不是指定column-count(列数)，这样他就可以在较小的屏幕上自动显示为单列布局。