//margin 形式语法： [ <length> | <percentage> | auto ]{1,4}
//合法实例：
margin: style /*单值语法 */ 举例： margin: 1em;
margin: vertical horizontal /*二值语法 */ 举例： margin: 5% auto;
margin: top horizontal bottom /*三值语法 */ 举例： margin: 1em auto 2em;
margin: top right bottom left /*四值语法 */ 举例： margin: 2px 1em 0 auto;
margin: inherit
上面margin的形式语法中 <length>, <percentage>,auto为基本元素
[],|为组合符号，{1,4}为数量符号
在比如下面的border-width属性值语法：
border-width: [<length> | thin | medium | thick]{1,4}
基本元素可以是
- 关键字类型
- auto，solid，bold，red，blue。。。
- 一般类型
- 基本类型，比如<length>,<percentage>,<color>。。。
- 其他复杂类型，比如< 'padding-widht'>可以取<length>基本类型，或者percentage基本类型， <color-stop>
- 符号(/,)用于分割
- inherit,initial为两个特殊的基本元素，几乎每一个html元素都可以有这两个值
组合符号-空格
< 'font-size' > < 'font-family'>
//合法值：
12px arial
//不合法值：
2em
arial 14px
上面由空格连接了两个复杂类型，表示这两个类型必须出现并且顺序也必须是按照语法示例要求的。
组合符号-&&
<length>&&<color>
//合法：
green && 1px
10px && red
//非法
purple
10px
上面由&&连接了两个基本类型，他们是必须出现的，但是其顺序是不要求的
组合符号-||
underline || overline || line-through || blink
//表示至少要出现一个，顺序是没有关系的
//合法的：
underline
overline underline
line-through blink overline
上面由||连接了四个关键字类型的值，他们必须出现至少一个，但是其出现顺序没有关系
组合符号-|
<color> | transparent
//由|连接的值表示只能出现一个
//合法值：
orange
transparent
red
#134556
//非法值：
orange transparent
组合符号-[]
bold [ thin || <length> ]
/*[]表示一个作为一个整体来对待*/
//合法： bold thin bold 2em
//非法：
2em bold //原因是空格组合符号表示必须按顺序出现，但是这里顺序颠倒了
数量符号-无
<length>
/*这里没有数量符号修饰，则表示只有一个可以出现*/
/*合法值*/
1em
2px
/*非法*/
1px 2em
数量符号-+
<color-stop> [, <color-stop> ]+
/*+表示前面修饰的值可以出现1次或多次*/
/*合法值*/
#fff , red
blue, green 50%, grey
/*不合法*/
red /*因为+表示至少要出现一次，而这里出现了0次*/
数量符号-?
inset?&&<color>
/*?表示可以出现也可以不出现*/
/*合法*/
inset blue
red /*由于是可选的，所以即使不出现也是符合语法的*/
数量符号-{}
<length>{2,4}
/*{}表示可以出现的次数，最少2次最多4次*/
/*合法值*/
1px 2px
1px 2px 3em
/*非法*/
2px /*因为只出现了1次*/
数量符号-*
<time> [, <time>]*
/*表示可以出现0次或多次*/
/*合法*/
1s
1s, 4ms
1s, 3ms, 2s
数量符号-#
<time>#
/*需要出现1次或多次，中间必须用,都好隔开*/
/*合法*/
2s, 4s
/*不合法*/
2s 4s /*因为他用空格隔开了*/