如下图：此时container非inline行内元素时padding:50%表现：
圆角css，css 向内高亮，改变 css样式 left，css图片比例怎么算，css3笑脸插件，怎样导入css图片大小，用html css写的手机网站注意事项
截图来自慕课网大婶授课学习，padding:50%时候正方形的表现！
注：此时container不能直接使用文字图片等元素，不然引起尺寸改变，就不是正方形，所以采用background-img，然后通过position绝对相对定位来书写文字。
同时，padding百分比是基于宽度计算的！
下方是偶写的一个小案例：
圆角css，css 向内高亮，改变 css样式 left，css图片比例怎么算，css3笑脸插件，怎样导入css图片大小，用html css写的手机网站注意事项
<style>
*{margin:0;padding:0}
.box{width:200px;height:300px;border:1pxsolid;margin-top:100px;margin-left:100px;}
.boxdiv{padding:50%;
background-color:#f35;
background-image:url(七仔团/淘客.jpg);
background-size:100%;
}
</style>
<divclass="box">
<div></div>
</div>重点是background-size:100%
二、再来看看当inline+padding：50%，又是如何表现的！
圆角css，css 向内高亮，改变 css样式 left，css图片比例怎么算，css3笑脸插件，怎样导入css图片大小，用html css写的手机网站注意事项
此时，也是正方形，但正方形的位置有所改变，而且大大的改变了，近一半都出现在了父元素高度之外！
<style>
*{margin:0;padding:0}
.box{width:200px;height:300px;border:1pxsolid;margin-top:100px;margin-left:100px;}
.boxspan{padding:50%;
background-color:#f35;
font-size:0;
}
</style>
<divclass="box">
<span></span>
</div>以上就是padding:50%在black以及inline组合时候的表现！