html - 什么定义了我的 div 元素的宽度？

Question

CSS。从来不是我的强项!

考虑以下样式:

  .popupComponentContent{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 16px;
    max-height:100vh;
    max-width:100vw;
    box-sizing:border-box;
    background-color:white;
    box-shadow: 2px 2px 5px 4px rgba(0,0,0,0.5);
    overflow:auto;
  }

注意目标元素的宽度或高度没有特定规则。

让我们将此样式应用于以下标记:

<div class="popupComponentContent" > 
  <p>
    This is a popup!
  </p>
</div>

并且外部 div 很好地适合内容。请参阅 codepen 上的示例 right here .

现在，让我们将它应用于此标记:

<div class="popupComponentContent" > 
  <p>
    This is a popup!
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus gravida eget 
     dolor a interdum. Donec placerat turpis ac lacinia rhoncus. Cras urna magna, 
     imperdiet ut imperdiet ultrices, euismod non elit. Proin vel metus pretium, 
     bibendum tortor vel, congue quam. Sed ultrices lacus quam, nec porttitor 
     mi scelerisque eget. Praesent accumsan varius leo nec tincidunt. Maecenas 
     viverra ultricies purus quis rutrum.</p>
</div>

...确保我们有足够的内容来覆盖视口(viewport)的宽度。请参阅 codepen 上的示例 right here .

为什么第二个例子中的div是屏幕宽度的一半？是什么让这种情况发生？为什么它不延伸到屏幕的整个宽度？

Answer 1

您已将 .popupComponentContent 应用于作为 block 元素的 div。除非指定宽度，否则它会覆盖 100% 的屏幕(父元素)。

在 .popupComponentContent 中，您使用 left: 50%。这实际上并没有将元素定位在它应该在的位置，因为元素是一个没有指定宽度的 block 。它基本上缩小了div。 div 的右侧对齐到右侧。 left: 50% 只是将 div 的左侧移动到 50%，因此您的 div 的宽度为 50%。

如果你想将你的 div 移动到 left: 50% 同时保留其默认宽度(即 100%)，你应该在 div 上应用 display:table .

所以我想说 div 上的 display:block 定义了宽度。