css 单位简单介绍

摘要：本来在写介绍逐渐发现单位需要好好介绍下本文不是翻译保留原文的基础上做出自己的理解为主参考摘要这个模块描述了属性的常用值和单位和在属性定义时使用它们的语法。

参考 
http://www.w3.org/TR/2015/CR-css-values-3-20150611/

  
Abstract

  This CSS3 module describes the common values and units that CSS properties > accept and the syntax used for describing them in CSSproperty definitions.

  CSS is a language for describing the rendering of structured documents

  (such as HTML and XML) on screen, on paper, in speech, etc.

摘要

这个css3模块描述了css属性的常用值和单位和在css属性定义时使用它们的语法。
css是一种用于描述结构化文档（如 HTML 和 xml）的呈现语言，常见于在屏幕上,在纸上,演讲等。

  
Introduction
  
The value definition field of each CSS property can contain keywords,

  data types (which appear between < and >), and information on how they

  can be combined. Generic data types ( being the most widely

  used) that can be used by many properties are described in this

  specification, while more specific data types (e.g., )

  are described in the corresponding modules.

每个css属性可以包括keywords, data types(出现在<和>中间)，它们如何组合。通用数据类型（被最广泛使用）被最多属性描述 而其他一些更为特定的数据类型(如< spacing-limit >)描述了相应的模块。

  
1.1. Module Interactions
  
  
This module replaces and extends the data type definitions in [CSS21]

  sections 1.4.2.1, 4.3, and A.2.

模块的交互

这个模块取代[css21]的相关章节

  
Value Definition Syntax
  
The syntax described here is used to define the set of valid values

  for CSS properties. A property value can have one or more components.

值定义语法
这里描述的语法用于定义一组有效值的CSS属性。属性值可以有一个或多个组件

2.1. Component value types

Component value types are designated in several ways:

keyword values (such as auto, disc, etc.), which appear literally,
without quotes (e.g. auto)

basic data types, which appear between < and > (e.g., ,
, etc.).

types that have the same range of values as a property bearing the
same name (e.g., <‘border-width’>, <‘background-attachment’>, etc.).
In this case, the type name is the property name (complete with
quotes) between the brackets. Such a type does not include CSS-wide
keywords such as inherit.

non-terminals that do not share the same name as a property. In this
case, the non-terminal name appears between < and >, as in
. Notice the distinction between and
<‘border-width’>: the latter is defined as the value of the
border-width property, the former requires an explicit expansion
elsewhere. The definition of a non-terminal is typically located
near its first appearance in the specification.

组件值类型
组件值类型指定的在几个方面

关键词（如 auto, disc, etc.)

基本数据类型 出现在<和》

类型有相同的值作为属性轴承相同的名称 既然这样 类型的名字是属性名

非终结符,不共享相同的名称作为财产 在这种情况下

  
Some property value definitions also include the slash (/), the comma

  (,), and/or parentheses as literals. These represent their

  corresponding tokens. Other non-keyword literal characters that may

  appear in a component value, such as “+”, must be written enclosed in

  single quotes.

一些属性值定义也包括 (/) 逗号 (,)

Commas specified in the grammar are implicitly omittable in some circumstances, when used to separate optional terms in the grammar. Within a top-level list in a property or other CSS value, or a function’s argument list, a comma specified in the grammar must be omitted if:

  
For example, if a function can accept three arguments in order, but

  all of them are optional, the grammar can be written like:

  example(first? , second? , third? )

如果一个函数需要三个参数，可以写成这样
example(first? , second? , third? )

  
Given this grammar, writing example(first, second, third) is valid, as

  is example(first, second) or example(first, third) or example(second).

  However, example(first, , third) is invalid, as one of those commas

  are no longer separating two options; similarly, example(,second) and

  example(first,) are invalid. example(first second) is also invalid, as

  commas are still required to actually separate the options.
  
  
If commas were not implicitly omittable, the grammar would have to be

  much more complicated to properly express the ways that the arguments

  can be omitted, greatly obscuring the simplicity of the feature.

