Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

[翻译] W3C-CSS-2.1-9.2 盒子的生成与控制

翻译:次碳酸钴
鼠标hover可见原文,如果发现错误请@我以便修正,谢谢捧场~

盒子的生成与控制(9.2)

下面的几个小结描述了在CSS2.1中可能产生的盒子类型。 在渲染模型中盒子的类型对它的行为有一定的影响。 “display”这个属性将决定一个盒子的类型。

block元素与block盒子(9.2.1)

block元素是从文档中被渲染出来时候呈块状的元素(例如段落元素)。 下面这些“display”属性的取值会让元素成为block元素:“block”、“list-item”、“table”。

block级的盒子是会参与到block元素渲染环境中的盒子。 每个block元素都会生成一个block级的主盒子,它用来容纳后代盒子和生成的内容,并且它也会牵涉到定位机制问题。 某些block元素(如list-item类型的元素),在向其主盒子中添加东西时可能生成额外的盒子。 这些额外生成的盒子会根据主盒子来设置。

除了table类型的block盒子(它将在以后的章节中说明)与替换型元素的盒子之外,block级的盒子也是block容器盒子。 一个block容器盒子,要么只容纳block级的盒子,要么就建立一个inline渲染环境从而只包含inline级的盒子。 并非所有的block容器盒子都是block级的盒子,例如非替换型inline-block和非替换型table-cell,它们都是block容器盒子,但是它们不是block级的盒子。 另外,所有block级的盒子都是block容器盒子。

在不会混淆的情况下,“block级盒子”、“block容器盒子”和“block盒子”有时候也直接统称为“block”。

匿名block盒子(9.2.1.1)

现在有一个类似这样的文档:

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

假设DIV和P都具有“dispaly:block”属性,这个DIV会同时显示inline盒子和block盒子中的内容。 为了更容易地定义出它的渲染方式,我们假设“Some text”这个文本的周围有一个匿名的block盒子。



图中显示了三个盒子,其中一个是匿名盒子。

换言之,对于一个block容器盒子(比如上面例子中的DIV),如果在它内部包含了一个block级的盒子(比如上面例子中的P),这时我们强制使它变成内部只包含block级盒子的状态。

当一个inline盒子包含一个流内block级盒子时,这个inline盒子会被沿着block级盒子周围切开,从而分割这个inline盒子,并分别放入在block级盒子两侧生成的两个匿名盒子中(有一个边框重叠时就只生成一个匿名盒子)。 无论切前切后,每行的inline盒子都在一个闭合的匿名block盒子中,而在切开后,block级盒子会成为这些匿名盒子的同级盒子。 当一个这样的inline盒子受到相对定位的影响时,结果的计算也会影响到其内部的block级盒子。

这个模式用于下面这个例子中。把这些CSS规则

    p    { display: inline }
    span { display: block }

用于下面这个HTML文档

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <HEAD>
    <TITLE>Anonymous text interrupted by a block</TITLE>
    </HEAD>
    <BODY>
    <P>
    This is anonymous text before the SPAN.
    <SPAN>This is the content of SPAN.</SPAN>
    This is anonymous text after the SPAN.
    </P>
    </BODY>

P元素中顺序包含了一个匿名的文本段(C1)、随后是一个block元素、最后是另一个匿名的文本段(C2)。 SPAN分割P后,产生的所有盒子都在BODY中,它包含了:一个容纳C1文本块的匿名盒子、SPAN盒子、另一个容纳C2文本块的匿名盒子。

匿名盒子的属性全都继承于它所在的闭合非匿名盒子。 对于非继承属性将使用他们的初始值。 比如匿名盒子的font属性可以从所在的DIV中继承,而DIV没设置margin,所以匿名盒子的margin为初始值0。

直接在元素上设置的属性会作用到其中的匿名盒子上。 例如上面的例子,如果对P设置上border属性,那么在C1和C2上也会绘制border,只不过这个border在C1行末与C2的行首是不闭合的。

一些浏览器已经使用了其它方式来实现inline盒子包含block盒子时的行为,比如通过对被嵌套在inline盒子中的block盒子做一个包装之后再绘制周围inline盒子的边框。 由于CSS1和CSS2中并没有定义这个行为,一些只兼容CSS1或CSS2的浏览器可能使用这个备选模式,并依然声称其与CSS2.1的这个部分一致。 这不适用于在这版规范发布之后再开发的浏览器。

