Início / coding / Perguntas / 79583530
Accepted
user24948077
Asked: 2025-04-21 00:27:48 +0800 CST

O navegador não está em conformidade com a especificação do modelo de formatação visual?

  • 772

De acordo com a descrição no modelo de formatação visual CSS

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = largura do bloco que o contém

Quando margine widthnão são nenhum dos dois autoe sua soma é maior que a largura do bloco que o contém, margin-rightserão ignorados e o valor será calculado de modo a tornar a igualdade verdadeira

.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>

Neste código, para "child", a largura do bloco que o contém é de 400px e a soma de ++ widthé de 500px. De acordo com a descrição, deve ser definido como 50px para que a equação seja verdadeira.margin-leftmargin-rigthmargin-right

Mas quando verifiquei no navegador, descobri que a margem direita não estava definida como 50px, mas ainda como 150px.

resultado

css

1 respostas

  1. Best Answer

    No fluxo normal :

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

    Quando nenhum desses valores for auto, mas a soma deles exceder a largura do bloco que os contém , algo precisa ceder . De acordo com a especificação CSS2.1 §10.3.3 :

    Se os valores forem excessivamente restritos (ou seja, a soma for maior que a largura do bloco que os contém) e se todos os margin-left, margin-right, e widthforem especificados (ou seja, não auto), então margin-right se tornará auto .

    Esta parte está correta em teoria .

    Mas aqui está o que realmente está acontecendo no seu código

    Você escreveu:

    .child {
  margin-left: 150px;
  width: 200px;
  margin-right: 150px;
}
    • Pai éwidth: 400px
    • Portanto, o espaço horizontal total é de 500px
    • Claramente demais

    Mas, na prática , o navegador não recalculamargin-right para corrigir o problema. Em vez disso, ele simplesmente transborda o filho para além da largura do pai.

    Isso é permitido porque:

    • A criança é um elemento de nível de bloco no fluxo normal
    • Não possui margens automáticas
    • Os navegadores geralmente permitem que os elementos transbordem se você solicitar com margens e larguras fixas

    Portanto, a especificação fornece uma fórmula que pode ser usada para corrigir layouts excessivamente restritos quando um dos valores éauto .

    Mas se nenhuma delas forauto , os navegadores respeitam o que você escreveu , mesmo que isso quebre a caixa.

    Resumindo: se você restringir demais uma caixa com margens e largura fixas, o navegador simplesmente deixará o estouro , a menos que uma das propriedades seja auto, nesse caso ele será recalculado.

    Experimente isto em vez disso:

    Se você quiser que o layout se ajuste conforme a especificação sugere, defina um valor paraauto , por exemplo:

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

    Agora, o navegador calculará margin-right50px para ajustar a equação!

    • 0

relate perguntas