主页 / coding / 问题 / 79583530
Accepted
user24948077
Asked: 2025-04-21 00:27:48 +0800 CST

浏览器不符合视觉格式模型规范？

  • 772

根据CSS视觉格式模型中的描述

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含块的宽度

当margin和width都不是，auto并且它们的和大于包含块的宽度时，margin-right将被忽略，并计算值以使等式成立

.parent {
  background-color: #01c1ff;
  width: 400px;
  height: 400px;
  margin: auto;
}

.child {
  height: 200px;
  margin-left: 150px;
  width: 200px;
  margin-right: 150px;
  background-color: #ff01c1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

</html>

这段代码中，对于child来说，包含块的宽度是400px，而width++的margin-left和margin-rigth是500px。根据描述，margin-right最终应该设置为50px才能使等式成立。

但是在浏览器中检查时发现margin-right并没有设置为50px，而是依然是150px。

结果

css

1 个回答

  1. Best Answer

    在正常流程中：

    margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = width of containing block

    当这些值都不为auto，但它们的总和超出了包含块的宽度，则必须做出一些让步。根据CSS2.1 规范 §10.3.3：

    如果值过度约束（即总和大于包含块的宽度），并且如果margin-left、margin-right和全部width指定（即未auto），则margin-right 变为 auto。

    这部分在理论上是正确的。

    但你的代码中实际发生的事情如下

    你写道：

    .child {
  margin-left: 150px;
  width: 200px;
  margin-right: 150px;
}
    • 父母是width: 400px
    • 所以总水平空间是 500px
    • 显然太多了

    但实际上，浏览器并不会重新计算margin-right来解决这个问题，而是直接让子元素溢出到父元素的宽度之外。

    这是允许的，因为：

    • 子元素是正常流中的块级元素
    • 它没有自动边距
    • 如果你使用固定边距 + 宽度告诉浏览器，浏览器通常会允许元素溢出

    因此，规范给出了一个公式，当其中一个值为时，该公式可用于修复过度约束的布局。auto

    但是如果都不是auto，浏览器就会尊重您所写的内容，即使它破坏了规则。

    简而言之：如果过度限制具有固定边距 + 宽度的框，浏览器就会让它溢出，除非其中一个属性是auto，在这种情况下它会重新计算。

    尝试一下这个：

    如果您希望布局按照规范所暗示的方式进行调整，请将一个值设置为auto，例如：

    .child {
  margin-left: 150px;
  width: 200px;
  margin-right: auto;
}

    现在，浏览器将计算margin-right50px 以适应该方程！

    • 0

相关问题