html - 在html中超出内容流是什么意思？

Question

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

The list-style-position property specifies whether the list-item markers should appear inside or outside the content flow:

我读过一些关于流内容和短语内容的帖子 on stackoverflow .如果我理解正确的话，流内容是可以在其中嵌入内联元素和标签的东西，比如 <p>可以嵌入 <span>和简单的文本、图像等。而短语内容是我们插入一行的内容，即内联。基本上，流内容似乎是可以包含一些分组或大的东西的上层内容，比如段落包含很多行等。措辞内容似乎是较低层次的东西，通常是更大的东西的一部分，比如文本是段落的一部分。

考虑到这个概念，我无法弄清楚为什么某些东西在流内容之外，同时仍然像以前在流内容中一样内联。我注意到两种列表之间的唯一区别 here是当列表项标记在流内容之外时，它们似乎以列表元素的文本向后缩进的方式进行调整。缩进是这样的，如果列表样式标记从 20px 缩进开始，当它们在流内容中时，那么现在文本将从 20px 缩进开始。但是行标记仍然内联!。它们仍然是更大事物的一部分。

我完全无法理解流内容之外的内容仍然是内联的。请解释内容不在流中但仍然是流的一部分是什么意思。

Answer 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>