值和单位

关键字、字符串和其他文本值

  1. CSS3 三个 global keywords:inherit、initial、unset
    1. inherit 也可设置默认不继承的属性
    2. initial 设置为默认值,属性没有默认值时设置为用户代理设置的值
    3. unset 当属性可继承时行为与 inherit 相同,非继承属性时行为与 initial 相同
    4. IE 11 不支持它们,也不支持 all
    5. 属性 all 的值只能使用 global keywords
  2. 字符串值,使用单引号或双引号包起来的直接引用的值,可用 \ 在行末断行,真的要插入换行符使用 \A
  3. url值使用相对地址时,相对的是样式文件的位置,url和左括号之间不能插入空格
  4. images:一般是 url 值,或者 image-set(),或者 gradients 渐变图片
  5. 有些属性接受标识符值,用户自定义的 identifier

数值和百分比

  1. 整数值 +- 符号,一些属性超出取值范围的时候,取距离最近的值,z-index 没有严格范围 ±1,073,741,824 (±230)
  2. 数值,包含整数值和浮点值,超出范围时一些属性会失效,一些会同整数值行为
  3. 百分比一般是相对于其他值的值,任何接受百分比值的属性将定义对允许的百分比值范围的任何限制,还将定义相对计算百分比的方式。
  4. 分数值,标签 fr,用于 Grid Layout

距离

度量长度,长度都由正/负的数值加上标签(缩写的长度单位),0 不需要跟随单位

  1. 绝对长度单位
    1. in、cm、mm、q(1cm = 40q)、pt(1in = 72pt)、pc(1pc = 12pt)、px(1/96 in defined in css)
    2. CSS 2.1 / 3 建议 96 ppi,多数显示器高于此数值,打印设备假定 96px 为1inch
  2. 分辨率单位,用于 Media query 和 响应式设计
    1. dpi 每英寸点数,打印纸点、LED 屋里像素、电子墨水显示器 Kindle
    2. dpcm 同上,每厘米点数
    3. dppx 每个 CSS px 单位的点数,CSS3 约定比率 1dppx 等于 96dpi
  3. 相对长度单位
    1. em,相对于本元素 font-size 的值,当设置 font-size 属性时,em 是相对于父元素的 font-size;名称来源于小写字母 m 的宽度, 但 CSS 中并不精确等于
    2. ex,小写字母 x 的高度,不同字体有不同的 x 高度
    3. rem,基于根元素 font-size 值,基于绝对 px 而非相对字体大小 ,html {font-size: 75%;} 得到值12px 而非 75%(假设默认 font-size 是 16px);支持 initial 关键字的浏览器中,如果根元素没有设置字体大小,font-size: 1rem 等于 font-size: initial
  4. Viewport 相对单位, CSS3 中新增,依据视口尺寸百分之一
    1. vw、vh、vmin、vmax(视口宽高中较小或较大的一个)

计算值

  1. calc() 可进行简单四则运算,可以使用括号
  2. 可使用在这些值类型允许使用的地方:长度、频率、角度、时间、百分比、数值、整数
  3. + - 号两边必须使用同样的值类型,* 号一边必须是数值,/ 号右侧必须是数值,不能 0 除
  4. + - 号两边必须有空格, * / 非必须
  5. 规范要求用户代理必须支持最少 20 terms

属性值

  1. attr() 少数 CSS 属性允许使用当前元素 HTML 属性的值:p::before {content: "[" attr(id) "]";}
  2. input[type="text"] {width: attr(maxlength em);}
  3. 2016 年底还都不支持

颜色

  1. 命名颜色, 16 to 148 in CSS Color Module Level 4 base on X11 RGB
  2. RGB 和 RGBa 颜色
    1. rgb(R, G, B) 取值 0 - 255、0% - 100%,超出范围取上下限,浮点数值四舍五入为 0 - 255 整数
    2. Rgba(R, G, B, a),a 取值 0 - 1,超出范围无效或重置为上下限,不能使用百分比
    3. 十六进制 RGB
    4. 十六进制 RGBa,2017 年底 Firefox 和 Safari 支持, Chrome 和 Opera 试验性实现
  3. HSL 和 HSLa 颜色:CSS3 新增, H 色调 0 - 360、 S 饱和 0 - 100%、 L 亮度 0 - 100%
  4. 颜色关键字,可使用在任何允许使用颜色值的地方
    1. transparent 完全透明颜色,背景颜色默认值,常用于定义渐变
    2. currentColor 当前元素 color 属性的值

角度

  1. 数值 + 单位:deg 360角度、grad 400一圈、rad 弧度 2π、turn 一圈

时间和频率

  1. 数值 + s/ms
  2. 数值 + Hz/kHz 忽略大小写

位置

  1. 取值顺序
    [
    [ 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> ]? ]
    ]
    
  2. 如果只声明一个值,第二个值默认设置为 center
  3. 如果声明两个值且第一个值为长度或百分比,则第一个值 always 被当做水平值
  4. 如果声明四个值,必须有两个值是长度或百分比,每个值前面有一个关键字,right 10px bottom 30px 表示从右边向左 10px 和 从底边向上 30px
  5. 如果定义三个值,与四个值一样,最后一个值默认为 0

自定义值

  1. 以 -- 开始, 区分大小写
  2. 可以 scope 覆盖
  3. 记得使用 @supports() 验证哦
  4. 浏览器支持尚不确定
    @supports (color: var(--custom)) {
     /* variable-dependent styles go here */
    }
    @supports (--custom: value) {
     /* alternate query pattern */
    }
    html {
     --gutter: 3ch;
     --offset: 1;
    }
    

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

results matching ""

    No results matching ""