《CSS揭秘》引言部分学习：HSLA，box-shadow以及css小技巧

CSS 引言部分

• HSLA：

  • Hue 色度（取值：0~360）
    红色：0，360
    绿色：120
    蓝色：240
  • Saturation 饱和度 （取值：0%~100%）
    网上搜索到的定义一般是色彩的鲜艳程度，0%是最黯淡，100%是最鲜艳。
    但是通过自己的测试，会发现最黯淡其实就是最贴近灰色，最鲜艳就是不在色度hue上掺杂灰色，最贴近原来的颜色。
    最贴近灰色，S:0%：
    
    最贴近原来的颜色，S:100%：
    
  • Lightness 亮度（取值：0%~100%）
    0% —> 黑色
    100% —> 白色
    所以一般使用时，如果想要体现出hue参数真正的颜色，设置为50%。如上图
    在0%~50%之间，越贴近0%颜色越深。
    
    在50%~100%之间，越贴近100%颜色越浅。
    
  • Alpha 透明度（取值：0~1）
    和rgba中的a是一样的使用方式。
    0 —> 透明 （视觉效果是看起来很淡）
    1 —> 不透明 （这一项是1的话，视觉效果是蓝色本来的颜色）
    -例子：可以在这里试一下，可以在线看到效果。

• box-shadow
  box-shadow: h-shadow(px) v-shadow(px) blur(px) spread(px) color [inset];
  参数： 水平(正值为右侧阴影),垂直(正值为下侧阴影) ,模糊度,阴影大小,颜色,内侧阴影。

• text-shadow
  参数类似box-shadow：
  text-shadow: h-shadow v-shadow blur color;
  参数： 水平(正值为右侧阴影),垂直(正值为下侧阴影) ,模糊度,阴影大小,颜色

• em
  元素没有设置字号大小，需转换的像素值/父元素的font-size

  元素设置字号大小：
  字体：需转换的像素值/父元素的font-size
  其他属性（如padding等）：需转换的像素值/元素的font-size

• CSS原则：

  1. 使用百分比长度来取代固定长度，或尝试使用与视口相关的单位（ vw 、 vh 、 vmin 和 vmax ）
  2. 在较大分辨率下得到固定宽度时，使用max-width代替width
  3. 对替换元素设置max-width ，值为 100% 。
     ps:替换元素是浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如img，如果不给出src，图片无法显示出来。同样为替换元素的还有标签，标签等等。
  4. 假如背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化，
     background-size: cover （存疑）
  5. 使用多列文本时，指定 column-width （列宽）而不是指定
     column-count （列数），可以在较小的屏幕上自动显示为单
     列布局。
  6. 属性简写的合理使用。background:#f40; 和 background-color:#f40;在某些程度上是不一样的。如果写了别的属性比如background-image 也许最终效果是不同的。