CSS值

在MDN上，值的表示将被尖括号包围，如<color>或<length>。当您看到值<color>对特定属性有效时，这意味着您可以使用任何有效的颜色作为该属性的值，如 <color>参考页面所列。

数字，长度和百分比

• 长度。虽然许多值接受长度或百分比，但也有一些值只接受长度。您可以在MDN属性引用页面上看到它能接受哪些值。如果允许的值包括<length-percent>，则可以使用长度或百分比。如果允许的值只包含<length>，则不可能使用百分比。

  • 绝对长度单位

    单位	名称	等价换算
    cm	厘米	1cm = 96px/2.54
    mm	毫米	1mm = 1/10th of 1cm
    Q	四分之一毫米	1Q = 1/40th of 1cm
    in	英寸	1in = 2.54cm = 96px
    pc	十二点活字	1pc = 1/16th of 1in
    pt	点	1pt = 1/72th of 1in
    px	像素	1px = 1/96th of 1in

  • 相对长度单位 |单位 |相对于| |——-|—–| |em |在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width| |ex |字符“x”的高度| |ch |数字“0”的宽度| |rem |根元素的字体大小| |lh| 元素的line-height| |vw| 视窗宽度的1%| |vh |视窗高度的1%| |vmin |视窗较小尺寸的1%| |vmax |视图大尺寸的1%|

• 百分比。百分比与长度的处理方法是一样的。百分比的问题在于，它们总是相对于其他值设置的。
• 数字。有些值接受数字，不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性（opacity），它控制元素的不透明度(它的透明程度)。此属性接受0(完全透明)和1(完全不透明)之间的数字。

颜色

<color>颜色关键字

十六进制RGB值

RGB和RGBA值

HSL和HSLA值

在颜色上设置alpha通道与使用我们前面看到的opacity属性有一个关键区别。当你使用不透明度时，你让元素和它里面的所有东西都不透明，而使用RGBA颜色只让你指定的颜色不透明。

图片

【<image>】 数据类型用于图像为有效值的任何地方。它可以是一个通过 url()函数指向的实际图像文件，也可以是一个渐变。

url(test.jpg)                          url()方法, 只要test.jpg是图像文件
linear-gradient(to bottom, blue, red)  一个 <gradient>标签
element(#colonne3)                     页面的一部分, 使用了element()方法, colonne3 是存在于页面中的一个元素id即可

位置

position表示一组2D坐标，它可以使用关键字(如 top, left, bottom, right, 以及center )将元素与2D框的特定边界对齐，以及表示框的顶部和左侧边缘偏移量的长度。

/* 1-value syntax */
keyword                  /* The corresponding edge, the other direction is corresponding to center, the middle of the edge */
<length> or <percentage> /* The position on the x-axis, 50% for the y-axis */

/* 2-value syntax */
keyword keyword          /* A keyword for each direction, the order is irrelevant */
keyword value            /* The value is the offset for the edge defined by the keyword */

字符串和标识符

• 特定的颜色，如 red, black, rebeccapurple, and goldenrod)。这些关键字被更准确地描述为标识符，一个CSS可以理解的特殊值。因此它们没有使用引号括起来——它们不被当作字符串。
• 字符串。如在:before和:after伪类中指定content值时，使用的就是引号括起来的字符串

    <style>
        .box {
            width:400px;
            padding: 1em;
            border-radius: .5em;
            border: 5px solid rebeccapurple;
            background-color: lightblue;
        }
  
        .box::after {
            content: "This is a string. I know because it is quoted in the CSS."
        }
    </style>
    <div class="box"></div> 
  

函数

css函数是一段可重用的代码，可以多次运行，以完成重复的任务，函数通常与JavaScript、Python或c++等语言相关联，但它们也以属性值的形式存在于CSS中。我们已经在颜色部分看到了函数的作用——rgb()、hsl()等。用于从文件返回图像的值——url()——也是一个函数。

下面我们使用calc()使框宽为20% + 100px。20%是根据父容器.wrapper的宽度来计算的，因此如果宽度改变，它也会改变。

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

.box {
  width: calc(20% + 100px);
}
</style>
<div class="wrapper">
  <div class="box">My width is calculated.</div> 
</div>