【问题标题】:What does it mean to be out of content flow in html?html中没有内容流是什么意思?
【发布时间】:2023-03-27 21:37:02
【问题描述】:

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

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

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

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

我完全无法理解某些内容超出流动内容并且仍然是内联的。请解释什么是脱离流动内容但仍然是流动的一部分。

【问题讨论】:

  • 只要不遵循 W3Schools 的教程,你就会活得更快乐。更好的措辞(来自 MDN):“list-style-position 属性指定标记框在主体块框中的位置。”这句话应该更类似于“......在内容流动的块之外”。动词。

标签: html css


【解决方案1】:

这个例子让人有点难以看清,因为它们的行长很短,但内容是指您的 li 的文本以及他们谈论您是否希望您的标记与它们内联。请注意,当您运行下面的代码 sn-p 时(来自 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>

【讨论】:

  • 所以 w3schools 不是在讨论 内容模型,而是只讨论特定代码的内容。
猜你喜欢
  • 1970-01-01
  • 2023-03-27
  • 1970-01-01
  • 2011-07-05
  • 1970-01-01
  • 1970-01-01
  • 2019-01-30
  • 2014-06-11
  • 2017-12-04
相关资源
最近更新 更多