当解决百分比值的问题时会忽略匿名block盒子,而使用元素所在最近的闭合非匿名盒子替代。 例如,在先前的例子中,如果DIV中匿名block盒子的子元素需要获取自己所在盒子的高度,以计算自己高度的百分比值,那么它将使用由DIV计算出来的block盒子的高度,而不是匿名block盒子的高度。

inline元素与inline盒子(9.2.2)

inline元素是在文档中包含实际内容,且渲染时不成块的元素。 它包含的内容被以行的形式分布(例如段落中的强调文本、行内的图片元素,等)。 下面这些“display”属性的取值会让元素成为inline元素:“inline”、“inline-table”、“inline-block”。 inline元素将生成inline级的盒子,它会参与到inline元素的渲染环境中。

inline盒子是同时满足下面两个特征的盒子:元素为inline级,内容参与到所在的inline渲染环境中。 非替换型元素的display的值为inline时就会生成一个inline盒子。 有些盒子是inline级的,但却不是inline盒子(例如替换型的inline元素,inline-block和inline-table),他们称为原子inline盒子,因为它们将作为一个盒子参与到所在的inline渲染环境中。

匿名inline盒子(9.2.2.1)

任何被直接包含在block容器元素内的文本,必须被转换成一个匿名inline元素。

在一个文档中有下面这样的HTML:

    <p>Some <em>emphasized</em> text</p>

P元素生成一个block盒子,在其内部包含了若干的inline盒子。 容纳“emphasized”这个文本的inline盒子是由EM这个inline元素生成的,但是其它inine盒子(“Some”和“text”)则是由block级元素生成的。 后者就称为匿名inline盒子,因为不存在与之关联的inline元素。

这样的匿名inline盒子会从父block盒子中继承可继承的属性。 不可继承的属性使用初始值,例如,匿名inline盒子的color属性从P元素继承而来,但background属性保持初始的透明。

空白内容会根据“white-space”属性的设置被合并掉,从而不生成匿名inline盒子。

在这份规范中,如果匿名盒子的类型在环境中显而易见,那么无论是匿名inline盒子还是匿名block盒子都简单的称之为匿名盒子。

渲染table时将会出现更多的匿名盒子类型。

Run-in盒子(9.2.3)

这部分的存在是为了使章节序号与之前的草案保持一致。 “display:run-in”目前在CSS3中定义,参见“CSS基本盒子模型”章节。

display属性(9.2.4)
display:
  • 可用值:inline | block | list-item | inline-block | 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
  • 适用于:所有元素
  • 继承性:不继承
  • 百分比:无意义
  • 媒体类:所有媒体
  • 计算值:见文本

下面是这个属性每个值的含义:

block:
  • 这个值会让元素生成一个block盒子。
inline-block:
  • 这个值将会让元素生成一个inline级别的block容器。 inline-block元素的内部将作为一个block盒子来渲染,并且这个元素本身作为一个原子inine盒子渲染。
inline:
  • 这个值会让元素生成一个或多个inline盒子。
list-item:
  • 这个值会让元素(HTML中的LI元素)生成一个主block盒子和一个marker盒子。 关于list的更多信息请查阅list部分
none:
  • 这个值会让元素不在渲染结构中显示,例如在可视化媒体中,这个元素不生成盒子也不影响布局。 这个行为不会被后代元素中设置的display属性覆盖,并且它有下面两种实现方式:元素的后代不生成任何盒子、从渲染结构中完全移除元素的内容。 请注意display的none值不是创建一个不可见的盒子,而是根本不创建任何盒子。 CSS中确实存在能在渲染结构中会生成盒子并影响渲染但是自身不显示的机制,具体请查阅visibility属性的部分。
table、inline-table、table-row-group、table-column、table-column-group、table-header-group、table-footer-group、table-row、table-cell、table-caption:
  • 这些值会让元素的行为变得类似表格(此部分内容详细描述在表格的章节中)。

这些计算值和指定的值是相同的,除了定位元素、浮动元素、根元素(参见“display”、“position”、“float”,之间的关系的部分。

值得注意的是,虽然display的初始值是inline,但是浏览器对许多元素都有默认规则,他们会覆盖这个输出值。 请看附录中的HTML4的示例样式表。

这里是一些display属性的例子:

    p   { display: block }
    em  { display: inline }
    li  { display: list-item }
    img { display: none }      /* Do not display images */
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^