为什么绝对位置会给锚标签 100% 的容器高度？答案

【问题标题】：Why does position absolute give anchor tag 100% height of it's container?为什么绝对位置会给锚标签 100% 的容器高度？
【发布时间】：2017-03-17 00:31:16
【问题描述】：

我一直在研究http://getbootstrap.com/javascript/#carousel的引导轮播

具有carousel-control 类的左侧和右侧尖括号控件是锚标记。这些锚标记具有 100% 的容器高度。这些也是相对于容器 div 绝对定位的。我的问题是：

为什么绝对位置会给锚标记（内联元素）100% 的容器高度？

【问题讨论】：

标签： html css twitter-bootstrap anchor

【解决方案1】：

定位绝对 blockifies 元素，但除非明确说明，否则不会使它们达到父元素的 100% 高度。

在这种情况下，它在 CSS 中说明

.carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    background-color: rgba(0,0,0,0);
    filter: alpha(opacity=50);
    opacity: .5;
}

基本上

top: 0;
bottom: 0;

本质上与height:100%相同。

【讨论】：

当height 未定义、自动或100% 时，top: 0; bottom: 0; 等同于height: 100%，这让我感到惊讶。我以为top 会覆盖bottom。和MDN 建议你所说的。
高度不需要定义。顶部/底部属性是指边距偏移量。所以基本上孩子的上边距将是距父级顶部 0px 和底部距底部 0px 的边距。这等于等于height:100%。很方便，对吧？
您能否为position: absolute 使元素block 级别提供参考？
这不是完全块级别...它是某种块级别。显示属性计算到block。
是的getComputedStyle($(".left.carousel-control")[0]).getPropertyValue("display") 返回block。但是，如果它具有计算样式display: block，它不正是块级别吗？