1

我试图了解以下内容

  1. 高度：自动；这是做什么的？
  2. 高度：100%；这是做什么的？
  3. 1 和 2 有什么区别？有什么例子可以解释差异吗？

提前致谢！

4

3 回答 3

6

height: auto;意思是，height元素的 会根据它所拥有的内容而增加，如果你分配固定height，内容会溢出，所以当你不知道你的元素会包含多少时，你将它设置为auto，所以height会auto增加。

当您设置height: 100%;它时，它将占用容器元素的整个垂直空间，例如，当容器元素200px处于高度时，并且您height: 100%;在子元素上使用时，它将是height: 100%;容器元素 = 200px。

默认情况下，元素height始终设置为auto除非和直到您指定height使用px %或任何其他单位。

Demo (height: auto;) 继续添加内容，你的元素会垂直扩展。

Demo 2 (height: 100%;)，这就像你height为你的元素设置一些固定的一样，如果内容增加，它会overflow。此方法仅在您希望子元素占用父容器 100% 的垂直空间时才派上用场。

于 2013-10-18T05:31:24.007 回答
2

  1. height:100%: 表示元素将具有其父容器的 100% 高度。

  2. height:auto：意味着，元素将具有灵活的高度，即它的高度将取决于它的子元素的高度

  3. 单击此处了解与代码的区别

于 2013-10-18T05:29:46.310 回答
0

参考：http ://www.w3.org/TR/CSS2/visudet.html#the-height-property

内容高度：“高度”属性

  <percentage>

指定百分比高度。该百分比是相对于生成框的包含块的高度计算的。如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为'auto'。根元素上的百分比高度是相对于初始包含块的。注意：对于包含块基于块级元素的绝对定位元素，百分比是相对于该元素的填充框高度计算的。这是从 CSS1 的一个变化，其中百分比总是相对于父元素的内容框计算。

auto

高度取决于其他属性的值。请参阅下面的散文。请注意，绝对定位元素的包含块的高度与元素本身的大小无关，因此始终可以解析此类元素的百分比高度。但是，在文档中稍后出现的元素被处理之前，高度可能是未知的。

'height' 的负值是非法的。

例如，以下规则将段落的内容高度设置为 100 像素：

p { height: 100px }

内容高度超过 100 像素的段落将根据 'overflow' 属性溢出。

于 2013-10-18T05:50:14.740 回答