javascript - 子元素的margin为负值，就改变继承过来的width值，是什么原理？

问题描述

问 题

<div style="width:700px;overflow:hidden;" class="parent">

<div style="background:yellow;margin-left:-20px;overflow:hidden;" class="son">
    <div style="float:left;width:100px;height:300px;border:1px solid red;"></div>
    <div style="float:left;width:100px;height:300px;border:1px solid pink;"></div>
    <div style="float:left;width:100px;height:300px;border:1px solid black;"></div>
</div>

</div>

以上代码中.parent是父元素，设置了width：700px;子元素.son继承过来的时候，应该是700px,
但是子元素.son设置了margin-top:-20px;之后，.son的width就变成了720px,当子元素.son设置了margin-top：20px;则.son的width就变成了680px？是什么原理

解决方案

因为这是规范的规定啊.
块级元素水平方向格式化有如下规则

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

这条规则, 在水平 margin 取负值的情况下也是适用的.
你算算, .son 的宽度 720 加上 -20, 是不是正好等于 700, 也就是包含块 .parent 的宽度.

详细请看这里:
http://www.ayqy.net/doc/css2-...

这篇关于javascript - 子元素的margin为负值，就改变继承过来的width值，是什么原理？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！