CSS 百分比 - 绿叶网

在 CSS 中，百分比（%）是一个相对单位，它用于指定元素的大小、位置、边距等相对于其自身、父元素或祖先元素的比例。

CSS 百分比的种类

在 CSS 中，支持百分比作为单位的属性很多，大致可以分为 3 大类。

相对于父元素来计算：比如 width、height、font-size 等的百分比是相对于父元素的相同属性。
相对于当前元素来计算：比如 line-height 的百分比是相对于当前元素 font-size 值。
相对于包含块（祖先元素）来计算：比如 left 或 right 的百分比是相对于包含块的 width。

这里拿 width 属性来说，如果父元素 width 为 100px，子元素 width 为 50%，则表示子元素实际 width 为 50px。如果父元素 font-size 为 30px，子元素 font-size 为 50%，则表示子元素实际 font-size 为 15px。

我们来总结一下 CSS 属性的百分比，如下表所示。

CSS 属性的百分比
属性	百分比
width	相对于父元素的 width 值来计算
height	相对于父元素的 height 值来计算
font-size	相对于父元素的 font-size 值来计算
padding	相对于父元素的 width 值来计算
margin	相对于父元素的 width 值来计算
line-height	相对于当前元素的 font-size 值来计算
vertical-align	相对于当前元素的 line-height 值来计算
left 或 right	相对于包含块的 width 值来计算
top 或 bottom	相对于包含块的 height 值来计算

对于 padding 和 margin 属性的百分比值，无论是水平方向还是垂直方向，都是相对于父元素的 width 来计算的。

例如，如果一个元素的父元素的宽度是 200px，并且该元素的 padding-top 设置为 10%，那么该元素的顶部内边距将是 20px。

CSS 百分比示例

接下来，我们通过一个简单的例子来讲解 CSS 百分比是如何使用的。

示例：CSS 使用百分比单位

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
     <style>
        #father {
            width: 300px;
            height: 200px;
            font-size: 30px;
            background-color: skyblue;
        }
        #son {
            width: 50%;
            height: 50%;
            font-size: 50%;
            background-color: hotpink;
        }
     </style>
</head>
<body>
     <div id="father">
         绿叶网
         <div id="son">绿叶网</div>
     </div>
</body>
</html>

页面效果如下图所示

CSS 使用百分比单位

分析：

width、height、font-size 的百分比是相对于父元素 “相同属性” 的值来计算的，因此子元素最终的 width 值为 200px×50%=100px，height 值为 160px×50%=80px，font-size 值为 30px×50%=15px。

当然了，我们在浏览器控制台也能直观地看出来，如下图所示。

浏览器控制台查看 CSS 百分比结果

CSS 百分比的优缺点

在 CSS 中，百分比（%）的特点是相对性：它的值并不是固定的，而是基于某个参考值（通常是父元素的大小）来计算，因此它具有以下优点：

响应性强 : 百分比会根据 “屏幕尺寸” 或 “父元素大小” 来自动调整，非常适合做响应式网页。例如，width: 50% 可以使得元素宽度始终为父元素的一半。
代码更简洁 : 不需要针对每个屏幕单独写尺寸，减少了大量 CSS 规则，让代码更清爽。
提高维护性 : 如果调整父元素的大小，子元素会自动跟着变化，修改起来更轻松。

百分比单位并不是完美的，它也存在以下缺点。

精度较低 : 百分比单位的精度不如绝对单位（如 px）高，在需要精确布局的场景中可能不适用。
计算复杂 : 在某些情况下，使用百分比单位可能需要进行复杂的计算，例如计算元素的实际大小或位置。

注意: 避免在同一元素上嵌套使用百分比单位，不然可能会导致计算复杂且结果难以预测。

最后，在使用 CSS 百分比单位时，还有以下 2 个非常有用的技巧。

使用混合单位 : 在某些情况下，我们可以使用 calc() 函数来对百分比单位和绝对单位进行计算。例如，可以使用 width: calc(50% + 20px) 来设置元素宽度为其父元素宽度的一半加上 20px。
使用媒体查询 : 我们可以使用 CSS 媒体查询来针对不同的屏幕尺寸，来调整元素的百分比值。例如，在较小的屏幕上将元素宽度设置为 100%，在较大的屏幕上将元素宽度设置为 50%：

@media (max-width: 768px) {
    .element {
        width: 100%;
    }
}

@media (min-width: 769px) {
    .element {
        width: 50%;
    }
}