要做個組件，不給它設置固定寬高，別人用的時候，設置寬高，然后內(nèi)部以百分比的形式渲染；

之前一直使用的是寬度百分比繼承，對于高度繼承沒怎么使用，本來自己寫了個固定高度，但考慮后期修改高度的話，這樣太麻煩了，還要把組件里面的高度全都改了；

今天測試了一下，高度也是可以以百分比繼承的，測試如下：

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. 根元素嵌套子元素，子元素在嵌套子元素，根據(jù)誰繼承？

繼承離它最近的父元素；

多個嵌套，被嵌套 的子元素以 其父元素繼承的寬高 為基準，進行 二次繼承；

• 就是不管幾層嵌套，子元素都是以其 最近 的父元素的寬高為 100% 繼承；

5.2 舉栗如下:

• 效果如圖：