正确的
example(first, second) or example(first, third) or example(second)
错误的
example(first, , third) is invalid, example(,second) and example(first,)

  
All CSS properties also accept the CSS-wide keyword values as the sole

  component of their property value. For readability these are not

  listed explicitly in the property value syntax definitions. For

  example, the full value definition of border-color is {1,4} |

  inherit | initial | unset (even though it is listed as {1,4}).

所有属性也接受css-wide关键词值作为组件的属性。为了便于阅读 这些都不是明确列出的属性值语法定义。
比如 border-color 的值定义是 {1,4} | inherit | initial | unset

  
2.2. Component value combinators
  
  
Component values can be arranged into property values as follows:
  
  
Juxtaposing components means that all of them must occur, in the

  given order.
  
A double ampersand (&&) separates two or more components, all of

  which must occur, in any order.
  
A double bar (||) separates two or more options: one or more of them

  must occur, in any order.
  
A bar (|) separates two or more alternatives: exactly one of them

  must occur.
  
Brackets ([ ]) are for grouping.
  

组件值被安排到组件值必须遵循
所有组件遵循顺序
&& 分离两个或多个组件
|| 分离两个或多个options
| 分离两个或多个替代选择
[] 分组

  
Juxtaposition is stronger than the double ampersand, the double

  ampersand is stronger than the double bar, and the double bar is

  stronger than the bar. Thus, the following lines are equivalent:
  
  
a b   |   c ||   d &&   e f

  [ a b ] | [ c || [ d && [ e f ]]]

并列（e f） > && > || > |

  
For re-orderable combinators (||, &&), ordering of the grammar does

  not matter: components in the same grouping may be interleaved in any

  order. Thus, the following lines are equivalent:
  
  
a || b || c

  b || a || c

|| && 中的内容顺序并不重要

  
2.3. Component value multipliers
  
  
Every type, keyword, or bracketed group may be followed by one of the

  following modifiers:
  
  
An asterisk (*) indicates that the preceding type, word, or group

  occurs zero or more times.
  
A plus (+) indicates that the preceding type, word, or group occurs

  one or more times.
  
A question mark (?) indicates that the preceding type, word, or

  group is optional (occurs zero or one times).
  
A single number in curly braces ({A}) indicates that the preceding

  type, word, or group occurs A times.
  
A comma-separated pair of numbers in curly braces ({A,B}) indicates

  that the preceding type, word, or group occurs at least A and at

  most B times. The B may be omitted ({A,}) to indicate that there

  must be at least A repetitions, with no upper bound on the number of

  repetitions.
  
