css百分比的应用-优快云博客

本文深入探讨CSS中百分比的使用场景与计算规则，包括width、height、margin、padding、border-radius、background-position等属性的百分比计算依据，以及在不同布局下百分比的表现形式。

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

前言

百分比的应用随处可见，在这里做一个小小的总结。

使用百分比的场合

[ 盒子模型 ]
- width、height
[ 文本 ]
- font-size、line-height 、vertical-align
[ 背景 ]
- border-radius、background-position
[ 布局 ]
- bottom、left、right、top
[ 动画 ]
- transform: translate

如果上面列举的所有属性你都能够轻松地说出它们的百分比含义，那么估计这篇文章就不大适合你了。

接下去我们使用JsFiddle上面的demo来逐个说说这些样式的百分比

1. width 和 height

这个最常用也是最简单的了，它们的百分比计算是基于包裹它的父元素的宽和高来计算，比如:

其盒子模型如图所示 :

有一种特殊情况是，父元素没有明确的高度定义 [ 指的是不定义height或者使用min/max-height这种，都属于不明确的高度定义 ]，并且子元素使用百分比并且不是绝对定位，那么这时候的百分比等同于auto。

width : auto

在 CSS3 中，width:auto多种尺寸表现有了专门的属性值进行对应

.example1 {
    width: fill-available;
}
.example2 {
    width: max-content;
}
.example3 {
    width: min-content;
}
.example4 {
    width: fit-content;
}
复制代码

width 的四种表现

充分利用可用空间 [ fill-available ]

块级元素
<div> 、<p>这些元素的宽度默认是100%基于父级容器的
行内元素
<inline-block> 内容超过一行，且宽度大于容器宽度的时候

收缩与包裹 [ fit-content ]

float 、position : absolute
width = 内容宽度
收缩到最小 [ min-content ]
- table-layout = auto、父元素为position : relative且宽度很小，子元素为position : absolute
  [ 大家空间都不够的时候，文字能断的就断，中文是随便断的，英文单词不能断 ]

超出容器限制 [ max-content ]

行内元素
white-space:nowrap

height : auto

height:100% 暗示元素将具有其父容器的100％高度。
height:auto 意味着，该元素将具有灵活的高度，即其高度将取决于其子元素的高度

块级元素
- 子元素 => (块级元素)
  height = .子元素 { height }
- 子元素 => (行内元素)
  由行内元素组成line-box高度撑开
行内元素
line-height与vertical-align

2. margin和padding

这两个属性的百分比就比较有意思了，也是我们经常用错的两个。在CSS盒子模型规范明确提出了其百分比的含义：

The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

padding的解释也是类似。

上面的意思可以总结出三点：

百分比的计算是基于其包含块的宽度
百分比的计算规则适用于 margin 和 padding 的四个方向
如果包含块的宽度取决于该元素，那么百分比的使用结果是未定义的。

这时定有童鞋会疑惑，为什么 CSS 规范的制定者会选择使用包含块的宽度来作为参考值，而不是高度？

其实在上面总结的三点中已经有所涉及的了，在我们平时的样式布局中，元素的高度取决于子元素的高度，如果子元素的 margin 或者 padding 的百分比又依赖于包含块的高度，那么二者互相依赖，就永远无法得到一个稳定的值，陷入了一种死循环，因此也许是基于这个考虑，CSS 的规范中才会提到上面要点的第三点。以上纯属自己的猜测，仅供参考。