css: padding百分比详解

最新推荐文章于 2024-09-06 21:32:37 发布

AndreaH

最新推荐文章于 2024-09-06 21:32:37 发布

阅读量1.3w

点赞数 2

分类专栏： css 文章标签： css padding百分比高度为宽度的一半图片宽高自适应

本文链接：https://blog.csdn.net/weboof/article/details/102725419

版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨CSS中百分比padding的特性与应用，包括如何基于屏幕宽度或父元素宽度设置padding，以及其实现元素高度自适应的方法。适用于PC端与移动端的图片自适应布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天来介绍一个我们经常用到的css属性padding。但是它有一个我们不常使用的值，那就是百分比！

padding百分比特点：

padding的百分比是相对于父元素宽度，如果父元素有宽度，相对于父元素宽度，如果没有，找其父辈元素的宽度，均没设宽度时，相对于屏幕的宽度。

1、padding的所有值相对于屏幕宽度

<body>
    <div class="padding-wrap">
      <div class="padding-test">大煞风景啊来得及发来的飞机啊打飞机啊搡地方大煞风景啊来得及发来的飞机啊</div>
    </div>  
</body>

<style>
    .padding-test {
      width: 200px;
      height: 100px;
      padding-top: 25%;
      padding-bottom: 25%;
      border: 1px solid red;
    }
</style>

2、padding的所有值相对于父元素的宽度

.padding-wrap {
   width: 400px;
}
.padding-test {
   width: 200px;
   height: 100px;
   padding-top: 25%;
   padding-bottom: 25%;
   border: 1px solid red;
}

实现元素高度为自身宽度的一半

1、使用padding实现

<!doctype html>
<html>
<head>
  <style type="text/css">
    body {
      margin: 0;
    }
    .inner {
      text-align: center;
      background: blue;
      color: #fff;
      padding: 25% 0;
      height: 0;
    }
  </style>
</head>

<body>
  <div class="inner"> A </div>
</body>

</html>

2、使用vw实现

<!doctype html>
<html>
<head>
  <style type="text/css">
    body {
      margin: 0;
    }
    .inner {
      text-align: center;
      background: blue;
      color: #fff;
      width: 100vw;
      height: 50vw;
    }
  </style>
</head>

<body>
  <div class="inner"></div>
</body>

</html>

vw的兼容性如下：