Question

说我有这个：

＆＃13;

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

＆＃13;

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

＆＃13;

从玩这个开始，看起来这个盒子占据了父容器的80％，只要它不会超过600px。一旦父母进一步伸展，该框将保持宽度固定而不占据页面的80％。正确？

Answer 1

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

让我们分解一下：

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

您的max-width属性会限制宽度，但是，如果您的父元素的总空间变小，则 750px （因为750的80％是600）。这意味着元素的最大宽度将始终是其父级的80％。

示例：

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

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

关于你的问题：

一旦父母进一步伸展，该框将保持宽度固定而不占据页面的80％。正确？

这是正确的。

Answer 2

正确，＆＃39;框＆＃39;只会使用＆＃39; max-width＆＃39;当它处于低于600px宽的情况时属性。

以上任何东西，它将保持600px的宽度。