极客观点
项目管理
HarmonyOS
根据css视觉格式化模型描述,
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含块的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
background-color: #01c1ff;
width: 400px;
height: 400px;
margin: auto;
}
.child {
height: 200px;
margin-left: 150px;
width: 200px;
margin-right: 150px;
background-color: #ff01c1;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>在上面的代码中,包含块宽度为400px,而child的margin-left + width + margin-right = 500px,超过了包含块的宽度,根据css规范中的描述,margin-right设置的150px应该会被忽视,变成50px使上述等式成立,但是在浏览器中查看,child的margin-right仍然为150px,并没有符合规范
按照规范,margin-right应该变为50px
OP你的理解会有一点问题，
margin值并不会被改变，提到的宽度是width ofcontaining block ，并不是当前元素的宽度如果按照OP你的例子，其实需要把外部的
.parent元素width属性调整为fit-content那么你就能够从.parent元素上看到对应 包含块 的宽度。如果你给外部容器设置了固定的
width，那么在meathill提到的 box-sizing 的基础上会做 overflow 。如果说
margin值会被改变的，一般都是在BFC的场景中 👉 理解margin塌陷和margin合并及其解决方案