了解 CSS 中百分比使用的背景和意义

发布时间：2023-10-26 09:30:11 所属栏目：语言来源：

导读：这篇文章主要介绍了CSS中单位的百分比用法及含义是怎样的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS中单位的百分比用法及含义是怎样的文章都会有所收获，下面我们一起来看看吧

这篇文章主要介绍了CSS中单位的百分比用法及含义是怎样的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS中单位的百分比用法及含义是怎样的文章都会有所收获，下面我们一起来看看吧。

CSS支持多种单位形式，如百分比、px、pt、rem等，百分比和px是常用的单位，随着移动端和响应式的流行，rem、vh、vw也开始普遍使用，这些单位你可能未必知道，想了解？可以戳此文：CSS：7个你可能不认识的单位。

今天在SegmentFault社区碰到了两个关于百分比计算的问题，一个是在translate中使用百分比的时候，是相对于哪个DOM元素的大小计算的；另外一个是在padding、margin等中使用百分比时，百分比又是怎么转为px的呢？

对于第一个，移动距离是根据自身元素的大小来计算的：

[The percentage] refer[s] to the size of the element’s box
具体参考：css3 translate in percent

对于第二个，我认为percentage转px应该是浏览器根据css规定来完成的，但是具体怎么算呢？

Example 1: Margins

Test top
Test right
Test bottom
Test left
得到的offset如下：

temp1.marginTop = 20px * 50% = 10px;
temp2.marginRight = 20px * 25% = 5px;
temp3.marginBottom = 20px * 75% = 15px;
temp4.marginLeft = 20px * 100% = 20px;

然后，我又测试了padding，原以为padding的值会根据应用了该属性的相关元素来计算，但让我惊讶的是，padding也是根据应用该属性的父元素的宽来计算的，跟margin表现一致。

但有一个坑，上面都是对于未定位元素。好奇的我又很好奇，对于非静态定位元素的top, right, bottom, 和left的百分比值又怎么计算呢？

Example 2: Positioned Elements

Test top
Test right
Test bottom
Test left
得到的offset如下：

temp1.top = 100px * 50% = 50px;
temp2.right = 100px * 25% = 25px;
temp3.bottom = 100px * 75% = 75px;
temp4.left = 100px * 100% = 100px;

对于定位元素，这些值也是相对于父元素的，但与非定位元素不同的是，它们是相对于父元素的高而不是宽。

when the parent element does not have a height, then percentage values are processed as auto instead
虽然有点困惑，但只需要记住：对于margin和padding，百分比按照父元素的宽计算，对于定位元素，则按照父元素的高计算。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!