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>

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

为什么第二个例子中的div是屏幕宽度的一半？是怎么回事？为什么不延伸到屏幕的整个宽度？

Answer 1

您已将.popupComponentContent应用于作为块元素的div。除非指定了宽度，否则它将覆盖100％的屏幕（父元素）。

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

如果您想将div移至left: 50%，同时保留其默认宽度（100％），则应在div上应用display:table。

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

Answer 2

删除transform行和left行会使其显示为全宽。

实际上，它仅覆盖了50％，因为left: 50%;在窗口的中间碰到了左边距，然后transform: translate(-50%, -50%);以另一种方式将整个元素碰回窗口。

Answer 3

您可以删除transform属性以了解它。如果你这样做，你会看到元素的宽度与left: 50%和右边之间的剩余空间相符。

因此，您可以使用此left属性来调整弹出窗口的最大宽度（以及调整变换以使其保持居中）。

看看flexbox，它可以帮助你改善这一点。

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

3 个答案: