css中涉及到的百分比

最新推荐文章于 2026-05-13 09:47:41 发布

原创最新推荐文章于 2026-05-13 09:47:41 发布 · 3.5k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS

1.css 中某个元素分别设置宽高为百分比形式

元素的宽和高的百分比参考分别是基于父元素的宽和高
示例

<head>
    <meta charset="UTF-8">
    <style>
        .father{
            height: 500px;
            width: 300px;
            background-color: blueviolet;
        }
        .height-width{
         height: 50%;
         background-color: aquamarine;
         width: 50%;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="height-width">
        </div>
    </div>
</body>

在这里插入图片描述

2.css中设置元素的margin为百分比的形式

设置元素的margin为百分比的时候，参考目标是父元素的宽度
示例：

<style>
        .father{
            height: 500px;
            width: 300px;
            background-color: blueviolet;
            overflow: hidden;

        }
        .son{
         height: 50%;
         background-color: aquamarine;
         width: 50%;
         margin-top: 50%;
         margin-left: 50%;
        }
</style>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>

在这里插入图片描述

3.css中设置元素的padding 为百分比的形式

元素的padding值的百分比参考是基于父元素的宽度来的
示例

<style>
    .father{
       background-color: blue;
       width: 300px;
       height: 500px;
       overflow: hidden;
    }
    .son{
        background-color: palegoldenrod;
        padding: 10%;
        width: 100px;
        height: 200px;
        border: 1px solid black;
    }
</style>
<div class="father">
    <div class="son">nixx</div>
</div>

在这里插入图片描述

4.css中设置元素字体大小为百分比的形式

字体大小的百分比同样是基于父元素的字体大小来确定的
示例：

<head>
    <style>
        .father{
          font-size: 90px;
        }
        .son{
            font-size: 20%;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">nixx</div>
    </div>
</body>

在这里插入图片描述

<head>
    <style>
        body{
            font-size: 100px;
        }
        .son{
            font-size: 20%;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">nixx</div>
    </div>
</body>

由于字体大小是可以继承的，所以如果父元素没有设置，就会以继承来的字体大小为依据

在这里插入图片描述

5.css中设置某个背景图片为百分比的形式

设置background-size值的宽,高是基于当前元素的宽和高
示例：

<style>
    .father{
        width: 200px;
        height: 300px;
    }
    .son{
        background-image: url(./1.png);
        background-repeat: no-repeat;
        background-size: 50% 50%;
        height: 300px;
    }
</style>

<div class="father">
    <div class="son"></div>
</div>

在这里插入图片描述

6.css中设置元素的border-radius为百分比的形式

border-radius设置的百分比是基于当前元素的宽和高（需要注意的是当设置border-radius 的值 >= 50% 所呈现的效果是一样的
示例：

当宽高相等时

<style>
    .fahter{
      background-color: mediumturquoise;
      width: 200px;
      height: 300px;
    }
    .son{
        background-color: pink;
        border-radius: 50%;
        width: 100px;
        height: 100px;
    }
</style>

<div class="fahter">
    <div class="son"></div>
</div>

在这里插入图片描述

当宽高不等时

<style>
    .fahter{
      background-color: mediumturquoise;
      width: 200px;
      height: 300px;
    }
    .son{
        background-color: pink;
        border-radius: 50%;
        width: 100px;
        height: 200px;
    }
</style>

<div class="fahter">
    <div class="son"></div>
</div>

在这里插入图片描述

7.css中设置元素的行高为百分比的形式

行高百分比是基于当前元素字体大小（字体大小 * 所设行高的百分比 = 最终所呈现的行高值）
例如如下设置最终的行距是一样的:

.elem{
    line-height: 200%;
    font-size: 16px;
}

.elem{
    line-height: 32px;
    font-size: 16px;
}

8.css中设置元素的left,top为百分比的形式

当元素为fixed定位时,left,top的参考分别时当前视口的宽和高
示例如下：

<style>
    *{
        margin: 0;
    }
   .f{
       background-color: antiquewhite;
       height: 300px;
       width: 200px;
   }
  .son{
      background-color: cornflowerblue;
      position: fixed;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
  }
</style>
<body>
    <div class="f">
        <div class="son">
        </div>
    </div>
</body>

在这里插入图片描述

当定位为absolute定位时，left,top参考的是【从当前元素往外找遇到的第一个定位为非static的元素，若没有这样的元素则以当前视口为参考】的宽和高
示例如下：

<style>
    *{
        margin: 0;
    }
    .f{
        background-color: antiquewhite;
        height: 300px;
        width: 200px;
        position: relative;
    }
    .son{
        background-color: cornflowerblue;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
    }
</style>
<body>
    <div class="f">
        <div class="son">
        </div>
    </div>
</body>

在这里插入图片描述

若为relative定位，则以父元素的宽，高为参考依据
示例

<style>
    *{
        margin: 0;
    }
    .f{
        background-color: antiquewhite;
        height: 300px;
        width: 200px;
    }
    .son{
        background-color: cornflowerblue;
        position: relative;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
    }
</style>
<body>
    <div class="f">
        <div class="son">
        </div>
    </div>
</body>