CSS 盒模型基本术语解释

转载请注明出处：http://blog.csdn.net/zhuxuanfang/article/details/38676777

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.21按照划分角度的不同定义了如下media group。

（1）continuous media 或者paged media

（2）visual media 或者audio media 或者speech media 或者tactile media

（3）grid media 或者bitmap media

（4）interactive media或者static media

（4）all

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

Media type	Continuous media / Paged media
braille	continuous
emboss	paged
handheld	both
print	paged
projection	paged
screen	continuous
speech	continuous
ttv	continuous
tv	both

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

specified value: 按照以下优先级来指定（1的优先级最高）

1. 作者为具体的属性所设定的值。

2. 否则，若该属性具有继承性且该元素不为root 元素，则该属性的specified value和computed value都为父元素的Computed value。

3. 否则，使用该属性的initial value(每个属性都有一个initial value)

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

来个小例子：

html代码：

<body>

<div>
LLLLLLLaaaaaaaa
<em>EMEMEMEMEMEMEMEM</em>
</div>
</body>

（1）先不设定任何样式，浏览器显示为：

可以看到，font-size的取值为medium(font-size的initial value)

（2）设定一些css样式，如：

div{
font-size:30px;
}

浏览器显示为：

对比两次截图，可以看到第一个图中，div的font-size和em的font-size均为medium(font-size的initial value)。而在第二张图中，div的字体大小被设为30px，而em的字体大小没有设置，但看起来和div中的字体一样大。这是由于font-size属性具有继承性，em元素又不为root元素，因此em元素的font-size的值与父元素div的font-size值一样。

computed value: 当为属性设定值时，该值可能是绝对的（它们不是相对其他值而言的，例如”red”,”2px”,为图片路径指定了绝对的url地址），也可能是相对的（它们是相对其他值而言的，如””2em”,”2ex”，为图片路径指定了相对的url地址）。对于绝对值，该值无需再经过计算即为computed value。对于相对值，该值必须经过计算，例如，单位为相对单位（如em,ex）的值必须与合适的font size或pixel size相乘得到一个以px结尾的值或其他绝对的值；类似于"../img/test.png"的url必须基于当前css文件或html文件得到一个绝对地址（如：D:/img/test.png），这些相对值经过计算得到的结果为computed value。

used value: 由于元素的某些属性值需要依赖其他元素的属性值才能确定，而这个被依赖元素的属性值只有在rendering tree被渲染到canvas时才能确定，因此在rendering tree被渲染到canvas的过程中，某些属性值会由computed value转变到used value。例如，如果某元素width的属性值为百分比，那么只有知道父元素的width，才能确认该元素的width。当然，如果元素的属性值不需要依赖其他元素的属性值，那么属性的used value就等于computed value。

actual value: 理论上used value可以直接使用，但是在一个指定的环境里也许不能使用used value。例如，有的浏览器只能渲染具有整数pixel的border width，那就必须对used value近似取值 (FF15.01和chrome25采用四舍五入；IE8是取整，直接去掉小数)，近似值即为actual value。例如元素的font size可能需要基于font-size-adjust属性进行调整，调整后的值即为actual value。但是，不是所有的信息都在actual value中记录下来。例如属性orphans(设置当元素内部发生分页时必须在页面底部保留的最少行数)的actual value就不会表示出这个元素里存在多少行。

user agent ： 它实质上是一段程序。只要该程序能够解析一篇使用文档语言编写的文档，并且依据w3c标准给该文档应用上样式。该程序可能会显示出文档，或读出文档，或打印文档，亦或将文档转换为其他格式。（英文链接http://www.w3.org/TR/CSS2/conform.html#user-agent）

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

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

initial containing block: 将root元素包裹着的一个block（即一个矩形）。对于continuous media,initial containing block由viewport建立，拥有和viewport一样的大小尺寸，且被定为在canvas的起始点。对于paged media，document文档会被分成几个离散的page，每个page产生一个page box,每个page box由page area和margin area组成，第一个page area的边缘所建立的矩形为该document的initial containing block。（ps: user agent会将page box转为真正的sheet。如一个page box转为一个sheet，这对应打印模式single-sided printing；两个page boxes转为同一个sheet的正反面，这对应打印模式double-sided printing）。

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

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

stack level: 在css2.1中，每个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高的元素遮盖，详细图如下：

replaced元素: 如果某个元素的content属性的值不在css规定的范围内，例如该元素的content为一张图片，一个document文档或其它的，则该元素为replaced 元素。例如img元素的内容被src指定的图片所代替，因而它就为replaced元素。replaced元素通常会有一个固定的尺寸（固定的宽度，固定的高度，固定的宽高比例），如图片，但是若替代物为document文档，则没有固定尺寸。

line box：将inline-level box形成一行的矩形区域，不由任何DOM元素产生，是CSS标准为了管理inline-level box而设定的一种box。

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。

参考文章：CSS2.1 Specification http://www.w3.org/TR/CSS2/

CSS 盒模型基本术语解释相关推荐

深入理解CSS盒模型 - 程序猿的程 - 博客园
深入理解CSS盒模型本文是学习中传思客在慕课网开的课程<前端跳槽面试必备技巧>的学习笔记.课程地址:https://coding.imooc.com/class/evaluation/1 ...
html盒子模型子元素怎么水平占满父元素_前端面试常考问题之css盒模型
一.题目:谈一谈你对CSS盒模型的认识专业的面试,一定会问 CSS 盒模型.对于这个题目,我们要回答一下几个方面: (1)基本概念:content.padding.margin. (2)标准盒模型. ...
尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...
CSS盒模型（详解）
目录前言一.什么是CSS盒模型二.标准模型+IE模型的区别 1.CSS如何设置两种盒模型 2.JS如何设置/获取盒模型对应宽高: 前言什么是css,css有几种,让我带你来了解一下一.什么是 ...
css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
CSS字体、文本属性、CSS 盒模型
1.css字体 1.1 font-family 作用:设置文本的字体系列语法:font-family:字体名称: 常用值一个字体名称或系列名称(介绍常用字体名称.字体系列) 1.楷体 KaiTi ...
CSS盒模型、边框和背景、表格和列表、颜色和透明度、阴影和轮廓及长度单位rem
1.CSS 盒模型元素尺寸 CSS 盒模型中最基础的就是设置一个元素的尺寸大小.有三组样式来配置一个元素的尺寸大小,样式表如下: 属性值说明 CSS版本 width auto.长度值或百分比设 ...
css盒模型和元素绘制
转自:http://www.mysjtu.com/page/M0/S438/438952.html 一.什么是css盒模型? W3C组织就建议把所有网页上的对象都放在一个盒(box)中,设计师可以通过 ...
CSS 盒模型与box-sizing
一.盒模型一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...
css盒模型中margin很牛逼
css盒子模型,说简单也简单,用的时候也有不简单的. 其中margin的值可以为负值,并且为了实现margin,忽略父级的padding.border.甚至定位.这在布局上很有用,要注意. ----- ...

CSS 盒模型基本术语解释

CSS 盒模型基本术语解释相关推荐

最新文章

热门文章

CSS 盒模型 基本术语解释

CSS 盒模型 基本术语解释相关推荐

最新文章

热门文章

CSS 盒模型基本术语解释

CSS 盒模型基本术语解释相关推荐