根据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。