<body>
<div style="background-color:red;">
<div style="width:50%;height:50%;background-color:green;"></div>
</div>
</body>
上面父div宽度继承body元素的宽度，子div内容区宽度50%是相对于父div的宽度，但子div内容区高度设为50%却不是相对于父div高度而是相对于自己内容区宽度（当然也可以间接的看做是相对于父div的宽度，因为子div内容区宽度是相对于父div宽度的）
上面这种特性表面上看很别扭，但是我觉得非常有道理
这种规则非常适合子元素比例有要求的场景，比如上面子元素宽高比是2:1，不管父元素宽度多少，这个比例都会得到维持
另外关于与高度相关的属性用百分比来设置的知识可以参考这篇文章：http://www.webhek.com/vertical-percentages-are-relative-to-container-width-not-height/
扫一扫
1989
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
