CSS中的百分比計(jì)算方法

1、CSS中的百分比計(jì)算方法CS豉持多種單位形式，如百分比、px、pt、rem等，百分比和px是 常用的單位，隨著移動(dòng)端和響應(yīng)式的流行，rem、vh、vw也開(kāi)始普遍 使用。今天在SegmentFault社區(qū)碰到了兩個(gè)關(guān)于百分比計(jì)算的問(wèn)題， 一個(gè)是 在translate中使用百分比的時(shí)候，是相對(duì)于哪個(gè) DOM元素的大小計(jì) 算的；另外一個(gè)是在padding、margin等中使用百分比時(shí)，百分比又 是怎么轉(zhuǎn)為px的呢？對(duì)于第一個(gè)，移動(dòng)距離是根據(jù)自身元素的大小來(lái)計(jì)算的：The percentage refers to the size of the element's box例如：在不知道元素的寬

2、度和高度的情況下，讓元素水平垂直居中 創(chuàng)建類(lèi)名為wrapper的div,并設(shè)置其樣式.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%); 對(duì)于第二個(gè)，我認(rèn)為percentage轉(zhuǎn)px應(yīng)該是瀏覽器根據(jù)css規(guī)定來(lái) 完成的，但是具體

3、怎么算呢？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%&

4、quot;>Test bottom</div><div id="temp4" style="margin-left: 100%">Test left</div></div> 得到的offset如下：temp1.marginTop = 20px * 50% = 10px;temp2.marginRight = 20px * 25% =5px;temp3.marginBottom = 20px * 75% = 15px;temp4.marginLeft = 20px * 100% = 20px;然后，我又

5、測(cè)試了 padding,原以為padding的值會(huì)根據(jù)應(yīng)用了該屬 性的相關(guān)元素來(lái)計(jì)算，但讓我驚訝的是，padding也是根據(jù)應(yīng)用該屬性的父元素的寬來(lái)計(jì)算的，跟 margin表現(xiàn)一致。(再插一句：當(dāng)按百 分比設(shè)定一個(gè)元素的寬度時(shí)，它是相對(duì)于父容器的寬度計(jì)算的，元素豎向的百分比設(shè)定也是相對(duì)于容器的寬度，而不是高度。)但有一個(gè)坑，上面都是對(duì)于未定位元素。好奇的我又很好奇，對(duì)于非 靜態(tài)定位元素的top, right, bottom,和left的百分比值又怎么計(jì)算呢？Example 2: Positioned Elements<div style="height: 100px; widt

6、h: 50px"><div id="temp1" style="position: relative; top: 50%”>Test top</div><div id="temp2" style="position: relative; right: 25%">Test right</div><div id="temp3" style="position: relative; bottom: 75%">Test

7、 bottom</div><div id="temp4" style="position: relative; left: 100%">Test left</div></div> 得到的offset如下：temp1.top = 100px * 50% = 50px;temp2.right = 100px * 25% = 25px;temp3.bottom = 100px * 75% = 75px;temp4.left = 100px * 100% = 100px;對(duì)于定位元素，這些值也是相對(duì)于父元素的，但與非定位元素不同的 是，它們是相對(duì)于父元素的高而不是寬。when the parent element does not have a height, th