height相对于容器的height；
padding margin相对于容器的width；
阅读(...) 评论()他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)彻底掌握CSS中的percentage百分比值使用_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
彻底掌握CSS中的percentage百分比值使用
阅读已结束，下载本文需要
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩1页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢CSS中的百分比的使用方法
作者：用户
本文讲的是CSS中的百分比的使用方法，
CSS支持多种单位形式，如百分比、px、pt、rem等，百分比和px是常用的单位，随着移动端和响应式的流行，rem、vh、vw也开始普遍使用，这些单位你可能未必知道，想了解？可以戳此文：CSS：7个你可能不认识的单位。
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
具体参考：3 translate in percent (自备梯子)
对于第二个，我认为percentage转px应该是浏览器根据css规定来完成的，但是具体怎么算呢？
Example 1: Margins
&div style="width: 20px"&
&div id="temp1" style="margin-top: 50%"&Test top&/div&
&div id="temp2" style="margin-right: 25%"&Test right&/div&
&div id="temp3" style="margin-bottom: 75%"&Test bottom&/div&
&div id="temp4" style="margin-left: 100%"&Test left&/div&
得到的offset如下：
temp1.marginTop = 20px * 50% = 10
temp2.marginRight = 20px * 25% = 5
temp3.marginBottom = 20px * 75% = 15
temp4.marginLeft = 20px * 100% = 20
然后，我又测试了padding，原以为padding的值会根据应用了该属性的相关元素来计算，但让我惊讶的是，padding也是根据应用该属性的父元素的宽来计算的，跟margin表现一致。(再插一句：当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的,元素竖向的百分比设定也是相对于容器的宽度，而不是高度。)
但有一个坑，上面都是对于未定位元素。好奇的我又很好奇，对于非静态定位元素的top, right, bottom, 和left的百分比值又怎么计算呢？
Example 2: Positioned Elements
&div style="height: 100 width: 50px"&
&div id="temp1" style="position: top: 50%"&Test top&/div&
&div id="temp2" style="position: right: 25%"&Test right&/div&
&div id="temp3" style="position: bottom: 75%"&Test bottom&/div&
&div id="temp4" style="position: left: 100%"&Test left&/div&
得到的offset如下：
temp1.top = 100px * 50% = 50
temp2.right = 100px * 25% = 25
temp3.bottom = 100px * 75% = 75
temp4.left = 100px * 100% = 100
对于定位元素，这些值也是相对于父元素的，但与非定位元素不同的是，它们是相对于父元素的高而不是宽。
when the parent element does not have a height, then percentage values are processed as auto instead
虽然有点困惑，但只需要记住：对于margin和padding，百分比按照父元素的宽计算，对于定位元素，则按照父元素的高计算。
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索css
animate.css 使用方法、hover.css库使用方法、css使用方法、qt css 使用方法、css的使用方法，以便于您获取更多的相关知识。
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
6款热门基础云产品6个月免费体验；2款产品1年体验;1款产品2年体验
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
IT采购开年惠，百款产品5折起，新购满额再返最高6000！
云栖社区(yq.aliyun.com)为您免费提供相关信息，包括
，所有相关内容均不代表云栖社区的意见！}