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 typeContinuous media / Paged media
braillecontinuous
embosspaged
handheldboth
printpaged
projectionpaged
screencontinuous
speechcontinuous
ttvcontinuous
tvboth


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 sizepixel 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/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值