当前位置：首页 > 科技观察

终于弄清楚百分比在CSS中是如何工作的了！

时间：2023-03-20 15:58:53 科技观察

你对百分比在CSS中的工作原理感兴趣吗？你有没有想过为什么它有时会乱七八糟，毫无头绪？反正我有，所以今天分享这篇文章是为了自己加深理解，也希望对大家有所帮助。百分比是多少？作为百分比，显然应该有一个目标作为参考源，通常是父元素。这是正确的，但并不涵盖所有情况。最正确的答案是包含块，包含我们元素的块，它不必是直接父元素。看看下面的例子：代码：

.grandparent{position:relative;宽度：200px；高度：200px；背景：#eaeaea；}.parent{宽度：100px；高度：100px；背景：#aaa；}.child{位置：绝对；宽度：50%；高度：50%；顶部：25%;left:25%;background:red;}在上面的示例中，我创建了3个嵌套div，它们是具有以下特征的3个正方形最外层的组件div是浅灰色，大小为4x4父元素div是深灰色颜色，大小为2x2，红色子div分配了50%的大小。如果百分比单位来源于parent，child应该是它的1/2大小，但是上面不是，child的大小实际上等于parent，也就是祖父母大小的1/2。原因是祖父母div是子div的真正包含块，因为孩子有position:absolute，对应于position:relative在祖父母中设置。因此，要判断哪个是元素的实际包含块，完全是根据元素本身的position属性。但是对于某些属性来说，百分比单位的引用来源既不是父块也不是包含块，而是它本身——自身元素。百分比属性width/height如上例所示，当一个元素的宽度被赋予一个百分比值时，宽度基于包含块的宽度，而高度基于包含块的高度。padding对于填充，垂直（padding-top/padding-bottom）或水平（padding-left/padding-right）是根据包含块的高度计算的。这是一个示例：

.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/pen/powbjEL：父div的大小为6x4。子div的大小为0，但是padding-top和padding-left分别是50%。最后的结果是子元素的大小相当于父元素宽度的1/2，也就是一个3x3的正方形。边距和填充、边距百分比（垂直和水平）也是相对于包含块的宽度计算的。这是一个示例：.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四个定位属性也是根据包含块的宽度来计算的。举个例子：.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子元素的位置为：absolute，top和left最终结果的50%，子div位于距离父div的上边缘2个单位（父div高度的1/2），并且位于距离父div的左边缘3个单位（1/2父div的宽度）。transform:translate()动画/过渡的魔法属性，也支持百分比值。然而，这个属性不是指它包含的块，而是指它自己。让我们举个例子：.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-sizebackground-sizepropertytakespercentagecellsophisticationtoanewlevelbox)blockwithcontentandpadding(padding-box)blockwithcontent,paddingandborder(border-box)这三个值由background-给出来源，详见MDN：https://developer。mozilla.org/zh-CN/docs/Web/CSS/background-origin下面是一个例子：.parent{background:#eaeaea；宽度：300px；高度：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%;}在这个例子中：parentdivsize是6x4childdivsize是3x2,nopadding,noborderHereaDEVlogo(Ratio1:1)作为子div的背景图片，背景尺寸属性设置为50%50%结果，背景图片被拉伸到1.5x1的尺寸。background-position与background-size类似，background-position属性的百分比也取决于背景定位区域。在这个例子中：css.parent{background:#eaeaea;width:300px;height:200px;}.child{background-image：url（https://d2fltix0v2e0sb.cloudfront.net/dev-rainbow.png）；背景大小：50%50%；背景位置：50%50%；背景重复：不重复；背景颜色：red;width:50%;height:50%;}在此示例中，使用与之前相同的图像和布局。当我们改变background-position的值时，我们可以看到一些变化：如果没有值（默认值为00），背景图像将位于左上角。使用background-position:050%时，背景图像位于左中心。使用background-position:50%50%，背景图像位于中心。使用background-position:100%100%，背景图像位于右下角。注意：background-position:050%是以下background-position-x:0background-position-y:50%的缩写显然，此属性的百分比背后有一些计算，而不仅仅是顶部和左侧边缘与孩子的图像距离。从一些研究和测试来看，背景位置属性似乎在产生实际值之前依赖于以下计算。offsetX=(containerwidth-imagewidth)*background-position-xoffsetY=(heightofcontainer-heightofimage)*background-position-y在这种情况下：containeraschilddivimagewidth/heightis背景大小的结果。font-size对于font-size，百分比值仅指其直接父块。让我们举个例子：font-size:13pxfont-size:26pxfont-size:50%在这个例子中，我使用了与第一个例子相同的布局，字体大小分配如下。grandparent13pxparent26pxchild50%我们可以清楚地看到child的字体大小现在和grandparent一样，是parent的1/2。在线地址：https://codepen.io/khangnd/pen/MWoeXMO~~完了，最近一周一直在做项目，一直到2点才睡。本文是断断续续整理的。现在时间是9/20半夜3点，我睡着了，谢谢大家的观看。作者：Khang译者：前端小智来源：dev原文：https://dev.to/khgnd/understanding-css-percentage-44gd

上一篇：黑客滥用GoogleAppsScript绕过CSP窃取信用卡信息

下一篇：放弃传统的用户名和密码登录_0

终于弄清楚百分比在CSS中是如何工作的了！相关文章

最新推荐

猜你喜欢