包含塊定義：

百分比是基于包含塊的寬度來確定的

第一種：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:

第二種：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:

第三種：設置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:

第四種：如果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:

總結

以上是生活随笔為你收集整理的html div百分比计算,css计算元素百分比大小的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。