CSS学习篇(三) 单位

CSS学习篇(三) 单位
0

  在讨论 CSS 单位之前,先列一下 CSS 的值类型:

  • 数值: 长度值,用于指定例如元素宽度、边框(border)宽度或字体大小;以及无单位整数。用于指定例如相对线宽或运行动画的次数。
  • 百分比: 可以用于指定尺寸或长度——例如取决于父容器的长度或高度,或默认的字体大小。
  • 颜色: 用于指定背景颜色,字体颜色等。
  • 坐标位置: 例如,以屏幕的左上角为坐标原点定位元素的位置。
  • 函数: 例如,用于指定背景图片或背景图片渐变。

下面是各种单位类型:

数值

  数值单位分绝对单位和相对单位。绝对单位是不会因为其他设置而变化的单位值,而相对单位可以会因为当前元素的字体或视口大小而变。

  绝对单位:px(像素)、mm、cm、in(英寸)、pt(点,相当于1/72英寸)

  相对单位:em、rem、vw、vh

  em 是相对与当前父元素字号的大小,因此会有继承特性,例如当前元素字体大小是10px,则1em=10px。

  rem 是相对与根元素(<html>)字号的大小,一般浏览器默认是 16px,因此1rem=16px,除非修改 html 标签的 font-size,不然都是 1:16 。

  vw 是相对与当前视口宽度的1/100,vh 相对与当前视口高度的 1/100,所以 100vw 等于元素等于视口宽度,而 50vh 则是视口高度的一半。

百分比

  百分比一般用来指定一个元素大小相对与父元素一定比例,若父元素变化则该元素也会变化并保持一定比例。当然也可以对字体使用百分比,效果类似于 em 和 rem 这种。

颜色

  颜色可以有关键词、16进制值、RGB/HSL 表示法。

  关键词:red、blue、green、yellow、black、white 等。

h1{
    background-color: red;
}

  16进制值,使用#作为前缀,后面跟6个16进制数,每个大小从0~F,每两个组成一组一共三组,每组16进制数组成的是一个0~255大小的数值,按顺序分别是红、绿和蓝的颜色数值。

p {
  color: #ff0000;
}

  RGB 表示法,就是一个 rgb(x,y,z) 函数来传参,形参 x、y 和 z 都是 0~255 大小的数值,按顺序分别代表红、绿和蓝的颜色值,例如红色为:

p {
  color: rgb(255, 0, 0);
}

  HSL 表示法,与16进制和 RGB 表示法一样,可以表示1670万种颜色,它是一个hsl(x,y,z)函数来传参,x、y 和 z 分别是色调、饱和度以及明度。

  1. 色调 :颜色的底色调。这个值在0到360之间,表示色轮的角度。
  2. 饱和度 :饱和度是多少?这需要一个从0-100%的值,其中0是没有颜色(它将显示为灰色),100%是全彩色饱和度。
  3. 明度 :颜色有多亮或明亮?这需要一个从0-100%的值,其中0是无光(它会出现全黑的),100%是充满光的(它会出现全白)。

  同样用 hsl 表示红色:

p {
  color: hsl(0,100%,50%);
}

  另外,除了 RGB 和 HSL 外,还有些颜色需要表示透明度,可以使用 RGBA 和 HSLA ,多了一个参数 A,这里的 A 代表透明度 transparency ,一般叫 alpha 通道,它使用0~1来表示,0表示完全透明,1表示完全不透明,所以半透明相对就是0.5,所以红色半透明就是:

p {
  color: rgba(255, 0, 0, 0.5);
}

  除了函数 RGBA 和 HSLA 外,还有一个 CSS 属性可以用来单独指定“不透明度”—— opacity,同样是0~1来表示,0表示完全透明,1表示完全不透明。opacity 相对与 rgba/hsla 里的透明值 a 来说,使用范围更大,它对所筛选元素的背景、字体都产生影响。

函数

  其实上面的 rgb/rgba/hsl/hsla 都是函数,另外还有各种变化函数:图片路径 url、旋转 rotate、位移 translate 等。

div{
    background-image: url('myimage.png');
}