css 属性百分比基准—块级父元素

概论

总体而言百分比的基准就是父元素的宽度高度，如果父元素有设置具体的宽高，就会以父元素的宽高为基准，没设置具体宽高的话，也就是父级width:auto;height:auto;元素宽会以父元素实际的占用宽为基准，高确不是以父元素的高为基准，此时高不生效。父元素须是块级元素。
如果父元素是inline 元素，则会向上查询最近的块级元素作为基准父元素。

总之

除了height比较奇葩之外，必须父元素明确定义了height才会以父元素height为基准，否则不生效。
其他width padding margin 的百分比都是以父元素的实际盒内宽度为基准，父元素不需要明确设置宽度，设置auto也不影响子元素以父元素为基准。

测试代码

<template>
    <div class="component-name">
        <div class="base-father" style="height: 100px; width: 200px">
            <span>
                <!-- inline 元素不会成为基准,会以最近的块元素，也就是.base-father 为百分比基准-->
                <div style="height: 50%; width: 100%">sdfsd</div>
            </span>
        </div>
        <div style="height: 300px">
            <div style="height: auto; width: auto">
                <div style="width: 400px; height: 200px"></div>
                <!-- 父元素宽高都是auto，元素本身的width还是会以父元素实际占用的宽为基准，但是高百分比确不会生效，因为需要父元素明确定义了高度，才能生效 -->
                <div class="target-test" style="height: 50%; width: 50%; margin-top: 20%; padding-top: 10%">sdfsd</div>
            </div>
        </div>

        <div style="height: 200px">
            <div style="height: 80%">
                <!-- 只要父元素设置了宽度，不是auto，子元素就会以父元素height为基准 -->
                <div style="height: 50%">sd</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
</script>

<style lang="scss" scoped></style>