CSS基本术语

时间 2019-11-16

标签 css 基本术语栏目 CSS 繁體版

原文原文链接

2019/5/9更新：更新了block-level box的解释css

-----------------------------------------------------------------------------------------html

CSS中其实有不少专业术语，了解这些术语，有助于增强对css背后的机制的理解。
chrome

1. Continuous media & Paged media

css样式可让咱们为所欲为的在各类电子产品上显示咱们所要表达的东西，诸如在screen，在print，在projection上，等等。可是因为显示终端不一样，咱们须要根据显示终端来调整css样式，而css自己也对属性的使用范围做了一个限定。canvas

一般，一个css属性能够在A,B,C等多种media（screen,print,projection等都属于media）上使用，但不能够在D,E,F等多种media上使用，这就有了media groups这个概念。一个media group包含多种media，且css属性会根据它的定义适用于某个media group中的全部media。浏览器

css按照划分角度的不一样定义了以下media group。
bash

continuous media 或者paged media
visual media 或者audio media 或者speech media 或者tactile media
grid media 或者bitmap media
interactive media或者static media
all

对于continuous media 和paged media，详细分类以下：dom

2. root 元素

没有父元素的素为root element，在html文件中html标签产生的dom元素即为root element。ide

3. specified value

通常指开发人员为具体的属性所设定的值。可是若是开发人员没有指定呢，那么specified value按如下顺序来肯定。其中1的优先级最高。字体

做者为具体的属性所设定的值。
不然，若该属性具备继承性且该元素不为root 元素，则该属性的specified value和computed value都为父元素的Computed value。
不然，使用该属性的initial value(每一个属性都有一个initial value)

ps： 若做者没有为该属性指定值，而该属性具备继承性且该元素为root 元素，则specified value为属性的initial valueflex

举个栗子

html代码以下

<body>
<div>
    I'm content in div <em>I'm content in em</em>
</div>
</body>复制代码

不设定任何样式

浏览器显示为

能够看到，div里的字体大小和em里的字体大小相同

设定css样式

div{
font-size: 30px;
}复制代码

浏览器显示为

对比上面截图，明显看到div里的字体和em里的字体都明显变大，且字体大小都相同。

但是我并无设置em的字体，这是为何呢？

这就是继承的魅力！

因为font-size属性具备继承性，em元素又不为root元素，所以em元素的font-size会继承父元素div的font-size，它的font-size一样为30px。

4. computed value

当开发人员为属性设定值时，该值多是绝对值，它们不是相对其余值而言的，例如”red”,”2px”,为图片路径指定的绝对url地址；也多是相对值，它们是相对其余值而言的，如””2em”,”2ex”，为图片路径指定了相对url地址。

对于绝对值，该值无需再通过计算即为computed value。

对于相对值，该值必须通过计算。例如，单位为相对单位（如em,ex）的值必须与合适的font size相乘获得一个以px结尾的值或其余绝对的值；相似于"../img/test.png"的url必须基于当前css文件或html文件获得一个绝对地址（如：D:/img/test.png），这些相对值通过计算获得的结果为computed value。

5. used value

因为元素的某些属性值须要依赖其余元素的属性值才能肯定，而这个被依赖元素的属性值只有在rendering tree被渲染到canvas时才能肯定，所以在rendering tree被渲染到canvas的过程当中，某些属性值会由computed value转变到used value。

例如，若是某元素width的属性值为百分比，那么只有知道父元素的width，才能确认该元素的width。

固然，若是元素的属性值不须要依赖其余元素的属性值，那么属性的used value就等于computed value。

6. actual value

理论上used value能够直接使用，可是在一个指定的环境里也许不能使用used value。

例如，有的浏览器只能渲染具备整数pixel的border width，那就必须对used value近似取值 (FF15.01和chrome25采用四舍五入；IE8是取整，直接去掉小数)，近似值即为actual value。

例如元素的font size可能须要基于font-size-adjust属性进行调整，调整后的值即为actual value。

7. user agent

它实质上是一段程序。只要该程序可以解析一篇使用文档语言编写的文档，而且依据w3c标准给该文档应用上样式。该程序可能会显示出文档（如网页），或打印文档（如打印机），亦或将文档转换为其余格式。

8. canvas

供rendering tree渲染的一块空间，理论上它是无限大的，可是rendering tree在渲染时只会渲染到canvas的一块有限区域中。

9. viewport

一个窗口或屏幕上的可视部分。

10. initial containing block

一个containing block，包裹着root元素所产生的box。

对于continuous media, initial containing block由viewport(看第27条)创建，拥有和viewport同样的大小尺寸，且被定为在canvas的起始点。

对于paged media，document文档会被分红几个离散的page，每一个page产生一个page box,每一个page box由page area和margin area组成，第一个page area的边缘所创建的矩形为该document的initial containing block。

ps: 打印机会将 page box转为真正的 sheet。如一个 page box转为一个 sheet，这对应打印模式 single-sided printing；两个 page boxes转为同一个 sheet的正反面，这对应打印模式 double-sided printing

11. containing block

一般，box在进行尺寸计算或是定位时都须要一个参考物，这个参考物就是containing block。某个box在产生以后，它会充当子box的containing block，咱们将这个行为说成“该box为它的子box创建了containing block”。咱们常说的"某个box的containing block"，指的是包围该box的containing block，不是指该box所创建的containing block。

