html div百分比计算,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:
第二種：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计算元素百分比大小的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 金山云html文件,金山云安全开放平台
- 下一篇： 全国计算机一级知识题及答案解析,计算机一