html - 如何在不设置的情况下计算高度

Question

我正在努力提高构建响应式网站的效率，因为我使用的是 Bootstrap(我相信对于这种情况不是特别重要)，所以我正在研究 Bootsnipp .我决定查看网站的源代码并注意到一件我以前从未见过的事情:除了整个页面包装器和页脚之外，他们没有为任何容器设置高度。这让我感到困惑，因为网站上的一切都井井有条，而且 react 灵敏。我了解他们使用 Bootstrap 类(如“col-sm-4”等)的元素，但有没有人了解在不在 css 中指定的情况下制作标题、内容容器等计算高度的艺术？谁能解释这个概念？我尝试使用谷歌搜索，但不确定找到答案的正确关键字。

此外，如果您需要看自己，here是他们 CSS 的链接。

谢谢

Answer 1

理解盒子模型很重要。作为(过于简化的)经验法则，您可以这样想；有两种主要类型的元素:内联(span、b、strong、...)和< strong> block (div，p，...)。

block 标签默认为width: 100%。也就是说它们会自然地拉伸(stretch)以填充它们的水平区域。

内联 标签，您可以将其视为收缩标签。它们收缩以适应其内部元素的大小。当你想到一个粗体标签时，这是有道理的:它与突出显示你想要加粗的文本没有什么不同。它保持很小以适应内容。

不过，在这两种情况下，除非您指定 height，否则 block 和 inline 标签都会缩小它们的 height 来适应他们的内部元素。因此，您可以将网站想象成一堆元素堆叠在一起，页面的顶部是“堆栈”的底部。

这是一个没有指定高度的 div 的示例，其高度随内部内容的大小而变化。 http://jsfiddle.net/S3q2C/请注意，所有 div 都有一个边框，以便轻松查看其相对大小。