关于前端:终于搞懂了-CSS-中的百分比是基于什么工作的了

作者：Khang
译者：前端小智
起源：dev
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

大家有没有对 CSS 中的百分比是如何工作的感兴趣？有没有想过，为什么它有时会乌七八糟，没啥脉络？反正我是有，所以明天分享这篇文章，对本人来说是加深了解，同时也心愿对大家有所帮忙。

什么百分比？

作为百分比，显然应该有一个指标作为参考源，这个参考个别是父元素。这是正确的，但并不涵盖所有状况。最正确的答案应该是蕴含块(containing block)，即蕴含咱们元素的块且它不用是间接的父元素。

看看上面的例子：

代码：

<div class="grandparent">  <div class="parent">    <div class="child"></div>  </div></div>

.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;}

在下面的例子中，我创立了 3 个嵌套 div，它们是具备以下特色的3个正方形

最里面的组元 div 是一个浅灰色，大小为 4x4
父元素 div的色彩为深灰色，大小为 2x2
以及调配 50% 大小的红色子 div

如果百分比单位以父级为起源，则子级的大小应该是它的 1/2，但下面的不是，子级的大小实际上等于父级，也就是祖父级的 1/2。起因是祖父级 div 是子级 div 的真正蕴含块，因为子级具备 position: absolute ，对应于在祖父级中设置的 position:relative 。

因而，为了确定哪个是元素的理论蕴含块，它齐全基于元素自身的 position 属性。

然而，对于某些属性，百分比单元的援用源既不是父块也不是蕴含块，而是它自身—— 本身元素。

百分比的属性

width/height

如下面的例子中看到的，当一个元素为其宽度调配一个百分比值时， width 是基于蕴含块的width, height 是基于蕴含块的 height。

padding

对于 padding，垂直（padding-top/padding-bottom）或程度（padding-left/padding-right）都是基于蕴含块的 width 来计算。

来个例子：

<div class="parent">    <div class="child"></div></div>

.parent {  background: #eaeaea;  width: 300px;  height: 200px;}.child {  display: inline-block;  background: red;  padding-top: 50%;  padding-left: 50%;}.parent {  position: relative;}

线上地址：https://codepen.io/khangnd/pe...

在这个例子中：

父 div 的大小为 6x4。
子 div的大小为 0，但 padding-top 和 padding-left 别离为 50%

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

margin

与 padding，margin 的百分比(垂直和程度)也是绝对于蕴含块的宽度来计算。

来个事例：

<div class="parent">  <div class="child"></div></div>

.parent {  background: #eaeaea;  width: 300px;  height: 200px;}.child {  display: inline-block;  background: red;  width: 50px;  height: 50px;  margin-top: 50%;  margin-left: 50%;}

在这个例子中：

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

其后果是，子元素被定位在离父级元素的上边距和右边距3个单位的中央（父级宽度的1/2）。

top/bottom/left/right

top、bottom基于蕴含块的height来计算，left、right 基于蕴含块的width来计算。

来个例子：

<div class="parent">  <div class="child"></div></div>

.parent {  position: relative;  background: #eaeaea;  width: 300px;  height: 200px;}.child {  position: absolute;  background: red;  width: 16.67%;  height: 25%;  top: 50%;  left: 50%;}

在这个事例中：

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

最终后果，子 div 被定位在离父 div 的顶部边缘 2 个单位的地位（父 div 高度的 1/2），并被定位在离父 div 的左侧边缘 3 个单位的地位（父 div 宽度的 1/2）。

transform: translate()

一个用于动画/过渡的不堪设想的属性，它也反对百分比值。然而，这个属性并不指其蕴含的块，而是指其本身。

来个例子：

<div class="parent">  <div class="child"></div></div>

.parent {  background: #eaeaea;  width: 300px;  height: 200px;}.child {  background: red;  width: 100px;  height: 50px;  transform: translate(50%, 50%);}

在这个事例中：

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

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

background-size

background-size 属性将百分比单元的复杂性晋升到一个新的程度

此属性的百分比值指的是背景定位区域，相似于蕴含块，但增加了以下 3 个因素：

只有内容的块(content-box)
带有内容和 padding 的块（padding-box）
带有内容、padding 和 border 的块(border-box)

这三个值是由 background-origin 给出，具体看 MDN :https://developer.mozilla.org...

来个例子：

<div class="parent">  <div class="child"></div></div>

.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%;}

在这个例子中:

父 div 的大小为 6x4
子 div 的大小为 3x2，没有 padding，没有 border
这里应用了一个DEV logo(比例为 1:1 )作为子 div 的背景图像，背景大小属性设置为 50% 50%

其后果是，背景图像被拉伸为 1.5 x 1 的大小。

background-position

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

在这个例子中:

<div class="parent">  <div class="child"></div></div>

css

.parent {  background: #eaeaea;  width: 300px;  height: 200px;}.child {  background-image: url(https://d2fltix0v2e0sb.cloudfront.net/dev-rainbow.png);  background-size: 50% 50%;  background-position: 50% 50%;  background-repeat: no-repeat;  background-color: red;  width: 50%;  height: 50%;}

在本例中，应用了与后面雷同的图像和布局。当咱们扭转background-position的值时，能够看到一些变动：

如果没有任何值(默认值为0 0)，背景图像将位于左上角。
应用 background-position: 0 50%，背景图片被定位在右边两头。
应用 background-position: 50% 50%，背景图片被定位在核心。
应用 background-position: 100% 100%，背景图片被定位在右下方。

留神： background-position: 0 50% 是上面的缩写

background-position-x: 0
background-position-y: 50%

显然，这个属性的百分比背地有一些计算，而不仅仅是图像的顶部和左侧边缘与孩子的间隔。通过一些钻研和测试，仿佛 background-position 属性在产生一个理论值之前依赖于以下计算。

offset X = (容器的宽度-图像的宽度) * background-position-x
offset Y = (容器的高度-图像的高度) * background-position-y

在这种状况下：

容器作为子 div
图像的宽度/高度是 background-size 的后果。

font-size

对于 font-size ，百分比值仅指向它的间接父块。

来个例子：

<div class="grandparent">  font-size: 13px  <div class="parent">    font-size: 26px    <div class="child">font-size: 50%  </div></div>

在这个例子中，我应用与第一个例子雷同的布局，字体大小调配如下。

grandparent 13px
parent 26px
child 50%

咱们能够分明地看到，child 的字体大小当初与 grandparent 一样，是 parent 的1/2。

线上地址：https://codepen.io/khangnd/pe...

~~ 完，最近一个礼拜都在赶我的项目，根本都要2点后能力睡，这篇文章是间断整顿好的，当初工夫是 9/20 深夜3点，睡了，感激大家的观看。

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

原文：https://dev.to/khgnd/understa...

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。