浏览器用于布局网页的步骤

Question

我现在正在进入HTML，今天我正在学习页面布局。我想了解浏览器用于布局网页的算法，以便我可以更好地预测div将根据我的HTML显示在哪里。

我理解：

• 有块状元素和跨度元素。
• 块状元素占用所需的垂直空间，默认情况下占用所有水平空间。
  • 如果添加浮动样式或绝对定位，则div会占用所需的水平空间，或者您可以选择设置宽度值。
• 类似跨度的元素只占用所需的空间。

我开始变得不清楚的地方是当我开始使用clear:both或涉及嵌套div时会发生什么。

我认为我正在寻找的是浏览器在展示文档时使用的 游标 的概念。 如果存在这样的概念，那么你能解释它是如何运作的吗？否则，请指出您认为有用的信息。

为简单起见，假设一个简单的HTML对象模型 - 只有宽度和高度，边距或填充等。

Answer 1

我认为没有实际的游标，尽管浏览器可能在内部使用类似的东西。有很多规则（搜索'Box Model'，甚至更好，'Visual Formatting Model'）决定了页面的显示方式。 你是对的，有块和内联元素。除非另有说明，否则块确实会占用所有水平空间。除非另有说明，否则它们的尺寸垂直这个事实也应该回答你关于嵌套div的问题。

据我所知，你确实有一些基本的理解，这也是正确的。但是，不要在这里粘贴关于盒子模型的所有（不兼容！）版本的整个文档，我认为最好从w3.com网站开始查找有关它的一些信息。

Answer 2

我建议下一步是阅读元素的固定，相对和绝对定位之间的差异。 float和clear的使用会以不同的方式影响每个场景，因此了解每个定位的工作方式是重要的。

Eric Meyer有关此主题的一些非常有用的信息。