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

33次阅读

共计 4720 个字符,预计需要花费 12 分钟才能阅读完成。

作者: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-toppadding-left 别离为 50%

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

margin

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

来个事例:

<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-topmargin-left 别离为 50%

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

top/bottom/left/right

topbottom基于蕴含块的 height 来计算,leftright 基于蕴含块的 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: absolutetopleft 别离为 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
  • 带有内容、paddingborder 的块(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 一样,是 parent1/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… 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。


正文完
 0