视觉格式化模型-控制框

我们经常用到块元素、行内元素的概念,那么,到底什么是块元素,什么是行内元素,它们有什么特点,怎么形成的,有什么作用呢?什么是块框,什么又是行内框呢?

一、块级元素和块框

块级元素是源文档中那些在视觉上被格式化为块(如:段落)的元素。某些 ‘display’ 特性的取值会产生块级元素:’block’,’list-item’,’run-in’(某些时候是块级元素,参见下文 “run-in”),以及’table’。

块级元素(不包含 table),会形成仅包含块框或仅包含行内框的主块框( principal block box )。主块框会为子孙元素建立包含块,生成内容,并且也是涉及所有定位体系的框。主块框参与block formatting context。

某些块级元素在主块框之外生成额外的框:’list-item’元素。这些额外的框根据原始框来定位。 个人感觉那些额外的框是用来放置标志的,比如,LI 元素前面的点。

匿名行框,例如:

<DIV> Some text <P>More text </DIV>

DIV 看来包含行内内容和块内容。为了使格式化简单一些,我们假定有一个匿名块框围绕在”Some text”周围。

上面的图中有 3 个框,div 的 box,P 的 box,以及包含 “Some text” 的匿名块框。

换句话说:如果一个块框(如上例中为DIV生成的框)在其中包含另外一个块框或插入框(如上例中的P),那么,我们强迫它只能包含块框或插入框。因此,上面的 “Some text” 被强制加到一个匿名的块框里面。

当一个行内框包含一个块框(block box)时,这个行内框 (inline box)(和与它处于同一行框内的祖先行内框)会围绕着块框被截断。断点之前和之后的行框(line boxes)会被封闭到匿名的框里,并且,这个块框会成为这些匿名框的兄弟框。当这样的行内框受到相对定位的影响时,相对定位也会影响块框。

例如:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<HEAD>

<TITLE>Anonymous text interrupted by a block</TITLE>

<style>

div {

width: 200px;

border: 1px solid gold;

}

span {

border: 1px solid red;

}

p {

width: 100px;

border: 1px solid green;

}

</style>

</HEAD>

<BODY>

<div>

<span>This is anonymous text before the P.

<P>This is the content of P.</P>

This is anonymous text after the P.

</span>

</div>

</BODY>

提示:你可以先修改部分代码再运行。

上述代码中,SPAN 元素包含匿名文本区块 C1,后跟块级元素 P ,最后是匿名文本区块 C2。最后的框(boxes)是围绕 SPAN 的DIV形成的块框,包含 C1 的匿名块框,P 的块框,和另一个包含 C2 的匿名块框。

注意,行框(line box)和行内框(inline box)是两个不同的概念,后续会说到行框(line box)。

匿名框的特性(properties)从包含它的非匿名框那里继承而来(比如,例1中,匿名框会继承包含它的 DIV 特性)。给继承特性会使用初始值。比如,字体,匿名框会从DIV继承,但是margin值会是 0 。

匿名框不会影响元素的原有特性设置。如例2中 SPAN 设置了 border,产生匿名框后,C1 C2还是被红色的边框包围。

块框会占据一整行。

二、行内级别元素和行内框

行内元素是源文档中那些不形成新的内容块的元素;内容在行内分布(如,段落内着重的文本,行内图形等等)。某些’display’特性的值形成行内元素:’inline’,’inline-table’,’run-in’(某些时候;参见下文 “run-in”)。行内级别元素生成行内框。

匿名行内框

<P>Some <EM>emphasized</em> text</P>

P元素生成一个块控制框,其内还有几个行内框。”emphasized”的框是一个行内元素(< em>)产生的行内框,而其它的框(”Some”和”text”)是块级元素(P)产生的行内框。后者就称为匿名行内控制框,因为它们没有与之相关的行内元素,所以,这些框被叫做匿名行内框。

这样的行内框从其父块框那里继承可以继承的属性。非继承属性取它们的初始值。例子中,初始匿名框的颜色继承自P,而背景是透明的。

空格内容会根据 ‘white-space’ 特性被压缩,不会创建任何匿名行内框。

匿名行内框和匿名块框可以被统称为匿名框。

在格式化 table 时,会形成更多的匿名框。

三、插入框

