CSS权威指南第三版指出，块级元素的width值（内容区宽度）等于其子元素的元素总宽度（margin-left + border-left + padding-left + width + padding-right + border-right + margin-right）.但是margin-left或者margin-right为自动计算值，而且子元素p的width值大于父元素div的width值时，实际测试的结果与理论不符。以下设计7个测试用例
基础代码
div {
width: 400px;
margin-left: 200px;
border: 3px solid black;
}
p.wide {
margin-left: -20px;
margin-right: 100px;
width: auto;
border: 3px solid gray;
}
</style>
</head>
<body>
<div>
<p class="wide">A paragraph</p>
</div>
</body>
(1) margin-left负值，margin-right正值，width自动计算(超过父元素width)。
p.wide {
margin-left: -20px;
margin-right: 10px;
width: auto;
border: 3px solid gray;
}
根据下图可以得出 div的width=-20 + 3 + 0 + 404 + 0 + 3 + 10 = 400。教材的结论完全正确。
(2) margin-left负值，margin-right负值，width自动计算。
p.wide {
margin-left: -20px;
margin-right: -50px;
width: auto;
border: 3px solid gray;
}
根据下图可以得出 div的width=-20 + 3 + 0 + 464+ 0 + 3 + （-50） = 400。教材的结论完全正确。
(3) margin-left正值，margin-right负值，width自动计算。
p.wide {
margin-left: 20px;
margin-right: -50px;
width: auto;
border: 3px solid gray;
}
根据下图可以得出 div的width=20 + 3 + 0 + 424+ 0 + 3 + （-50） = 400。教材的结论完全正确。
(4) margin-left正值，margin-right自动计算（负值），width超过父元素的width。
p.wide {
margin-left: 20px;
margin-right: auto;
width: 450px;
border: 3px solid gray;
}
根据下图可以得出 div的width=20 + 3 + 0 + 450+ 0 + 3 + （-56） = 420。教材的结论正确?
(5) margin-left负值，margin-right自动计算，width超过元素width。
p.wide {
margin-left: -20px;
margin-right: auto;
width: 450px;
border: 3px solid gray;
}
根据下图可以得出 div的width=-20 + 3 + 0 + 450+ 0 + 3 + （-56） = 380。教材的结论正确？
(6) margin-left自动计算，margin-right正值，width超过元素width。
p.wide {
margin-left: auto;
margin-right: 20px;
width: 450px;
border: 3px solid gray;
}
根据下图可以得出 div的width=0 + 3 + 0 + 450+ 0 + 3 + 20 = 476。教材的结论正确？
(7) margin-left自动计算，margin-right负值，width超过元素width。
p.wide {
margin-left: auto;
margin-right: -20px;
width: 450px;
border: 3px solid gray;
}
根据下图可以得出 div的width=0 + 3 + 0 + 450+ 0 + 3 + (-20) = 436。教材的结论正确？
总结： （4）--（5）margin-right为自动计算时，浏览器似乎不再考虑margin-left的值
(6)--(7)margin-right为自动计算时，无法理解浏览器的行为。
当然1--7的例子都是设计为极端情况，即：子元素p的width大于父元素的width。
如果把子元素p的width值设计为小于父元素div的width值，则1--7的测试结果完全符合理论。
以上的的七个例子在360和google浏览器下测试。由于时间有限。google浏览器的测试截图就不贴了
扫一扫
2404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
