html - HTML/CSS 如何确定大小？

Question

我无法理解 HTML/CSS 大小计算算法 的工作原理。实际上我找不到任何可用的描述。 有吗？

我试图缩小我当前的问题并最终得到这样的结果。制作一个 200x50 的 div 并放入一个 2x2 的表格。

/* just to see it */
body {background-color: yellow;}
table {background-color: #FFF;}
input {background-color: #EEE;}

/* the only sizes given absolutely */
#demo {width: 200px; height: 50px;}

/* make all components fill their parent */
/* I know that using * is bad! */
#demo * {width: 100%; height: 100%;}

/* no extras */
#demo * {padding: 0px; margin: 0px; border: 0px;}
#demo table {border-collapse: collapse; border-spacing: 0px;}

现在谜题开始了，因为单元格的相对高度似乎是相对于表格而不是行，是真的吗？

#demo tr, #demo td {height: 50%;}
#demo td {width: 50%;}

现在我设置一些颜色并尝试在输入上使用 margin。好消息是没有不兼容性。在我试过的所有浏览器中输出都很糟糕:

• 列不是 50%。也不是行。实际上没有什么是 50%。
• 表格比其包含的div大。
• 它更高但不更宽，为什么？

即使没有表格，也会发生这样的事情。我只是将一个漂亮的无害组件移到其他地方，然后一切都结束了。 这是怎么回事？

The full example

我把size定义为fixed的时候我能看懂，但是我没有看懂。天真地将宽度更改为 40%(以便留出一些可用空间)也无济于事。我想这个问题与将所有东西紧紧地打包有关，我实际上并不需要(像 0cm plus 1fil 或 grow 就可以了。

Answer 1

我不认为我会永远理解这个****，但是

• margin collapsing 解释了水平和垂直行为之间的差异.
• 可以通过 box-sizing: border-box 实现更明智的行为