我为其中一个容器元素设置了200px的高度，容器本身被拉伸到内容的高度（200px），然后我向容器中添加了另一个元素，并将高度设置为100%，但没有任何效果，因为height：100%使用了父元素的高度，而父元素没有设置高度，之后我想知道如果我设置position会发生什么：绝对值，我设置了它，由于某种原因，百分比开始真正看到父类的高度，但有点扭曲，因为父类的高度应该是200px，但它显示它是204px
我的问题是你要向我解释4px是从哪里来的，为什么它是100% 204px而不是200px enter image description here？另外，我希望你向我解释为什么在位置之后：绝对百分比开始工作，尽管高度没有在父类中设置？
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
div {
display: inline-block;
width: 50px;
}
.container {
position: relative;
width: 100%;
}
.test {
height: 200px;
background-color: aqua;
}
.test2 {
height: 100%;
position: absolute;
background-color: blue;
}<div class="container">
<div class="test"></div>
<div class="test2"></div>
</div>我的问题是你要向我解释4px是从哪里来的，为什么是100% 204px而不是200px？另外，我希望你向我解释为什么在位置之后：绝对百分比开始工作，尽管高度没有在父类中设置？
2条答案
按热度按时间jjhzyzn01#
不，这不是一个css bug。你的
container有一个特定的高度，它被第二个div（height: 100%）100%使用，同时第一个div有一个固定的200px（height: 200px）的高度。你可以在你的container中添加一个border: 1px solid green属性来观察你的div在里面的行为。我建议您使用Flex Boxes来处理这类事情，并注意您分配给类的css属性
r7xajy2e2#
我已经解决了这个问题，下面只解释为什么会出现空格。绝对定位元素的大小会在此之后自动调整。我突出显示的是规范中的引号。
问题在于，由于div.container是一个块元素容器，内部只有内联级别的元素，因此会为其内容创建一个新的内联格式上下文，下面是它的解释：
An inline formatting context is established by a block container box that contains no block-level boxes.此格式的特征之一是一行上的所有内联级框都组合到一个行框中：The rectangular area that contains the boxes that form a line is called a line box。Vertical-align属性适用于内联级别元素，其默认值为baseline：Align the baseline of the box with the baseline of the parent box。在我们的例子中，使用了这个默认的对齐方式。在这个例子中，我们的div.test的基线是相对于父块容器元素的基线支柱对齐的。下面解释了如何相对于基线对齐：...only have meaning with respect to a parent inline element, or to the strut of a parent block container element。没有内容的内联块的基线（在本例中是我们的div.测试）是底部边距边缘：对齐后，行框的相对基线高度略高于我们的div.测试，这意味着在这种情况下行框的高度取决于两件事：div.test的高度，在本例中由for replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box确定，以及下面的空白空间，解释为...it may be taller than the tallest box it contains (if, for example, boxes are aligned so that baselines line up)，因此，div.container的高度变为：...distance between the top of the topmost line box and the bottom of the bottommost line box，在本例中，它就是div. test的行框。如果设置为垂直对齐：top或bottom，则行框下方的空间将消失。这是因为这些值相对于行框对齐：
....values align the element relative to the line box，因此，作为基线对齐的副作用而在其下方创建的空格将消失。此外，您还可以注意到，如果您在div.test中至少写入了一个字符，则vertical-align：baseline开始以不同的方式工作，div.test的基线变为：
...baseline of its last line box，因此下面的空格将自动消失。