css 单位与取值类型

所有的 CSS 声明都包括一个 属性 / 值 对。由于属性不同，对应的值可能是一个单个整数或关键字，也可能是一串包含或不包含计数单位的数字和关键字的集合。CSS 中属性接受一个共同的数据类型（属性的值和对应的单位）。下面是大多数这些数据类型的概览。想要获知每一种数据类型的更详细信息，请分别查看它们的链接。

文本数据类型

• 作为预定义的关键字

文本数据类型要么是，要么是一系列字符的合集，或者是—— 一个实质上是不带引号的字符串的"CSS 标识符"。一个必须被单引号或者双引号所包围。CSS 标识符，在标准中所列出的或者则必须不带引号。

在 CSS 标准中，属性的值可以由 Web 开发者指定，例如关键帧动画（keyframe animations），字体的名称（font-family names），或者是被列为和 / 或的栅格区域（grid-areas）。

当允许使用带引号或者不带引号的两种用户定义的文本属性值时，标准列出为 | ，也就是说引号是可选的。例如在指定动画的名称时：

@keyframe validIdent {
  /* keyframes go here */
}
@keyframe 'validString' { 
  /* keyframes go here */ 
}

有些文本属性值不允许被引号包围。例如，grid-area属性对应的值可以是，所以假设有一个栅格区域名为content，我们必须不带引号地使用：

.item {
  grid-area: content;
}

相比之下，另一种数据类型是，例如content属性的值则必须被引号包围：

.item::after {
    content: "This is my content.";
}

大多数时候你可以随心所欲地创建任何名称作为标识符，甚至包括使用 emoji 表情。然而标识符不能是none，unset，initial， 或者inherit，以两条短横线开头。并且，你也不可以使用任何已经预定义的 CSS 关键字。查看和页面了解更多信息。

预定义的关键值

预定义的关键值是由 CSS 标准为属性定义的文本值。这些关键字也属于 CSS 标识符，因此在使用时无需用引号包围。

当在 CSS 标准或者 MDN 属性页面中查看某个 CSS 属性时，该属性所有允许的取值都会以下面表格的形式列出。下面的值是float属性可以取的预定义值：

left | right | none | inline-start | inline-end

这些值在使用时不需要引号：

.box {
    float: left;
}

CSS 全局范围内的值

预定义的关键值往往是针对某一个属性的。作为补充，所有 CSS 属性都可以接受 CSS 全局范围内的值：initial，inherit和unset。这些全局范围的值往往指定了一种默认的行为。

initial指定了当前值作为属性的初始值。inherit关键字则指定当前元素的属性值基于父元素进行计算，即继承。

unset关键字的作用是inherit或initial中的一者，取决于某个 CSS 属性是否可以自父元素继承。

revert在 Cascade Level 4 标准中被引入，但这一属性值还没有较好的浏览器支持现状。

URLs

类型使用一个函数符号，接收一个类型的URL。这个URL可以是绝对地址或者相对地址。例如，如果你想要设置一张背景图片，那么你可以采用如下两种做法：

.box { 
  background-image: url("images/my-background.png"); 
} 

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
} 

url()的参数可以也可以不使用引号。如果使用引号包围了URL，那么它会被解析为一个，包含对某些字符的额外转义。查看以获取更多信息。

数值数据类型

整数

一个整数包含0到9的一个或多个十进制数字，例如1024或-55。一个整数可能额外包含+或-前缀，在正负号和数值之间没有任何空格。

数值

表示一个真正的数，有可能又或者没有小数点和小数部分。例如0.255，128或-1.2。数值也可能包含前缀+或-标识正负。

尺寸

是一个包含单位的，例如45deg，100ms，或者10px。单位是大小写敏感的，且数值和单位之间不允许有任何的空格或其他字符。例如1 cm不是一个合法的值。

CSS 使用尺寸来指定：

• （距离单位）

这些都将在下面的部分里一一介绍。

距离单位

一个距离单位，或这也称为长度（length），允许作为属性的值。它被描述为类型。CSS中有两种长度：相对和绝对。

相对长度单位基于其它元素的长度。例如em基于该元素的字号大小，vh则与设备视口的高度有关。

相对长度单位

Absolute length units are fixed to a physical length: either an inch or a centimeter. Many of these units are therefore more useful when the output is a fixed size media, such as print. For example,mmis a physical millimeter, 1/10th of a centimeter.

Absolute length units

When including a length value, if the length is0, the unit identifier is not required. Otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between.

Angle units

Angle values are represented by the typeand accept the following values:

Time units

Time values are represented by the type. When including a time value, the unit identifier -- thesorms-- is required. It accepts the following values.

Frequency units

Frequency values are represented by the type. It accepts the following values.

1Hz, which can also be written as1hzor1HZ, is one cycle per second.

Resolution unit

Resolution units are represented by the type. They represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a CSS inch, centimeter, or pixel. It accepts the following values:

Percentages

Ais a type that represents a fraction of some other value.

Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else.

As an example, if you specify thewidthof a box as a percentage, it refers to the percentage of the box's parent's computed width:

.box {
  width: 50%;
}

Mixing percentages and dimensions

Some properties accept a dimension that could be either one of two types, for example aora. In this case the allowed value is detailed in the specification as a combination unit, e.g.. Other possible combinations are as follows:

Special data types(defined in other specs)

Color

Thevalue specifies the color of an element feature(e.g. it's background color), and is defined in the CSS Color Module.

Image

Thevalue specifies all the different types of image that can be used in CSS, and is defined in the CSS Image Values and Replaced Content Module.

Position

Thetype defines 2D positioning of an object inside a positioning area, for example a background image inside a container. This type is interpreted as abackground-positionand therefore specified in the CSS Backgrounds and Borders specification.

Functional notation

• calc()
• min()
• max()
• clamp()
• toggle()
• attr()

Functional notation is a type of value that can represent more complex types or invoke special processing by CSS. The syntax starts with the name of the function immediately followed by a left parenthesis(followed by the argument(s)to the notation followed by a right parenthesis). Functions can take multiple arguments, which are formatted similarly to a CSS property value.

White space is allowed, but optional inside the parentheses.(But see notes regarding whitespace within pages formin(),max()andclamp()functions.)

Some legacy functional notations such asrgba()use commas, but generally commas are only used to separate items in a list. If a comma is used to separate arguments, white space is optional before and after the comma.

Specifications

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com