12. positioned元素（定位元素）

position属性值不为static 的dom元素为positioned元素。

13. absolute positioned元素（绝对定位元素）

position属性值为absolute或fixed的dom元素为absolute positioned元素。

14. stack level

在css中，每一个box的位置都由一个三维空间来表示。以下图：

其中Z 维度的值可由z-index属性来设置，但只有positioned element才能设置z-index。每一个box都属于一个stacking context。

对于positioned元素而言，它的z-index值即为它在该stacking context中的stack level；

对于非positioned元素而言，它在该stacking context中的stack level为0。

在将渲染树渲染到canvas的过程当中，同一个stacking context中，产生出该stacking context的元素的背景及该stacking context中stack level为最小负值的元素最早渲染到canvas上。stack level越高的元素会越靠近用户，stack level越低的元素越容易被stack level高的元素遮盖，详细图以下：

15. replaced元素

若是某个元素的content属性的值不在css规定的范围内，例如该元素的content为一张图片，一个document文档或其它的，则该元素为replaced 元素。

replaced元素一般会有一个固定的尺寸，包括固定的宽度，固定的高度，固定的宽高比例，例如图片；可是若替代物为document文档，则没有固定尺寸。

16. line box

将inline-level box排成一行的box，不禁任何DOM元素产生，是CSS标准为了管理inline-level box而设定的一种box。

17. baseline

baseline其实是一条看不见的线，它是css标准用来排列文字的一个标准线。

一般，在inline-level box中会有一条baseline，该box中的文字在该box中的垂直位置是根据font样式以及inline-level box的baseline而定的。

每种font样式会规定baseline处于文字上的哪一个位置。以下图：

最外面的蓝框表示inline-level box，里面的文字为box的内容。中间的那根蓝线表明baseline，文字有多少部分处于baseline的上方以及有多少部分处于baseline的下方是由font样式决定的。一般咱们会把处于baseline上方的文字长度称为height above baseline，下方的称为depth below baseline。

18. inline box

由display为inline的非replaced元素产生且box的内容参与父元素创建的inline formatting context

19. inline-level box

由display为inline，inline-block，inline-table的dom元素产生，这些box会参与到一个inline formatting context中

20. 非 inline box 的 inline-level box

在inline-level box中，有些box是以一个总体参与父元素创建inline formatting context，而非box中的每一个文字。诸如：replaced的inline-level box， display为inline-block / inline-table的dom元素产生的box，这些box就属于非inline box的inline-level box

21. block-level box

由display为block，list-item，table，flex的非replaced的dom元素（这种元素也叫block-level元素）产生，这些box均参与到一个block formatting context中。不过，display为flex的dom元素同时也是flex container box，而其余几位则是block container box。

22. block container box

由display为block，list-item，inline-block，table-cell，table-caption 的非replaced的dom元素产生。该box只能包含block-level box或是创建一个inline formatting context且只能包含inline-level box

23. block box

既是block-level box也是block container box的box为block box，对比第21和22可得知，display为block，list-item的非replaced的dom元素产生的box为block box

24. 边缘（outer edge）

outer edge实际上就是margin edge，若是box的margin宽度为0，那么margin edge就等同于border edge

25. positioned box（定位box）

由position属性值不为static 的dom元素产生。相应的，该dom元素也称之为positioned元素

26. absolute positioned box（绝对定位box）

由position属性值为absolute或fixed的dom元素产生。相应的，该dom元素也称之为绝对定位元素

27. viewport

由user agent提供的一个可视区域。对于continuous media，HTML 文档最终会被渲染到canvas(画布)上，画布会经过viewport呈现给用户。用户能看到画布上多少内容取决于viewport有多大。当viewport的大小小于画布的内容，浏览器就会启动scroll 机制以便用户可看到canvas上全部内容。

28. root box

root元素(参考第2条)产生的box

29. 图片候选字符串（image candidate string）

格式为： [image_url] [integer]w 或[image_url] [integer]x，其中image_url为图片的url地址，integer为一个有效的大于0的整数，w为可渲染的位图宽度描述符号（也可称为物理像素宽度描述符号），x为密度描述符号。

下图为一个屏幕宽度为320px（这个px指css pixel），设备像素比为2的手机，若将图片的宽度设为100vw，那么该图片在该手机上可渲染的的位图宽度为320*2 = 640w

30.media_condition（媒介条件）

单个media_condition诸如“screen”“speech”等媒介名称，或是max-width,min-width等

单个media_condition之间可用and, or，not来链接成一个复合的media_condition

31.物理像素

显示器上最小的物理显示单元，每一个像素都有本身的颜色值及亮度值

32.设备独立像素

也叫密度无关像素，能够认为是计算机系统的一个点，这个点表明一个能够由程序使用的虚拟像素（诸如经常使用的css像素），而后由相关系统转换为物理像素。

33. 设备像素比（device pixel ratio）

设备像素比是物理像素与设备独立像素的比值。若设备宽高为375×667，能够理解为设备独立像素(或css像素)。 dpr为2，根据上面的计算公式，其物理像素就应该为750×1334。

34. 图片源集合（image source set）

一个有序集合，每项包含图片源地址和图片源尺寸大小

术语太多，未完待续。。。