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％。
该表格为bigger，而不是其中div。
它更高但不宽，为什么？

即使没有桌子也会发生这样的事情。我只是在其他地方移动了一个看起来很好看的无害组件，一切都没了。 这里发生了什么？

The full example

当我将大小定义为固定大小时，我能理解它，但我没有。天真地将宽度改为40％（为了留下一些空闲空间）也无济于事。我认为这个问题与把所有东西紧紧包装起来有关，我实际上并不需要（像0cm plus 1fil或grow这样的东西。

Answer 1

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

水平和垂直行为之间的差异由margin collapsing解释。
通过box-sizing: border-box

HTML / CSS如何确定大小？

1 个答案: