css計算元素百分比大小

包含塊定義：

戳這裏客官~

百分比是基於包含塊的寬度來肯定的

第一種：children設置position爲絕對定位，父元素爲relative或者爲absolute、fixed；則children的百分比大小就是基於parent（爲children包含塊）的寬度來計算的，寬度長度啥的。

css:

.parent{
            position: relative;
            width: 400px;
            height: 400px;
        }
        .children{
            position: absolute;
            width: 200px;
            height: 200px;
            background:red;
            padding-top: 20%;
        }

html:

<div class="parent">
    <div class="children"></div>
</div>

第二種：parent的position爲默認的static，children的position設置爲absolute;則children的百分比大小是基於視口的寬度來計算的。children的全部祖先元素的position都是默認的

css:

.parent{
            width: 400px;
            height: 400px;
        }
        .children{
            position: absolute;
            width: 200px;
            height: 200px;
            background:red;
            padding-top: 20%;
        }

html:

<div class="parent">
    <div class="children"></div>
</div>

第三種：設置children的position爲relative，則children的百分比大小是基於其最近的塊容器（至關於塊元素；block、inline-block、list-item、table）的寬度來計算的

css:

.parent{
            width: 400px;
            height: 400px;
        }
        .children{
            position: relative;
            width: 200px;
            height: 200px;
            background:red;
            padding-top: 20%;
        }

html:

<div class="parent">
    <div class="children"></div>
</div>

第四種：若是children的position設置爲fixed；則children的百分比大小是基於視口的寬度來計算的

css:

.parent{
            position:relative;
            width: 400px;
            height: 400px;
        }
        .children{
            position: fixed;
            width: 200px;
            height: 200px;
            background:red;
            padding-top: 20%;
        }

html:

<div class="parent">
    <div class="children"></div>
</div>