值和单位
关键字、字符串和其他文本值
- CSS3 三个 global keywords:inherit、initial、unset
- inherit 也可设置默认不继承的属性
- initial 设置为默认值,属性没有默认值时设置为用户代理设置的值
- unset 当属性可继承时行为与 inherit 相同,非继承属性时行为与 initial 相同
- IE 11 不支持它们,也不支持 all
- 属性 all 的值只能使用 global keywords
- 字符串值,使用单引号或双引号包起来的直接引用的值,可用 \ 在行末断行,真的要插入换行符使用 \A
- url值使用相对地址时,相对的是样式文件的位置,url和左括号之间不能插入空格
- images:一般是 url 值,或者 image-set(),或者 gradients 渐变图片
- 有些属性接受标识符值,用户自定义的 identifier
数值和百分比
- 整数值 +- 符号,一些属性超出取值范围的时候,取距离最近的值,z-index 没有严格范围 ±1,073,741,824 (±230)
- 数值,包含整数值和浮点值,超出范围时一些属性会失效,一些会同整数值行为
- 百分比一般是相对于其他值的值,任何接受百分比值的属性将定义对允许的百分比值范围的任何限制,还将定义相对计算百分比的方式。
- 分数值,标签 fr,用于 Grid Layout
距离
度量长度,长度都由正/负的数值加上标签(缩写的长度单位),0 不需要跟随单位
- 绝对长度单位
- in、cm、mm、q(1cm = 40q)、pt(1in = 72pt)、pc(1pc = 12pt)、px(1/96 in defined in css)
- CSS 2.1 / 3 建议 96 ppi,多数显示器高于此数值,打印设备假定 96px 为1inch
- 分辨率单位,用于 Media query 和 响应式设计
- dpi 每英寸点数,打印纸点、LED 屋里像素、电子墨水显示器 Kindle
- dpcm 同上,每厘米点数
- dppx 每个 CSS px 单位的点数,CSS3 约定比率 1dppx 等于 96dpi
- 相对长度单位
- em,相对于本元素 font-size 的值,当设置 font-size 属性时,em 是相对于父元素的 font-size;名称来源于小写字母 m 的宽度, 但 CSS 中并不精确等于
- ex,小写字母 x 的高度,不同字体有不同的 x 高度
- rem,基于根元素 font-size 值,基于绝对 px 而非相对字体大小 ,html {font-size: 75%;} 得到值12px 而非 75%(假设默认 font-size 是 16px);支持 initial 关键字的浏览器中,如果根元素没有设置字体大小,font-size: 1rem 等于 font-size: initial
- Viewport 相对单位, CSS3 中新增,依据视口尺寸百分之一
- vw、vh、vmin、vmax(视口宽高中较小或较大的一个)
计算值
- calc() 可进行简单四则运算,可以使用括号
- 可使用在这些值类型允许使用的地方:长度、频率、角度、时间、百分比、数值、整数
+ -
号两边必须使用同样的值类型,*
号一边必须是数值,/ 号右侧必须是数值,不能 0 除+ -
号两边必须有空格, * / 非必须- 规范要求用户代理必须支持最少 20 terms
属性值
attr()
少数 CSS 属性允许使用当前元素 HTML 属性的值:p::before {content: "[" attr(id) "]";}
input[type="text"] {width: attr(maxlength em);}
- 2016 年底还都不支持
颜色
- 命名颜色, 16 to 148 in CSS Color Module Level 4 base on X11 RGB
- RGB 和 RGBa 颜色
rgb(R, G, B)
取值 0 - 255、0% - 100%,超出范围取上下限,浮点数值四舍五入为 0 - 255 整数Rgba(R, G, B, a)
,a 取值 0 - 1,超出范围无效或重置为上下限,不能使用百分比- 十六进制 RGB
- 十六进制 RGBa,2017 年底 Firefox 和 Safari 支持, Chrome 和 Opera 试验性实现
- HSL 和 HSLa 颜色:CSS3 新增, H 色调 0 - 360、 S 饱和 0 - 100%、 L 亮度 0 - 100%
- 颜色关键字,可使用在任何允许使用颜色值的地方
transparent
完全透明颜色,背景颜色默认值,常用于定义渐变currentColor
当前元素 color 属性的值
角度
- 数值 + 单位:deg 360角度、grad 400一圈、rad 弧度 2π、turn 一圈
时间和频率
- 数值 + s/ms
- 数值 + Hz/kHz 忽略大小写
位置
- 取值顺序
[ [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ] ]
- 如果只声明一个值,第二个值默认设置为
center
- 如果声明两个值且第一个值为长度或百分比,则第一个值 always 被当做水平值
- 如果声明四个值,必须有两个值是长度或百分比,每个值前面有一个关键字,
right 10px bottom 30px
表示从右边向左 10px 和 从底边向上 30px - 如果定义三个值,与四个值一样,最后一个值默认为 0
自定义值
- 以 -- 开始, 区分大小写
- 可以 scope 覆盖
- 记得使用 @supports() 验证哦
- 浏览器支持尚不确定
@supports (color: var(--custom)) { /* variable-dependent styles go here */ } @supports (--custom: value) { /* alternate query pattern */ } html { --gutter: 3ch; --offset: 1; }
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程