css: padding百分比详解

最新推荐文章于 2024-05-10 09:57:10 发布

AndreaH

最新推荐文章于 2024-05-10 09:57:10 发布

阅读量1.1w

点赞数 2

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

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

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天来介绍一个我们经常用到的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的兼容性如下：

由图可看出vw的支持情况。PC端的话，IE支持还不是特别好，其他都还OK。移动端的话，android和iOS，基本没有问题，android 4.4和iOS8以上都支持了。

padding百分比的使用场景

对于PC端来说，我们可以随意设置图片的宽高，但是在移动端，随着各手持设备屏幕的宽度的不同，我们没有办法给满屏图片设置固定宽高，这时候padding就很有作用了。我们可以给图片设置固定的宽高比，也可以给图片外层加一个固定宽高比的盒子，来达到图片的自适应。

AndreaH

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
css: padding百分比详解

今天来介绍一个我们经常用到的css属性padding。但是它有一个我们不常使用的值，那就是百分比！padding百分比特点：padding的百分比是相对于父元素宽度，如果父元素有宽度，相对于父元素宽度，如果没有，找其父辈元素的宽度，均没设宽度时，相对于屏幕的宽度。1、padding的所有值相对于屏幕宽度<body> <div class="padding...
复制链接

扫一扫