插入框的表现如下: 1. 如果插入框包含一个块框,那么插入框会成为一个块框; 2. 如果一个块框(不是浮动,也不是绝对定位)跟随在一个插入的控制框之后,则该插入框成为该块框的第一个行内框。 3. 否则,该插入框成为一个块框。 (如果display:run-in的box后面跟着一个display为block水平的box,那么这个应用了display:run-in的box将会变成display:inline属性,同时内容嵌入到后面的display为block的box中;否则这个display:run-in的box维持其本身的block属性。) 一个’run-in’框在插入标题时很有用,如下例:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD><TITLE>A run-in box example</TITLE>

<STYLE type="text/css">

H3 {

display: run-in

}

</STYLE>

</HEAD>

<BODY><H3>A run-in heading.</H3>

<P>And a paragraph of text that follows it. </BODY>

</HTML>

提示:你可以先修改部分代码再运行。

(run-in目前浏览器支持混乱)

四、’display’ 特性

‘display’特性

值: inline | block | list-item | run-in | compact | marker |table | inline-table | table-row-group | table-header-group |table-footer-group | table-row | table-column-group | table-column |table-cell | table-caption | none | inherit 初始值: inline 适用于: 所有元素 可否继承: 否 百分比: N/A 媒介: 所有

block 该值使一个元素生成一个块框。 inline-block 该值使一个元素生成一个块框,自身在文档流中像一个行内元素,跟替换元素相似。元素的内部按照块框格式化,自身按照一个行内替换元素格式化。 inline 该值使一个元素生成一个或多个行内框。 list-item 该值使一个元素(如HTML中的LI)生成一个原始块框和一个列表项行内框。要了解列表和列表格式化的信息,请参见列表一节。 none 该值使一个元素在格式化结构中不显示(换言之,该元素对布局没有影响)。子孙元素也不产生任何框;该行为不能由设置子孙元素的 ‘display’ 属性而被覆盖。 请注意 ‘none’ 的显示特性并不生成一个不可见的框;它根本不生成框。CSS包含了机制使一个元素能够在格式化结构中生成框而影响格式化,但本身不可见( visible 特性)。 run-in 根据上下文,这些值要么生成块框,要么生成行内框。对于插入和压缩框适用的属性基于它们最终的状态(行内或块类)。

注意,尽管’display’的初始值是 ‘inline’,用户端(对我们来说是浏览器)的缺省样式表可以覆盖它。比如,P 和 DIV 的 display 特性值是 ‘block’,TABLE的display 特性值是 ‘table’。

另外注意,在IE6和IE7中,对display特性支持的不完全。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏潇涧技术专栏

Builtin Lint Detectors (1)

本文主要介绍的是Lint工具中自带的与Android开发相关的lint检查项,通过查看lint检查项的描述及其代码实现,我发现这里面存在不少应用开发编码的Bes...

471
来自专栏郭霖

Android图片加载框架最全解析(四),玩转Glide的回调与监听

大家好,今天我们继续学习Glide。 在上一篇文章当中,我带着大家一起深入探究了Glide的缓存机制,我们不光掌握了Glide缓存的使用方法,还通过源码分析对缓...

3666
来自专栏Objective-C

Swift 基本语法05-"String"

2589
来自专栏IMWeb前端团队

Node 中的 events.EventEmitter 模块

本文作者:IMWeb elvin 原文出处:IMWeb社区 未经同意,禁止转载 Node 中的许多核心 API 都是通过事件驱动的异步架构实现的,具体...

1706
来自专栏angularejs学习篇

angularjs学习第一天笔记

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,...

632
来自专栏angularejs学习篇

angularjs学习第一天笔记

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,...

1001
来自专栏分布式系统和大数据处理

悟透JavaScript

这本书分为了三个部分,第一部分“JavaScript真经”主要讲解JavaScript的一些核心概念,主要是数据类型、函数、原型、对象。并通过在JavaScri...

694
来自专栏鸿的学习笔记

Python写的Python解释器(七)--完结篇

在程序运行时,只会创建一次VirtualMachine实例,这是因为只有一个Python解释器。 VirtualMachine存储着call stack,异常状...

743
来自专栏专注 Java 基础分享

Java ---自定义标签(二)

     上篇文章的最后,我们自定义了一个带属性的标签,并使用它完成了一个简单的案例。其实到这我们已经可以看出来,前端jsp页面只需要写一个类似html语法的标...

1857
来自专栏Java后端生活

JavaWeb(十三)简单标签

用户定义的一种自定义的jsp标记 。当一个含有自定义标签的jsp页面被jsp引擎编译成servlet时,tag标签被转化成了对一个称为 标签处理类 的对象的操作...

804

扫码关注云+社区