我正在努力提高构建响应式网站的效率,因为我使用的是 Bootstrap(我相信对于这种情况不是特别重要),所以我正在研究 Bootsnipp .我决定查看网站的源代码并注意到一件我以前从未见过的事情:除了整个页面包装器和页脚之外,他们没有为任何容器设置高度。这让我感到困惑,因为网站上的一切都井井有条,而且 react 灵敏。我了解他们使用 Bootstrap 类(如“col-sm-4”等)的元素,但有没有人了解在不在 css 中指定的情况下制作标题、内容容器等计算高度的艺术?谁能解释这个概念?我尝试使用谷歌搜索,但不确定找到答案的正确关键字。
此外,如果您需要看自己,here是他们 CSS 的链接。
谢谢
最佳答案
理解盒子模型很重要。作为(过于简化的)经验法则,您可以这样想;有两种主要类型的元素:内联(span
、b
、strong
、...)和< strong> block (div
,p
,...)。
block 标签默认为width: 100%
。也就是说它们会自然地拉伸(stretch)以填充它们的水平区域。
内联 标签,您可以将其视为收缩标签。它们收缩以适应其内部元素的大小。当你想到一个粗体标签时,这是有道理的:它与突出显示你想要加粗的文本没有什么不同。它保持很小以适应内容。
不过,在这两种情况下,除非您指定 height
,否则 block 和 inline 标签都会缩小它们的 height
来适应他们的内部元素。因此,您可以将网站想象成一堆元素堆叠在一起,页面的顶部是“堆栈”的底部。
这是一个没有指定高度的 div 的示例,其高度随内部内容的大小而变化。 http://jsfiddle.net/S3q2C/请注意,所有 div 都有一个边框,以便轻松查看其相对大小。
关于html - 如何在不设置的情况下计算高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23278725/