内容简介：CSS中其实有很多专业术语，了解这些术语，有助于加强对css背后的机制的理解。css样式可以让我们随心所欲的在各种电子产品上显示我们所要表达的东西，诸如在screen，在print，在projection上，等等。但是由于显示终端不同，我们需要根据显示终端来调整css样式，而css本身也对属性的使用范围作了一个限定。通常，一个css属性可以在A,B,C等多种media（screen,print,projection等都属于media）上使用，但不可以在D,E,F等多种media上使用，这就有了media g
CSS中其实有很多专业术语，了解这些术语，有助于加强对css背后的机制的理解。
1. Continuous media & Paged media
css样式可以让我们随心所欲的在各种电子产品上显示我们所要表达的东西，诸如在screen，在print，在projection上，等等。但是由于显示终端不同，我们需要根据显示终端来调整css样式，而css本身也对属性的使用范围作了一个限定。
通常，一个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。
- 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，详细分类如下：
2. root 元素
没有父元素的素为root element，在html文件中html标签产生的dom元素即为root element。
3. specified value
一般指开发人员为具体的属性所设定的值。但是如果开发人员没有指定呢，那么specified value按以下顺序来确定。其中1的优先级最高。
- 作者为具体的属性所设定的值。
- 否则， 若该属性具有继承性且该元素不为root 元素，则该属性的specified value和computed value都为父元素的Computed value。
- 否则，使用该属性的initial value(每个属性都有一个initial value)
ps： 若作者没有为该属性指定值，而该属性具有继承性且该元素为root 元素，则specified value为属性的initial value
举个栗子
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的非replaced的dom元素（这种元素也叫block-level元素）产生，这些box均参与到一个 block formatting context 中
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）
一个有序集合，每项包含图片源地址和图片源尺寸大小
术语太多，未完待续。。。
以上所述就是小编给大家介绍的《CSS基本术语》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- 《ElasticSearch6.x实战教程》之准备工作、基本术语
- OpenTracing概念术语介绍
- DevOps最全术语汇总
- Kubernetes概念与术语
- Kafka -- 术语
- JVM&GC-通用术语
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Programming Ruby
Dave Thomas、Chad Fowler、Andy Hunt / Pragmatic Bookshelf / 2004-10-8 / USD 44.95
Ruby is an increasingly popular, fully object-oriented dynamic programming language, hailed by many practitioners as the finest and most useful language available today. When Ruby first burst onto the......一起来看看 《Programming Ruby》 这本书的介绍吧!
