Carloin

# 什么百分比？

百分比的目标作为参考源是包含元素的块且它不必是直接的父元素,也称包含块。

# width/height

代码

.grandparent {
  position: relative;
  width: 200px;
  height: 200px;
  background: #eaeaea;
}

.parent {
  width: 100px;
  height: 100px;
  background: #aaa;
}

.child {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 25%;
  left: 25%;
  background: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="grandparent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>
1
2
3
4
5

运行效果：

解析：

在上面的例子中，我创建了 3 个嵌套 div，它们是具有以下特征的 3 个正方形

最外面的组元 div 是一个浅灰色，大小为 4x4 父元素 div 的颜色为深灰色，大小为 2x2 以及分配 50% 大小的红色子 div 如果百分比单位以父级为来源，则子级的大小应该是它的 1/2，但上面的不是，子级的大小实际上等于父级，也就是祖父级的 1/2。原因是祖父级 div 是子级 div 的真正包含块，因为子级具有 position: absolute ，对应于在祖父级中设置的 position:relative 。

因此，为了确定哪个是元素的实际包含块，它完全基于元素本身的 position 属性

总结： 当一个元素为其宽度分配一个百分比值时， width 是基于包含块的 width, height 是基于包含块的 height。

# padding

代码

<div class="parent">
  <div class="child"></div>
</div>
1
2
3
.parent {
  background: #eaeaea;
  width: 300px;
  height: 200px;
}

.child {
  display: inline-block;
  background: red;
  padding-top: 50%;
  padding-left: 50%;
}

.parent {
  position: relative;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

运行效果

解析： 在这个例子中：

  • 父 div 的大小为 6x4。

  • 子 div 的大小为 0，但 padding-top 和 padding-left 分别为 50%。

最后的结果是，子元素的大小相当于父级元素 1/2 宽度，也就是一个 3x3 的正方形。

总结： 对于 padding，垂直（padding-top/padding-bottom）或水平（padding-left/padding-right）都是基于包含块的 width 来计算。

# margin

代码

<div class="parent">
  <div class="child"></div>
</div>
1
2
3
.parent {
  background: #eaeaea;
  width: 300px;
  height: 200px;
}

.child {
  display: inline-block;
  background: red;
  width: 50px;
  height: 50px;
  margin-top: 50%;
  margin-left: 50%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

运行效果

解析：

在这个例子中：

  • 父级 div 的大小为 6x4。
  • margin-top 和 margin-left 分别为 50%

其结果是，子元素被定位在离父级元素的上边距和左边距 3 个单位的地方（父级宽度的 1/2）。 总结： margin 的百分比(垂直和水平)也是相对于包含块的宽度来计算。

# top/bottom/left/right

代码

<div class="parent">
  <div class="child"></div>
</div>
1
2
3
.parent {
  position: relative;
  background: #eaeaea;
  width: 300px;
  height: 200px;
}

.child {
  position: absolute;
  background: red;
  width: 16.67%;
  height: 25%;
  top: 50%;
  left: 50%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

运行效果

解析： 在这个事例中：

  • 父级 div 的大小为 6x4
  • 子元素有 position: absolute， top 和 left 分别为 50%

最终结果，子 div 被定位在离父 div 的顶部边缘 2 个单位的位置（父 div 高度的 1/2），并被定位在离父 div 的左侧边缘 3 个单位的位置（父 div 宽度的 1/2）。 总结： 子元素有 position: absolute， top 和 left 分别为 50%

# transform: translate()

代码

<div class="parent">
  <div class="child"></div>
</div>
1
2
3
.parent {
  background: #eaeaea;
  width: 300px;
  height: 200px;
}

.child {
  background: red;
  width: 100px;
  height: 50px;
  transform: translate(50%, 50%);
}
1
2
3
4
5
6
7
8
9
10
11
12

运行效果

解析： 在这个事例中：

  • 父级 div 的大小为 6x4。
  • 子 div 的大小为 2x1，使用 transform: translate(50%， 50%)

最后结果，子 div 被定位在离父 div 的顶部边缘 0.5 个单位的位置（自身高度的 1/2），并被定位在离父 div 的左侧边缘 1 个单位的位置（自身宽度的 1/2）。

总结： 个用于动画/过渡的的属性，支持百分比值。这个属性并不指其包含的块，而是指其自身。

# background-size

代码

<div class="parent">
  <div class="child"></div>
</div>
1
2
3
.parent {
  background: #eaeaea;
  width: 300px;
  height: 200px;
}

.child {
  background-image: url(https://d2fltix0v2e0sb.cloudfront.net/dev-rainbow.png);
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-color: red;
  width: 50%;
  height: 50%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

运行效果

解析： 在这个例子中:

  • 父 div 的大小为 6x4

  • 子 div 的大小为 3x2，没有 padding，没有 border

  • 这里使用了一个 DEV logo(比例为 1:1 )作为子 div 的背景图像，背景大小属性设置为 50% 50%

其结果是，背景图像被拉伸为 1.5 x 1 的大小。 总结： 此属性的百分比值指的是背景定位区域，类似于包含块，但添加了以下 3 个因素：

  • 只有内容的块(content-box)

  • 带有内容和 padding 的块 （padding-box）

  • 带有内容、padding 和 border 的块(border-box)

# background-position

与background-size类似，background-position 属性的百分比也依赖于背景定位区域。

# font-size

代码

<div class="grandparent">
  font-size: 13px
  <div class="parent">
    font-size: 26px
    <div class="child">font-size: 50%</div>
  </div>
</div>
1
2
3
4
5
6
7

解析： 在这个例子中，我使用与第一个例子相同的布局，字体大小分配如下。

  • grandparent 13px
  • parent 26px
  • child 50% 我们可以清楚地看到，child 的字体大小现在与 grandparent 一样，是 parent 的 1/2。

总结： 对于 font-size ，百分比值仅指向它的直接父块。

# 总结

  • 相对于包含块：width/height、padding、margin、top/bottom/left/right、background-size、background-position

  • 相对于自身：transform: translate()

  • 指向它的直接父块：font-size

# 参考

https://mp.weixin.qq.com/s/qOijlt_XCFpycdUPr_TnDA

← 前言 →