《CSS权威指南》水平格式化

Question

《CSS权威指南》第七章关于块级元素的水平格式化的讨论中有下面一段话

可是，像是下面这样的情况：

<div class="out">
    <div class="in">
    </div>
</div>

div.out {
    width: 100px;
    height: 100px;
    background: #eee;
}
div.in {
    width: 150px;
    padding: 10px 0 ;
    margin: 10px 0;
    height: 20px;
    background: #333;
}

按照上面的说法，div.out是div.in包含块元素，所以margin-left,margin-right,padding-left,padding-right,width,border-right,border-left加起来应该等于div.out的width，不过如果都显式设置值的话，两者之间并没有这方面的限制啊。

Answer 1

谢邀~

页面水平方向 可不就这几个属性.

怎么理解, 建议了解一下盒模型.

Answer 2

这个...元素的左右margin以及它左右边框宽度。这个还需要什么理解？
比如

<div class=""father>
    <span class="son"></span>
</div>

father的宽度，如果不设置100%或者其他，而是直接auto靠son来撑宽，那么他的宽度不就是son的宽加上son的左右margin再加上son的左右边框吗？这又有什么比理解的？而son的宽度不就是你设置的宽度（如果内部有文字，那就是文字的宽度）加上左右边框，加上左右margin，甚至还有左右padding吗？打开一个页面，F12控制台，你随便审查一个元素，它的盒子模型不就是这样吗：

至于这句"块级元素的父元素几乎都是块级元素"，也算是中肯，因为没有说绝对，在某些情况下不是的，大部分情况下是的，所以没错，块级元素不就是有宽高，独占一行嘛
这个你需要找下css元素盒子模型的文章来看看

Answer 3

子元素宽度 > 父元素宽度，且子元素还设置了padding、margin
会导致内容溢出