CSS - 值和单位

2021-03-16

第一节 文本值(关键字、字符串和其他)

1、全局关键字:inherit、initial和unset。inherit:强制继承。initial:设置为初始值或用户代理默认值。unset:对于继承的属性,为inherit,对于非继承属性,为initial。

2、特殊属性all:只能使用上述的三个值,这个属性表示除direction与unicode-bidi之外的所有属性。

3、字符串使用单引号或者双引号引用,可以使用反斜线转义,使用/A换行。

4、CSS中的相对URL相对于样式表位置,url与括号间不允许空格。

5、CSS标识符区分大小写。

第二节 数字和百分数

1、整数、数字、百分数和弹性值。

2、取值范围外的整数被设置为与所用值最接近的数,此行为被称为clamping。

3、接受百分数的属性都会定义取值范围,以及百分比相对什么算。

4、弹性制是整数后面跟fr,在栅格布局中使用。

第三节 距离

1、绝对长度单位:in、cm、mm、q、pt、pc、px。仅当浏览器掌握用户代理、显示设备的所有细节的时候,这些值才真正精准。但这不可能。

2、分辨率单位:dpi、dpcm、dppx。这些单位最好在媒体查询中使用。

3、相对长度单位:em、ex、rem、ch、vw、vh、vmax、vmin。em为元素font-size定义的值,若使用其设置字号,则相对于父元素,em指所用字体小写字母m的宽度。ex中x指小写字母x的高度。rem指文档根元素设定的字体大小或用户代理默认值。ch为0的宽度。vw、vh视口百分比单位,vmax、vmin取视口长宽中较大/小的那个。

第四节 计算值

1、+、-运算两侧要加空格,*、/ 无限制。

第五节 属性值

1、使用attr()表达式可以获取属性值,但浏览器大部分不支持attr。

第六节 颜色

1、具名颜色:参考 MDN

2、RGB和RGBA颜色,可以使用hex、百分比或者整数来表示。

3、HSL和HSLA颜色,H:hue色相,S:Saturation饱和度,L:Lightness明度,分别取整数、百分比和百分比。

4、颜色关键字,transparent表示透明色,与RGBA(0,0,0,0)相同。currentColor表示当前元素color属性的计算值。

第七节 角度

1、deg:度数,完整的圆周为360度。

2、grad:百分度,圆周为400百分度。

3、rad:弧度,圆周为2π。

4、turn:圈数,一个圆周为1turn。

第八节 时间和频率

1、时间单位:s、ms。

2、频率单位:hz,kHz。

第九节 位置

1、只声明一个值,第二个值将被设置为center。

2、声明两个值,且第一个是长度或者百分数,那么前一个值始终是横向值。

3、声明四个值,必须有两个长度或者百分数,且前面都必须是关键字。长度或百分数指定偏移距离,关键字定义相对于那条边。

4、三个值与四个值一样,不过最后一个值被设置为0。

第十节 自定义值

1、以--开头,调用的时候使用var()。

2、标识符区分大小写。

3、存在作用域。(似乎类似于JS作用域链)

4、可以结合calc使用。