前言

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

使用百分比的场合

[ 盒子模型 ]
- 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 的规范中才会提到上面要点的第三点。以上纯属自己的猜测，仅供参考。

margin : auto

垂直方向
- 水平方向的 auto，其计算值取决于可用空间( 剩余空间 )

原文：On the B edge and D edge, the used value depends on the available space.
翻译：如果场景是B和D，那么其 auto 计算值取决于可用空间。

水平方向
根据规范，margin-top: auto; 和 margin-bottom: auto;，其计算值为0

padding : auto ?

auto is not a valid value for padding property

3. border-radius

根据MDN-border-radius的百分比介绍:

横轴上的百分比参考的是元素自身的宽度
纵轴上的百分比参考的是元素自身的高度，负值是无效的

border-radius的百分比参考值是自身的尺寸,于是你可以经常使用百分比来画出一个圆形来:

4. background-position

background-position 这个属性允许你在它的包含块中随意移动背景图片(或者渐变)，默认值是0 0

如果使用百分比，那么百分比的计算应该是这样的，假设一个容器的长宽为400X200，图片是150X150，那么当设置 background-position: 20% 100%

父元素百分比位置和图片百分比位置对应 [ 通过容器位置确定图片位置 ]

(0, 0) => ((400 - 150) * 20%, (200 - 150) * 100%)
也就是移动的结果是(父元素-背景图片)*百分比，这样的设计很符合我们平时排版的思路。

font-size

参照物 => 父元素

line-height

参照物 => 自身 font-size 大小

vertical-align

参照物 => 自身 line-height 大小

bottom、left、right、top

参考的是元素包含块的尺寸

left 和 right
- 参照包含块的宽度
bottom 和 top
- 参照包含块的高度

transform: translate

在水平或者垂直居中的应用场景中，我最常使用的便是这个平移变换了,轻轻松松的-50%就可以让块元素居中,那么这个百分之50%基于的是什么样的参考值呢？答案便是其自身元素的宽度或者高度，这里的宽度和高度是否包含了padding和border呢？

参考的是border-box的尺寸

请注意，当百分比值用于可继承属性时，只有结合参照值计算后的绝对值会被继承，而不是百分比值本身。

Write

css百分比的应用

前言