A hash mark (#) indicates that the preceding type, word, or group

  occurs one or more times, separated by comma tokens (which may

  optionally be surrounded by white space and/or comments). It may

  optionally be followed by the curly brace forms, above, to indicate

  precisely how many times the repetition occurs, like #{1,4}.
  
An exclamation point (!) after a group indicates that the group is

  required and must produce at least one value; even if the grammar of

  the items within the group would otherwise allow the entire contents

  to be omitted, at least one component value must not be omitted.
  
For repeated component values (indicated by *, +, or #), UAs must

  support at least 20 repetitions of the component. If a property value

  contains more than the supported number of repetitions, the

  declaration must be ignored as if it were invalid.

每一类型、关键字或相等的组可能是紧随其后的是一个修饰符

星号(*)表示前面出现的type,word,或group出现零次或多次

加号(+)表示前面出现的type,word,或group出现1次或多次

问号(?)表明前面的type,word,或group是可选的(发生零个或一次)

花括号带数字({A})表明前面的type,word,或group出现A次

花括号带数字({A,B})表明前面的type,word,或group出现A到B次,
花括号带数字({,B})表明前面的type,word,或group出现1到B次

散列马克(#)表明前面的类型,单词,或组发生一次或多次

感叹号(!),一组表明,集团要求必须至少产生一个值,即使语法组内的物品会让整个内容省略,至少一个组件值不能省略。

感叹号(!),一组表明,集团要求必须至少产生一个值,即使语法组内的物品会让整个内容省略,至少一个组件值不能省略。

  
2.4. Combinator and Multiplier Patterns
  
  
There are a small set of common ways to combine multiple independent

  component values in particular numbers and orders. In particular, it’s

  common to want to express that, from a set of component value, the

  author must select zero or more, one or more, or all of them, and in

  either the order specified in the grammar or in any order.
  
  
All of these can be easily expressed using simple patterns of

  combinators and multipliers: 

  Note that all of the "any

  order" possibilities are expressed using combinators, while the "in

  order" possibilities are all variants on juxtaposition.

一个属性值可能有多个组件组成

  
2.5. Component values and white space
  
  
Unless otherwise specified, white space and/or comments may appear

  before, after, and/or between components combined using the above

  combinators and multipliers.

以上就是一些w3c对文档 还有属性的一些基本定义
2.6. Property value examples

Below are some examples of properties with their corresponding value definition fields

现在对图中一些提出解释

"orphans" 定义是 就可以设置为3

"text-align" 定义是 left 或 right 或 center 或 justify 就可以设置为"center"

"padding-top" 定义是 | 就可以设置为"5%"

"outline-color" 定义是 | invert 就可以设置为"#fefefe"

"text-decoration" 定义是 none | (underline || overline || line-through
|| blink) ||的表示这个属性可以同时放一个或多个 就可以设置为"overline underline"

"font-family" 定义是[ | ]# 这个表示这是一个组合值 有点像list 至少要写一个 可以写多个 就可以设置为""Gill Sans", Futura, sans-serif"

"border-width" 定义是[ | thick | medium | thin]{1,4} 这个表示那你可以写1到4次 每次可以使用或者thick或者medium或者thin 就可以设置为"2px medium 4px"

"text-shadow" 定义是[inset? [{2,4} && ?]]# | none
这个表示text-shadow可以有几组 inset带问号表示可写可不写 后面表示可以写2到4种颜色 颜色可选 就可以 "3px 3px rgba(50,50,50, .5), inset 3px 0px 1px 2px #092302"

  
3.1. Pre-defined Keywords
  
  
In the value definition fields, keywords with a pre-defined meaning

  appear literally. Keywords are CSS identifiers and are interpreted

  ASCII case-insensitively (i.e., [a-z] and [A-Z] are equivalent).
  
  
For example, here is the value definition for the border-collapse

  property:

  Value: collapse | separate

  And here is an example of its

  use:

  table { border-collapse: separate }

预定义关键字 是预留的有意义的关键字 不区分大小写

  
3.1.1. CSS-wide keywords: initial, inherit and unset
  
  
As defined above, all properties accept the CSS-wide keywords, which

  represent value computations common to all CSS properties.
  
  
The initial keyword represents the value specified as the property’s

  initial value. The inherit keyword represents the computed value of

  the property on the element’s parent. The unset keyword acts as either

  inherit or initial, depending on whether the property is inherited or

  not. All of these keywords are normatively defined in the Cascade

  module. [CSS3CASCADE]
  
  
Other CSS specifications can define additional CSS-wide keywords.

css比较广泛可以使用的关键字有 initial, inherit, unset
initial 设置为初始值
inherit 表现父元素计算后样式
unset 表现和initial和inherit类似

  
3.2. Author-defined Identifiers: the  type
  
  
Some properties accept arbitrary author-defined identifiers as a

  component value. This generic data type is denoted by ,

  and represents any valid CSS identifier that would not be

  misinterpreted as a pre-defined keyword in that property’s value

  definition. Such identifiers are fully case-sensitive, even in the

  ASCII range (e.g. example and EXAMPLE are two different, unrelated

  user-defined identifiers).

就是自定义标示符 不清楚什么用 有一个链接
关于< custom-ident >的一些解释

  
The CSS-wide keywords are not valid s. The default

  keyword is reserved and is also not a valid .

  Specifications using  must specify clearly what other

  keywords are excluded from , if any—for example by

  saying that any pre-defined keywords in that property’s value

  definition are excluded. Excluded keywords are excluded in all ASCII

  case permutations.
  
  
When parsing positionally-ambiguous keywords in a property value, a

   production can only claim the keyword if no other

  unfulfilled production can claim it.

< custom-ident > 不能使用css默认关键字

  
For example, the shorthand declaration animation: ease-in ease-out is

  equivalent to the longhand declarations animation-timing-function:

  ease-in; animation-name: ease-out;. ease-in is claimed by the

   production belonging to

  animation-timing-function, leaving ease-out to be claimed by the

   production belonging to animation-name.

官方的例子有点难懂 custom-ident在自定义动画用到

/* @keyframes name | duration | timing-function | delay | 
   iteration-count | direction | fill-mode | play-state */
  animation: slidein 3s ease-in 1s 2 reverse both paused;

slidein就是< custom-ident >啦

  
3.3. Quoted Strings: the  type
  
  
Strings are denoted by  and consist of a sequence of

  characters delimited by double quotes or single quotes. They

  correspond to the  production in the CSS Syntax Module

  [CSS3SYN].
  
  
Double quotes cannot occur inside double quotes, unless escaped (as

  """ or as "22"). Analogously for single quotes (""" or "27").

  content: "this is a "string".";

  content: "this is a "string".";

  content: "this is a "string".";

  content: "this is a "string"."

引用字符串:类型
css 都是字符串啦 不过css string类型是用单引号 或 双引号括起来的内容

  
It is possible to break strings over several lines, for aesthetic or

  other reasons, but in such a case the newline itself has to be escaped

  with a backslash (). The newline is subsequently removed from the

  string. For instance, the following two selectors are exactly the

  same:
  
  
a[title="a not s

  o very long title"] {/.../}

  a[title="a not so very long title"] {/.../}
  
  
Since a string cannot directly represent a newline, to include a newline > in a string, use > the escape "A". (Hexadecimal A is the line feed

  character in Unicode (U+000A), but represents the generic notion of

  "newline" in CSS.)

string 如果碰到换行使用
还有一种情况 html中某段属性换行了需要使用A模拟换行
A模拟换行 codepen地址

  
3.4. Resource Locators: the  type
  
  
A URL is a pointer to a resource and is a functional notation denoted

  by . The syntax of a  is:
  
  
 = url(  * )

  Below is an example of a URL

  being used as a background image:

  body { background: url("http://www.example.com/pinkish.gif") }

< url > 是有 url(< string > < url-modifier >*) 组成的 可以为零次或多次

  
In addition to the syntax defined above, a  can sometimes be

  written in other ways:
  
  
For legacy reasons, a < url > can be written without quotation marks

  around the URL itself. This syntax is specially-parsed, and produces a

  < url-token > rather than a function syntactically. [CSS3SYN]
  
  
Some CSS contexts, such as @import, allow a < url > to be represented by a

  < string > instead. This behaves identically to writing a url() function

  containing that string. Because these alternate ways of writing a

  < url > are not functional notations, they cannot accept any

  < url-modifier >s.

大家写url内内容是不要忘加引号 @import 不需要url function表达式 而且由于没有使用 url 函数 所以不能使用 < url-modifier >

  
3.4.1. Relative URLs
  
  
In order to create modular style sheets that are not dependent on the

  absolute location of a resource, authors should use relative URLs.

  Relative URLs (as defined in [URL]) are resolved to full URLs using a

  base URL. RFC 3986, section 3, defines the normative algorithm for

  this process. For CSS style sheets, the base URL is that of the style

  sheet itself, not that of the styled source document. Style sheets

  embedded within a document have the base URL associated with their

  container.
  
  
When a  appears in the computed value of a property, it is

  resolved to an absolute URL, as described in the preceding paragraph.

  The computed value of a URL that the UA cannot resolve to an absolute

  URL is the specified value.
  
  
For example, suppose the following rule: body { background:

  url("tile.png") } is located in a style sheet designated by the URL:
  
  
http://www.example.org/style/basic.css The background of the source

  document’s  will be tiled with whatever image is described by

  the resource designated by the URL:
  
  
http://www.example.org/style/tile.png The same image will be used

  regardless of the URL of the source document containing the .

url 可以使用相对路径

  
3.4.2. URL Modifiers
  
  
The url() function supports specifying additional s,

  which change the meaning or the interpretation of the URL somehow. A

   is either an  or a function.
  
  
This specification does not define any s, but other

  specs may do so.

url() 支持 < url-modifiers > css3 草案 还没有定义什么的 你们参照其他规范啦 什么 什么 的

  
Numeric Data Types
  
Properties may restrict numeric values to some range. If the value is

  outside the allowed range, the declaration is invalid and must be

  ignored.
  
  
CSS theoretically supports infinite precision and infinite ranges for

  all value types; however in reality implementations have finite

  capacity. UAs should support reasonably useful ranges and precisions.

属性可能限制数值范围。如果该值超出允许范围,声明是无效的,必须被忽略。
css 理论上支持无限精度和无限范围为所有值类型,然而在现实中实现有限的能力。UA System 应该支持合理有用的范围和精度。总之 css 又不是语言啦

  
4.1. Integers: the  type
  
  
Integer values are denoted by . An integer is one or more

  decimal digits 0 through 9 and corresponds to a subset of the

   production in the CSS Syntax Module [CSS3SYN]. The

  first digit of an integer may be immediately preceded by - or + to

  indicate the integer’s sign.

< interger > 整数类型 可以使用 -表示负数 +表示正数

  
4.2. Real Numbers: the  type
  
  
Number values are denoted by . A number is either an 

  or zero or more decimal digits followed by a dot (.) followed by one

  or more decimal digits and optionally an exponent composed of "e" or

  "E" and an integer. It corresponds to the  production in

  the CSS Syntax Module [CSS3SYN]. As with integers, the first character

  of a number may be immediately preceded by - or + to indicate the

  number’s sign.

< number > 数字类型 包括小数 整数啦 有符号啦

  
4.3. Percentages: the  type
  
  
A percentage value is denoted by , and consists of a

   immediately followed by a percent sign %. It corresponds to

  the  production in the CSS Syntax Module [CSS3SYN].
  
  
Percentage values are always relative to another value, for example a

  length. Each property that allows percentages also defines the value

  to which the percentage refers. The value may be that of another

  property for the same element, a property for an ancestor element, or

  a value of the formatting context (e.g., the width of a containing

  block).

< percentage > 类型啦 取值有父元素 或者 格式化上下文 决定

  
4.4. Numbers with Units: dimensions
  
  
A dimension is a  immediately followed by a unit identifier.

  It corresponds to the  production in the CSS Syntax

  Module [CSS3SYN]. Like keywords, unit identifiers are ASCII

  case-insensitive.
  
  
CSS uses dimensions to specify distances (), durations

  (), frequencies (), resolutions (), and

  other quantities.

css number 还可以带单位

  
Distance Units: the  type
  
Lengths refer to distance measurements and are denoted by  in

  the property definitions. A length is a dimension. However, for zero

  lengths the unit identifier is optional (i.e. can be syntactically

  represented as the  0).
  
  
Properties may restrict the length value to some range. If the value

  is outside the allowed range, the declaration is invalid and must be

  ignored.
  
  
While some properties allow negative length values, this may

  complicate the formatting and there may be implementation-specific

  limits. If a negative length value is allowed but cannot be supported,

  it must be converted to the nearest value that can be supported.
  
  
In cases where the used length cannot be supported, user agents must

  approximate it in the actual value.
  
  
There are two types of length units: relative and absolute.

css < length > type 有绝对的 有相对的 不过都并不是准确的

  
5.1. Relative lengths
  
  
Relative length units specify a length relative to another length.

  Style sheets that use relative units can more easily scale from one

  output environment to another.
  
  
The relative units are:


  Child elements do not inherit the relative values as specified for their

  parent; they inherit the computed values.

相对单位 大体是字体 viewport 总之要有一个参照物

5.2. Absolute lengths: the cm, mm, q, in, pt, pc, px units

The absolute length units are fixed in relation to each other and anchored to some physical measurement. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc, q) and the visual angle unit (px):

px 是绝对单位 不过不是说就一定准确