anjia / blog

博客,积累与沉淀
107 stars 4 forks source link

Terminology #32

Open anjia opened 5 years ago

anjia commented 5 years ago

Object-Sizing

intrinsic dimensions 内在/固有尺寸

intrinsic dimensions 是指 intrinsic height, intrinsic width 和 intrinsic aspect ratio(宽高比)的集合。对于特定对象,每个都是有可能存在,也可能不存在。intrinsic dimensions 代表物体本身的 preferred 或者 natural size,它与上下文无关。CSS 没有定义如何找出 intrinsic dimensions。

举例:

如果一个对象(比如 icon)有多个 sizes,则将最大的 size(按面积)作为它的 intrinsic size。如果在那个 size 上它有多个 aspect ratios,或者有多个 aspect ratios 但是没 size,则就使用最接近 default object size 的 aspect ratio 的 aspect ratio。通过使用 contain constraint(包含约束)fit 来看哪一个 aspect ratio 在 default object size 里 fitting 后的面积最大;如果最大面积有多个 sizes,那就选 the widest size 作为它的 intrinsic size。

specified size 指定大小

一个对象的 specified size 是由 CSS 指定的,比如通过 width, height, 或者 background-size 属性。 specified size 可以是确定的 width 和 height,可以是一组约束,也可以是它们的组合。

default object size 默认对象大小

default object size 是一个具有确定 height 和 width 的矩形,用来在既没有 intrinsic dimensions 也没有 specified size 的时候,确定 concrete object size 的。

concrete object size 具体对象大小

concrete object size 是综合对象的 intrinsic dimensions、specified size 以及 default object size,从而生成一个有明确 width 和 height 的矩形。

https://drafts.csswg.org/css-images-3/#sizing-terms

anjia commented 5 years ago

Value Processing

1. declared values

2. cascaded values

3. specified value 指定值

4. computed value 计算值

computed value 是解析 specified value 的结果,通常会 absolutizing it(将它绝对化)以用于 inheritance

computed value 也可能存在,即使 property 没有 apply-应用(属性定义表格里的 Applies To 行会给出)。但是,some properties 可能会根据 property 是否应用于 element 来更改确定 computed value 的方式。

5. used value

6. actual values

https://www.w3.org/TR/css-cascade-4/#value-stages

anjia commented 5 years ago

shorthand property

shorthand property longhand sub-properties

有些 properties 是 shorthand properties,这意味着它们允许 authors 使用 single property 指定 several properties 的值。shorthand property 设置其所有的 longhand sub-properties。

eg. background font

若 shorthand 形式里省略了某些值,除非另外定义,否则每个 missing 的 sub-property 会被分配成它的 initial value。

https://www.w3.org/TR/css-cascade-4/#shorthand

anjia commented 5 years ago

Abstract Box Terminology

CSS 里有三组 directional terms(方向性术语):

physical 是相对 page 的,和 writing mode 无关。physical directions 包括:

flow-relative 是相对 the flow of content(内容流)的。flow-relative directions 包括:

line-relative 是相对 orientation of the line box 的。line-relative directions 包括:

physical dimensions(物理尺寸)是 width 和 height,分别对应沿 x-axis(horizontal dimension)和 y-axis(vertical dimension)的 measurements(测量值)。Abstract dimensions(抽象尺寸)在 flow-relative 和 line-relative 的术语中都是一样的,所以只有一组术语。

flexbox 还定义了 flex-relative 术语,用于描述 flex layout

1. Abstract Dimensions

2. Flow-relative Directions

3. Line-relative Directions

4. Abstract-to-Physical Mappings

下面的表格总结了 abstract-to-physical mappings:

1 abstrack-physical-mapping

点击查看最新的

https://www.w3.org/TR/css-writing-modes-4/#abstract-box