• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

padding:50% padding百分比 实现正方形_CSS学习

当前位置：网站建设 > 技术支持

还是分享张鑫旭大神的padding进阶学习，padding：50%的作用！

如下图：此时container非inline行内元素时padding:50%表现：

截图来自慕课网大婶授课学习，padding:50%时候正方形的表现！

注：此时container不能直接使用文字图片等元素，不然引起尺寸改变，就不是正方形，所以采用background-img，然后通过position绝对相对定位来书写文字。

同时，padding百分比是基于宽度计算的！

下方是我写的一个小案例：

<style>
 *{margin: 0;padding: 0}
 .box{width: 200px;height: 300px; border: 1px solid; margin-top: 100px;margin-left: 100px;}
 .box div{padding: 50%;
  background-color: #f35;
  background-image: url(七仔团/淘客.jpg);
  background-size: 100%;
 }
</style>
<div class="box">
 <div></div>
</div>

重点是background-size:100%

二、再来看看当inline+padding：50%，又是如何表现的！

此时，也是正方形，但正方形的位置有所改变，而且大大的改变了，近一半都出现在了父元素高度之外！

<style>

 *{margin: 0;padding: 0}

 .box{width: 200px;height: 300px; border: 1px solid; margin-top: 100px; margin-left: 100px;}

 .box span{padding: 50%;

  background-color: #f35;

  font-size: 0;

 }

</style>

<div class="box">

 <span></span>

</div>

以上就是padding:50% 在black以及inline组合时候的表现！

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。