整理於：
相對于父元素的font-size來計算，如果父元素（以及它的祖先元素）未顯式設定font-size值的話，將會以瀏覽器的預設值16px為基準。
基於元素自身的font-size的值來計算。如果元素自身未顯式設定font-size，則會基於元素繼承過來的font-size的值計算。
基於元素自身的line-height值計算。如果元素自身未顯式設定line-height的值，那麼元素會繼承其父元素（或祖先元素）的line-height值。
css的text-indent屬性可以讓乙個塊元素首行文字內容的縮排量。有的時候也會使用該方法實現影象替換文字
它的計算是相對於元素塊width（或height）計算，如果是邏輯屬性的話，相對於inline-size（或block-size）計算。具體相對於width（inline-size）還是height（block-size）取決於css的書寫模式（即受writing-mode和direction）。
相對于父元素的width/height。
相對于父元素的width
元素設定margin-left和margin-right值，而且都同時為正值時，元素自身的空間會被margin-left和margin-right擠壓，當margin-left和margin-right兩個屬性的值之和等元素元素width時，該元素將在檢視中不可見
元素margin-right的值為正值時且大到一定的值（一般容器剩餘空間），那麼將會擠壓元素自身的width
當元素position的取值為relative或absolute時，那麼元素的偏移屬性的%值計算相對於離元素最近的設定了position為非static的元素的width和height。其中top和bottom相對於height計算；left和right相對於width計算。
如果元素的position顯式設定值為sticky，那麼偏移屬性取%值的計算是相對於相關的滾動埠（scrollport）的大小計算
滾動埠（scrollport）是指文件（document）中滾動容器（scroll container）的可視視窗。顯式給元素設定overflow: scroll或overflow: auto（在內容足夠匯出溢位時產生）可以建立滾動容器。
在border-radius使用%值時，它計算的相對值是需要分開來算的，其中 x軸的%值相對於元素的width值計算；y軸的%值相對於元素的height值計算
border-radius計算器-
border-image也是乙個簡寫屬性，它的子屬性有 border-image-source、 border-image-slice、 border-image-width、 border-image-outset 和 border-image-repeat。其中border-image-slice和border-image-width取值也可以是%
相對於border-image-source引入的影象源尺寸進行計算，其中x方向相對於影象的width計算，y方向相對於影象的height計算
background-size的第乙個值是x軸方向，其計算相對於元素的width計算；background-size的第二個值是y軸方向，其計算相對於元素的height計算。
linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()和repeating-conic-gradient()。在這些屬性的運用中也能看到%的身影，其中設定顏色位置可以用%，而且在徑向漸變和錐形漸變的圓心位置也可以使用%
徑向漸變和錐形漸變的圓心位置的%分為x軸和y，其中x軸是相對於元素的width計算，y軸是相對於元素的height計算
object-fit 取none時
x ⇒ (容器寬度 - 寬度) x 百分比值
y ⇒ (容器高度 - 高度) x 百分比值
clip-path: inset( [round ]? )
clip-path: circle( ? [at ]? )
clip-path: ellipse( ? [at ]? )
clip-path: polygon( [,]? [ ]# )
inset()中的和
其中的使用和margin屬性類似，的使用border-radius類似。
中的top和bottom相對於元素的height計算；right和left相對於元素的width計算。
中的%值計算方式和前面介紹的border-radius相同。
circle()中的和：
的%計算是相對於半徑r值計算，circle()的r的計算是相對於參考框（reference box）的width和height來計算，具體的計算公式如下：
即：
r = math.
sqrt
(math.
pow(
800,2)
+ math.
pow(
400,2)
)/ math.
sqrt(2
)=632.4555320336758px
ellipse()中的相比於circle()中的要簡單地多，ellipse()中的半徑分rx和ry，其中rx取%是相對於元素的width計算；ry取%是相對於元素的height計算。對於而言，和circle()中的相同。
offset-distance取值為%值時，它的計算是相對於偏移路徑的長度（也就是偏移路徑的初始位置和結束位置之間的距離）。
offset-position的計算方式可以參考background-position的方式。
offset-anchor取%值時，它的計算是根據運動物體（元素）的width和height來計算，其中x相對於width計算，y相對於height計算。比如我們所說的(50%, 50%)指的就是我們常說的center（或者center center）。
transform中的translatex()和translatey()取%值時，它的計算是相對於元素自身的width和height
CSS百分比單位總結
css中的很多地方都是可以使用百分比單位的，之前一直理所當然的認為百分比就是相對於容器的寬高設定的，後來在自己實現垂直居中的多種寫法時，才意識到這個問題，遂收集資料進行整理。相對於容器的寬度的 相對於content box寬度 width max width min width margin pad...
css百分比定位和百分比尺寸
只有設定了定位的 relative,absolute,fixed 的元素才有left,top等屬性。子元素relative定位 百分比定位和百分比尺寸都是相對于父元素，無論父元素有沒有定位 子元素absolute定位 百分比定位和百分比尺寸都是相對於最近的定位了的祖先元素，如果沒有則相對於視窗。可以...
CSS百分比布局
曾經的 布局可能大家都有點陌生了吧，其實我也是基本上沒用過，自從web2.0的興起，重構的思想，這讓 布局就這樣消失了基本上，布局中有用到百分比布局的，在 布局 落下帷幕之後，基本上我們都是讓網頁固定為950 1000px，如果布局使用了百分比寬度 如90 耳邊很快就能聽到抱怨 我的顯示器上效果不太...