子元素可以以百分比继承父元素的高度

原文章：https://www.jianshu.com/p/f654bcbc8cbd

要做个组件，不给它设置固定宽高，别人用的时候，设置宽高，然后内部以百分比的形式渲染；

之前一直使用的是宽度百分比继承，对于高度继承没怎么使用，本来自己写了个固定高度，但考虑后期修改高度的话，这样太麻烦了，还要把组件里面的高度全都改了；

今天测试了一下，高度也是可以以百分比继承的，测试如下：

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 举栗如下:

• 效果如图：

   

  

作者：_信仰zmh
链接：https://www.jianshu.com/p/f654bcbc8cbd
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。