数字、长度和百分比

长度

绝对长度

绝对长度与其他东西没有关系，总是相同的大小

1. cm：厘米
2. mm：毫米
3. Q：四分之一毫米
4. in：英寸
5. pc：派卡
6. pt：磅
7. px：像素

相对长度

1. em：相对于本元素的字体大小，或者font-size时相对于父元素的字体大小。rem相对于根元素的字体大小
2. vh和vw分别相对于视口的高度和宽度

百分比

百分比是相对其他值设置的。例如，如果将元素的字体大小设置为百分比，那么是父元素字体大小的百分比。如果使用百分比作为宽度值，那么是父值宽度的百分比。

数字

有些值接受数字，不添加任何单位。例如不透明度属性（opacity），属性接受0（完全透明）和1（完全不透明）之间的数字

颜色

图片

位置

position数据类型表示一组2D坐标，用于定位一个元素.如背景图像（通过backgroud-positon）,使用关键字（top、left、bottom、right和center）将元素与2D框的特定边界对齐，以及表示框的顶部和左侧边缘偏移量的长度

一个典型的位置值由两个值组成——第一个值水平地设置位置，第二个值垂直地设置位置。如果只指定一个轴的值，另一个轴将默认为 center。

字符串和标识符

color关键字如red，black，rebeccapurple和goldenrod，这些关键字就是标识符。

某些地方可以使用CSS中的字符串，例如在指定生成的内容时。在本例中，引用该值以证明它是一个字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class='box'></div>

<style>
.box {
    width: 400px;
    padding: 1em;
    border-radius: 0.5em;
    border: 5px solid rebeccapurple;
    background-color: lightblue;
}

.box::after{
    content: "这是个字符串。因为它在 CSS 中被引号包裹了，所以我这么认为。";
}
</style>

函数

函数是一段可重用的代码，可以多次运行，已完成重复的任务。例如颜色函数rgb(),hsl()。用于从文件返回图像的值url()

calc()函数能够进行简单的计算。在浏览器运行的时候计算值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="wrapper">
    <div class="box">我的宽度是计算出来的.</div>
</div>

<style>
.wrapper {
    width: 400px;
}

.box {
    padding: 1em;
    border-radius: 0.5em;
    border: 5px solid rebeccapurple;
    backgroud-color: lightblue;
    width: calc(20% + 100px);
}
</style>