CSS 单位与取值

最新推荐文章于 2023-01-20 10:30:00 发布

au832383

最新推荐文章于 2023-01-20 10:30:00 发布

阅读量302

点赞数

原文链接：http://www.cnblogs.com/ciimoo/articles/6346592.html

版权

绝对长度
- in
  英寸。
- pc
  派卡（Picas），1in = 12pc 。
- pt
  Points，1in = 72pt 。
- px
  像素（Pixels），1in = 96px 。
- cm
  厘米。
- mm
  毫米。
- q
  1/4毫米（quarter-millimeters）。
相对长度
- em
  相对于当前对象内文本的字体尺寸。
- rem
  相对于根元素(即html元素)font-size计算值的倍数。
- ex
  相对于字符“x”的高度。通常为字体高度的一半。
- ch
  数字“0”的宽度。
- vw
  相对于视口的宽度。视口被均分为100单位的vw。
- vh
  相对于视口的高度。视口被均分为100单位的vh。
- vmin
  相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。
- vmax
  相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

常用长度单位：px ，em ，rem 。

HEX
#RRGGBB 或 #RGB。RR：红色值。GG：绿色值。BB：蓝色值。十六进制正整数。

HEX 颜色推荐使用小写，简写。
RGB

RGB(R,G,B)。R：红色值。G：绿色值。B：蓝色值。取值 0~255 或者 0% ~ 100%。
RGBA

RGBA(R,G,B,A)。与RGB颜色相比多了 Alpha 透明度。取值0~1。
HSL

HSL(H,S,L)。

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0~360。

S：Saturation(饱和度)。取值为：0.0% ~ 100.0%

L：Lightness(亮度)。取值为：0.0% ~ 100.0%
HSLA

HSLA(H,S,L,A)。与 HSL 相比多了 Alpha 透明度。取值0~1之间。
Transparent

transparent 是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。

inherit

继承父元素的属性定义。
initial

恢复被reset掉的属性为默认样式。
unset

一个属性定义了unset值，如果该属性是默认继承属性，该值等同于inherit，如果该属性是非继承属性，该值等同于initial。

String

字符串可以由双引号或单引号包起来。转义字符串由反斜杠(\\) 开始，如：\', \"

div:after {
    content: "任意字符串\"String\"";
}
div {
    /* \5b8b\4f53 = 宋体 */
    font-family:"\5b8b\4f53";
}

<url>
由于历史原因， <url> 可以不加引号，所以对于 <url> 的处理，有引号和无引号都是正确的，示例代码如下：
```
    div {
        background-image: url("1.gif");
    }
    div {
        background-image: url(1.gif);
    }
```
使用在@import上时，可以使用 <string> 来表示一个 <url>，也就是说可以省略 url() 符号，直接是一个资源地址，示例代码如下：
```
    @import url(global.css);
    @import "global.css";
```

cale()
- 任何长度值都可以使用calc()函数进行计算；
- calc()函数支持 +, -, *, / 运算；
- calc()函数使用标准的数学运算优先级规则；
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；