如果一个父元素（比如 body ）使用了百分比来表示宽高，例如 height:100%;width:100%; ，然后子元素（比如 div ）使用固定宽高，再设置百分比外边距，例如 margin-top:100%; ，这个子元素的外边距一定是个错误的值，大家可以试一试。
这种错误在各种前端教程都会提到：“属性百分比的依据是父元素宽高，父元素如果不是用固定的宽高，该属性将会无效”之类的话。
但是，我把这个 Demo 做出来之后，子元素的还是有外边距的，只不过是错误的而已， Chrome 的开发者工具没有显示删除线，外边距也是有的，所以我想深入地问一下：
如果子元素设置了 margin-top:100%，而该元素的所有父元素都设置了百分比的宽高，那么这个显示出来的，错误的外边距的依据究竟是什么？为什么它还能显示出外边距（即便是错误的）？
 |
1
learnshare Dec 30, 2016
我记得大概有两种不同的表现：
1. 子元素的值根据父元素 /或自己的宽度计算； 2. 子元素的值根据父元素 /或自己的高度计算。 没有仔细研究过，待我写写看。 |
|
2
learnshare Dec 30, 2016
应该是这样的：
1. 子元素的宽度（ width: x%;）根据父元素的宽度计算； 2. 子元素的高度（ height: y%;）有两种： 1) 父元素未指定高度（ height: auto;）时，根据内容计算（ auto ）； 2) 父元素已指定高度时，根据父元素的高度计算。 3. 子元素的 margin-(left|right) （ x%;）以及 margin-(top|bottom)（ y%;） 根据自己的宽度计算。 自己写写 demo 验证吧。 |
 |
3
ChefIsAwesome Dec 30, 2016
你得看规范了。很复杂的
|
 |
4
Septembers Dec 30, 2016
计算规则自行阅读规范
至于触发取值无效问题的话看看这个 http://www.zhangxinxu.com/wordpress/2016/09/talking-about-css-infinite-endless-loop/ |
 |
5
jmyz0455 OP @learnshare 我就是写过 Demo 才提出这个问题的，我又重新比划了一下，似乎“父元素未指定高度（ height: auto;）时，根据内容计算（ auto ）； ”不成了立，我一个自身高 200px 的子元素 margin-top:100%; 出了约四百多的像素，父元素设置的是 height:100%;
我晚点找个地方贴 Demo 效果和代码，我以为这个问题很简单就没贴 |
|
6
learnshare Dec 30, 2016
|
 |
7
marsLeo Dec 30, 2016
这个问题也挺复杂的。查了 MDN ，关于 margin-top 的百分比值是跟父元素——宽度有关的：
developer.mozilla.org/zh-CN/docs/Web/CSS/margin DEMO: codepen.io/anon/pen/LbwqyG?editors=1100 |
 |
8
P233 Dec 31, 2016
百分比的 margin 不都是取父层的宽度吗？不论哪个方向。跟父层的高度没有关系。
|
Select Language