网页设计中的对象插入规则

  • 2019-05-14 11:19:44
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

1、网站建设中,如果一个table-cell元素的父元素不是table-row元素,则会在该table-cell 元素及其父元素之间插入一个匿名table-row对象。所插入的这个对象将包含该table-cell元素的所有连续兄弟,考虑以下样式和标记:

system {display: table;}

name, moons (display: table-cell;}

<systera>

<name>Mercury</name>

<moons>0</moons>

</system>

在单元格元素(table-cell)和system元素之间插入了一个匿名table-row对象,它包含name和moons元素。

即使父元素是table-row-group,这个规则也同样成立。扩展这个例子,假设应用以下样式:

system {display: table;}

planet {display: table-row-group;}

name, moons {display: table-cell}

<system>

<planet>

<name>Mercury</name>

<moons>0</moons>

</planet>

<planet>

<name>Venus</name>

<moons>0</moons>

</planet>

</syscem>

在这个例子中,两组单元格都包含在一个匿名table-row对象中,该对象插入到该组单元格和相应Planet元素之间。

2、如果一个table-row元素的父元素不是table、inline-table或table-row-group元素,则会在该table-row元素及其父元素之间插入一个匿名table元素。网站建设人员插入的这个对象将包含该table-row元素的所有连续兄弟。考虑以下样式和标记:

docbody{display: block;}

planet {display: table-row;}

<docbody>

<planet>

<narae>Mercury</name>

<moons>0</moons>

</planet>

<planet>

<name>Venus</name>

<moons>0</moons>

</planet>

</docbody>

由于planet元素的父元素的display值为block,所以会在planet元素和docbody元素之间插入匿名table对象。这个对象将包含这两个planet元素,因为它们是连续兄弟。

3、如果一个table-column元素的父元素不是table、inline-table或table-column-group元素,则在该table-column元素及其父元素之间插入一个匿名table元素。这与前面讨论的table-row元素的相应规则很相似,只不过这里是面向列的。

4、如果一个table-row-group、table-header-group、table-footer-group、table-coliunn-group或tdble-caption元素的父元素不是table元素,则会在该元素及其父元素之间插入一个匿名table元素。

5、如果一个table或inline-table元素的子元素不是table-row-group、table-header-group、table-footer-groyp、table-row或table-caption元素,则在该table元素与其子元素之间插入一个匿名table-row对象。这个匿名对象将包含该子元素的所有不是table-row-group、table-header-group、table- footer-group、table-row或table-caption元素的连续兄弟,考虑以下样式和标记:

system {display; table;}

planet {display: table-row;}

name, moons {display: table-cell;}

<system>

<planet>

<name>Mercury</nanie>

<moons>0</moons>

</planet>

<name>Venus</name>

<moons>0</moons>

</system>

这里,在system元素和第二组name和moons元素之间插入了一个匿名table-row对象。planet元素未包含在这个匿名对象中,因为其display值为table-row。

6、如果一个table-row-group、table-header-group或table-footer-group元素的子元素不是table-row元素,网站建设人员则在该元素及其子元素之间插入一个匿名table-row对象。这个匿名对象包含该子元素的所有本身非table-row对象的连续兄弟。考虑以下样式和标记

system {display: table;}

planet {display: table-row-group;}

name, moons {display: Cable-cell;}

<system>

<planet>

<name>Mercury</name>

<moons>0</moons>

</planet>

<name>Venus</name>

<moons>0</moons>

</system>

在这里,网站建设的各组name和moons元素都包含在一个匿名table-row元素中。第二组name和moons元素与system之间之所以插入匿名table-row元素,是根据规则5完成的。对于第一组,匿名对象插入到planet元素和其子元素之间,因为planet元素是一个table-row-group元素。

7、如果一个table-row元素的子元素不是table-cell元素,则在该元素和其子元素之间插入一个匿名table-cell对象。这个匿名对象包含该子元素的所有本身非table-cell元素的连续兄弟。考虑以下样式和标记:

system {display: table;}

planet {display: table-row;}

name, moons {display: table-cellj}

<system>

<planet>

<name>Mercury</name〉

<num>0</num>

</planet>

</system>

由于元素num没有与表有关的display值,将在planet元素和num元素之间插入一个匿名table-cell对象。

这种行为还会扩展到匿名行内框。假设未包含num元素:

<system>

<planet>

<name>Mercury</name>0

</planet>

</system>

0仍将包含在匿名table-cell对象中,为了进一步说明这一点,来看一个选自CSS规范的例子:

example {display: table-cell;}

row {display: table-row;}

h1 {font-weight: 900;}

<example>

<roW>This is the <hi>top</hi> row.</row>

<row>This is the <hi>bottom</hi> row.</row>

</example>

在每个row元素中,文本片段和hi元素都包含在一个匿名table-cell对象中。

当前文章标题:网页设计中的对象插入规则

当前URL:http://www.lyjtt.cn/news/wzzz/objects-inserted-rules.html

上一篇:网页设计中的匿名表对象

下一篇:网页设计中的表层

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)