要做个组件，不给它设置固定宽高，别人用的时候，设置宽高，然后内部以百分比的形式渲染；
之前一直使用的是宽度百分比继承，对于高度继承没怎么使用，本来自己写了个固定高度，但考虑后期修改高度的话，这样太麻烦了，还要把组件里面的高度全都改了；
今天测试了一下，高度也是可以以百分比继承的，测试如下：
1. html如下，父Div 包含 两个测试 子Div
<div class="parent">
parent
<div class="test1">
test1
</div>
<div class="test2">
test2
</div>
</div>
2. 不同的设置不同的样式
<style>
// 父元素设置固定宽高
.parent {
width: 1000px;
height: 800px;
border: 1px solid #ccc;
margin: 100px auto;
background-color: pink;
}
// 子元素 以百分比 继承父元素宽高
.test1 {
width: 50%;
height: 40%;
margin: 0 auto;
background-color: red;
}
.test2 {
width: 80%;
height: 10%;
background-color: green;
margin: 100px auto;
}
</style>
3. 测试结果如图：
4. 小结：
宽度 可以 以百分比 继承；
高度 也可以 以百分比继承；
需要给 父元素 设置固定宽高，子元素 按比例 继承；
5. 根元素嵌套子元素，子元素在嵌套子元素，根据谁继承？
继承离它最近的父元素；
多个嵌套，被嵌套 的子元素以 其父元素继承的宽高 为基准，进行 二次继承；
- 就是不管几层嵌套，子元素都是以其 最近 的父元素的宽高为 100% 继承；
5.2 举栗如下:
-
效果如图：
