在html中超出内容流程意味着什么?

时间:2016-02-04 11:47:47

标签: html css

我正在阅读文章http://www.w3schools.com/css/css_list.asp上定位列表项标记。我不明白他们的意思,

  

list-style-position属性指定列表项标记是否应出现在内容流的内部或外部:

我已经阅读了一些有关流量内容和短语内容的帖子on stackoverflow。如果我理解正确,流内容可以嵌入内嵌元素和标签,例如<p>可以嵌入<span>和简单的文本,图像等。而短语内容是我们插入的内容线,即内联。基本上流内容似乎是一个上层的东西,可以包含分组或大的东西,如段落包含许多行等。短语内容似乎是较低级别的东西,通常是更大的一部分,如文本是段落的一部分。

考虑到这个概念,我无法弄清楚当流体内容仍处于内联状态时,某些东西是否会流出流内容。我在两种类型的列表here之间注意到的唯一区别是,当列表项标记位于流内容之外时,它们似乎以列表元素的文本向后缩进的方式进行调整。缩进是这样的,如果list-style-markers开始于20px缩进,当它们在流内容中时,那么现在文本将从20px缩进开始。但是行标记仍然是内联!它们仍然是更大的东西的一部分。

我完全无法理解某些内容不在流内容并且内联的内容。请解释一下流量内容是什么意思,但仍然是流程的一部分。

1 个答案:

答案 0 :(得分:1)

该示例使其有点难以看清,因为它们的行长度太短,但内容是指li的文本以及他们是否希望您的标记与其内联。请注意下面运行下面的代码片段(来自W3C的示例中的副本,但行更长。注意子弹的放置与包裹的下一行文本相比。

ul.a {
  list-style-position:inside;
}
ul.b {
  list-style-position:outside;
}
<p>The following list has list-style-position: inside:</p>
<ul class="a">
  <li>I like coffee I like tea.  I love the java jive and it loves me.  Coffee and tea and the java and me.  A cup a cup a cup a cup a cup.</li>
  <li>I love java, sweet and hotWhoops Mr. Moto, I'm a coffee pot/ Shoot the pot and I'll pour me a shot. A cup, a cup, a cup, a cup, a cup</li>
  <li>Oh slip me a slug from the wonderful mug And I'll cut a rug just snug in a jug A sliced up onion and a raw one. Draw one - Waiter, waiter, percolator</li>
</ul>

<p>The following list has list-style-position: outside:</p>
<ul class="b">
  <li>I like coffee I like tea.  I love the java jive and it loves me.  Coffee and tea and the java and me.  A cup a cup a cup a cup a cup.</li>
  <li>I love java, sweet and hotWhoops Mr. Moto, I'm a coffee pot/ Shoot the pot and I'll pour me a shot. A cup, a cup, a cup, a cup, a cup</li>
  <li>Oh slip me a slug from the wonderful mug And I'll cut a rug just snug in a jug A sliced up onion and a raw one. Draw one - Waiter, waiter, percolator</li>
</ul>

<p>"list-style-position: outside" is the default setting.</p>