如果父元素宽高使用了百分比来表示数值，那么子元素再使用百分比来设置属性的话，百分比判断的依据是什么？

[jmyz0455]

如果一个父元素（比如 body ）使用了百分比来表示宽高，例如 height:100%;width:100%; ，然后子元素（比如 div ）使用固定宽高，再设置百分比外边距，例如 margin-top:100%; ，这个子元素的外边距一定是个错误的值，大家可以试一试。

这种错误在各种前端教程都会提到：“属性百分比的依据是父元素宽高，父元素如果不是用固定的宽高，该属性将会无效”之类的话。

但是，我把这个 Demo 做出来之后，子元素的还是有外边距的，只不过是错误的而已， Chrome 的开发者工具没有显示删除线，外边距也是有的，所以我想深入地问一下：

如果子元素设置了 margin-top:100%，而该元素的所有父元素都设置了百分比的宽高，那么这个显示出来的，错误的外边距的依据究竟是什么？为什么它还能显示出外边距（即便是错误的）？

[learnshare]

我记得大概有两种不同的表现：
1. 子元素的值根据父元素 /或自己的宽度计算；
2. 子元素的值根据父元素 /或自己的高度计算。

没有仔细研究过，待我写写看。

[learnshare]

应该是这样的：
1. 子元素的宽度（ width: x%;）根据父元素的宽度计算；
2. 子元素的高度（ height: y%;）有两种：
1) 父元素未指定高度（ height: auto;）时，根据内容计算（ auto ）；
2) 父元素已指定高度时，根据父元素的高度计算。
3. 子元素的 margin-(left|right) （ x%;）以及 margin-(top|bottom)（ y%;） 根据自己的宽度计算。

自己写写 demo 验证吧。

[ChefIsAwesome]

你得看规范了。很复杂的

[Septembers]

计算规则自行阅读规范

至于触发取值无效问题的话看看这个 http://www.zhangxinxu.com/wordpress/2016/09/talking-about-css-infinite-endless-loop/

[jmyz0455]

@learnshare 我就是写过 Demo 才提出这个问题的，我又重新比划了一下，似乎“父元素未指定高度（ height: auto;）时，根据内容计算（ auto ）； ”不成了立，我一个自身高 200px 的子元素 margin-top:100%; 出了约四百多的像素，父元素设置的是 height:100%;

我晚点找个地方贴 Demo 效果和代码，我以为这个问题很简单就没贴

[learnshare]

@jmyz0455 你要看清楚，我写的三条指的是不同的属性：

1. 子元素的宽度；
2. 子元素的高度；
3. 子元素的 margin 。

你引用的这一条指的是 子元素的高度

[marsLeo]

这个问题也挺复杂的。查了 MDN ，关于 margin-top 的百分比值是跟父元素——宽度有关的：
developer.mozilla.org/zh-CN/docs/Web/CSS/margin

DEMO: codepen.io/anon/pen/LbwqyG?editors=1100

[P233]

百分比的 margin 不都是取父层的宽度吗？不论哪个方向。跟父层的高度没有关系。