我根据ppt上代码写的,你自己实验就会明白
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width: 150px; height: 200px; margin: 100px; background-color: blue; border: 1px solid black;">
<span style="padding: 50%; background-color: yellow;">
内容有若干字
</span>
</div>
</body>
</html>
你如果对div 设置一个padding-top:'当前div的一半'px;的话你会发现,的确出来个正方形
padding设置成25%的时候显示的是一个长方形;因为块级元素默认撑满一行,而高度是padding撑起来的,上下加起来总共只有50%;所以只有宽的一半