CSS揭秘及自身补充

自适应方案
框架的宽高使用视口相关的单位（vw、vh、vmin 和 vmax）来控制，内容的高宽使用 rem 单位控制
通过 根元素 html { font-size:10px } 制定 1rem == 10px

当你需要在较大分辨率下得到固定宽度时，使用 max-width 而不是width，因为它可以适应较小的分辨率，而无需使用媒体查询。

不要忘记为替换元素（比如 img、object、video、iframe 等）设置一个 max-width，值为 100%。

在使用多列文本时，指定 column-width（ 列宽 ） 而不是指定 column-count（ 列数 ），这样它就可以在较小的屏幕上自动显示为单列布局。

提示
假如背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化，background-size: cover 这个属性都可以做到。

禅原则
通过质数来增加随机的真实性，这个方法不仅适用于背景条纹，还可以用于其他涉及有规律重复的情况

background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性。属性被指定多个背景层时，使用逗号分隔每个背景层。值包括：

background-color
背景颜色　=>　red

background-image
背景图片　=>　url("…/images/cat.png");

background-position
背景图片初始位置

background-repeat
背景图片重复方式　=>　no-repeat 不重复　|　repeat 重复　|　repeat-x 横向重复　|　space 图像会尽可能地重复, 但是不会裁剪, 同时会忽视 position 属性　|　round 重复并随着空间变化而压缩/伸展大小

background-size
图片大小　=>　px、% 等计量单位　|　auto 以比例缩放图片　|　cover 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见　|　contain 缩放背景图片以完全装入背景区，可能背景区部分空白。

background-attachment

background-clip
背景延伸至 => border-box 边框　|　padding-box 内边距　|　content-box 内容区　|　text 文字下

background-origin
背景图片原点相对区域　它的值和 clip 相同，但没有 text

currentColor 关键字代表原始的 color 属性的计算值。它可以继承父元素或自身元素的color值为默认值。
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的 图片。
hsl() 函数符被定义为色相-饱和度-亮度，hsl 相比 rgb 的优点是更加直观：你可以估算你想要的颜色，然后微调。

	background : currentColor linear-gradient( hsla(0, 0%, 0%, 0.2) , transparent);

box-shadow 接收五个参数：x偏移量 y偏移量 模糊发散值 扩张半径 颜色
下面的代码是生成三层随机颜色的边框，为什么第 1 个逗号和第 1 个 0 没有加入语句产生 bug 呢

	$shadow: null;
    @for $i from 1 through 3 {
      $sj: hsl(random(255), 50%, 50%);
      $shadow: $shadow, 0 0 0 0 + $i * 1rem $sj;
    }
    @warn "#{$shadow}";
    box-shadow: $shadow;

box-shadow 接收五个参数：x偏移量 y偏移量 模糊发散值 扩张半径 颜色
下面的代码是生成三层随机颜色的边框，为什么第 1 个逗号和第 1 个 0 没有加入语句产生 bug 呢

	$shadow: null;
    @for $i from 1 through 3 {
      $sj: hsl(random(255), 50%, 50%);
      $shadow: $shadow, 0 0 0 0 + $i * 1rem $sj;
    }
    @warn "#{$shadow}";
    box-shadow: $shadow;