html中百分⽐是怎样计算的,css中的百分⽐计算⽅法
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
margin属性值可以为百分比css 中的百分⽐计算⽅法 CSS⽀持多种单位形式，如百分⽐、px、pt、rem等，百分⽐和px是常⽤的单位，随着移动端和响应式的流
⾏，rem、vh、vw也开始普遍使⽤。
今天在SegmentFault社区碰到了两个关于百分⽐计算的问题，⼀个是在translate中使⽤百分⽐的时候，是相对于哪个DOM元素的⼤⼩计算的；另外⼀个是在padding、margin等中使⽤百分⽐时，百分⽐⼜是怎么转为px的呢？
对于第⼀个，移动距离是根据⾃⾝元素的⼤⼩来计算的：
[The percentage] refer[s] to the size of the element's box
例如：在不知道元素的宽度和⾼度的情况下，让元素⽔平垂直居中
创建类名为wrapper的div，并设置其样式
.
wrapper {
padding: 20px;
background:orange;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%); }
对于第⼆个，我认为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如下：

对于定位元素，这些值也是相对于⽗元素的，但与⾮定位元素不同的是，它们是相对于⽗元素的⾼⽽不是宽。
when the parent element does not have a height, then percentage values are processed as auto instead
虽然有点困惑，但只需要记住：对于margin和padding，百分⽐按照⽗元素的宽计算，对于定位元素，则按照⽗元素的⾼计算。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。