css - 组合宽度和最大宽度

Question

假设我有这个:

.box {
  width: 600px;
  height: 300px;
  background: green;
  max-width: 80%;
}

<div class="box"></div>

从玩弄这个开始，只要盒子不会扩展到超过 600 像素，它就会占据父容器的 80%。一旦父级进一步拉伸(stretch)，框将保持固定宽度，不会占据页面的 80%。对吧？

Answer 1

 .box {
     width: 600px;
     height: 300px;
     background: green;
     max-width: 80%;
  }

让我们分解一下:

盒子的 width 默认为 600px，这意味着 div 的宽度始终为 600px

您的 max-width 属性会限制宽度，但是，如果您的父元素的总空间小于 750px(因为 750 的 80% 是 600)。这意味着该元素的最大宽度将始终为其父元素的 80%。

例子:

当宽度为 600px 时，800px 的父级有足够的空间，因此宽度将为 600px

当宽度为 600px 时，500px 的父级将没有足够的空间，因此它将恢复为父级的 80%，您的 div 将为 400px

关于你的问题:

Once the parent stretches further, the box will remain fixed in width and not take up 80% of the page. Right?

这是正确的。