css 中經常會出現百分比單位，搞清它們的基數是件很重要的事情。我查了查 css2.1 標準，在此整理一下：
乘以包含塊的寬度
margin,padding,left,right,text-indent,width,max-width,min-width
乘以包含塊的高度
top,bottom,height,max-height,min-height
對於包含塊（containing block）這個概念，不能簡單理解成就是父元素。分情況而言：如果元素為靜態定位或者相對定位，包含塊一般就是其父元素；但如果元素是絕對定位，包含塊應該是離它最近的position為absolute、relative、或者fixed的祖先元素。對固定定位的元素，它的包含塊是視口（viewport）。具體可以參考 這篇文章。
乘以元素的字型大小
line-height
乘以元素的行高
vertical-align
background-position裡的百分比
background-position分別設定水平方向和垂直方向上的兩個值，如果使用百分比，那麼這個位移會同時應用於元素和影象。例如background-position: 50% 50%會把的（50%, 50%）這一點與元素區域的（50%, 50%）對齊，相當於設定了background-position: center center。同理background-position: 100% 100%相當於background-position: right bottom。如果只設定乙個值，那另乙個值自動設為 50%。
font-size裡的百分比
font-size中的百分比值應該乘以元素繼承的字型大小，也就是父元素的字型大小。
順便理一理其他的字型單位吧，有些雖然不太常用，但可以了解。有兩個相對單位是：
以下都是絕對單位：
如果某個元素設定了百分比的屬性，那麼子元素繼承的是計算後的值。例如：
p那麼p /* 120% of 'font-size' */
line-height: 12px，而不是line-height: 120%。 css百分比定位和百分比尺寸
只有設定了定位的 relative,absolute,fixed 的元素才有left,top等屬性。子元素relative定位 百分比定位和百分比尺寸都是相對于父元素，無論父元素有沒有定位 子元素absolute定位 百分比定位和百分比尺寸都是相對於最近的定位了的祖先元素，如果沒有則相對於視窗。可以...
CSS百分比布局
曾經的 布局可能大家都有點陌生了吧，其實我也是基本上沒用過，自從web2.0的興起，重構的思想，這讓 布局就這樣消失了基本上，布局中有用到百分比布局的，在 布局 落下帷幕之後，基本上我們都是讓網頁固定為950 1000px，如果布局使用了百分比寬度 如90 耳邊很快就能聽到抱怨 我的顯示器上效果不太...
css定位中的百分比
在前端css定位中經常面對的乙個問題是，百分比定位究竟是針對於誰定位？一 margin，padding的百分比 首先從css的設計意圖說起，在瀏覽器預設的writing mode horizontal tb 和direction ltr 的情況下，因為css的基礎需求是排版，而通常我們所見的橫排文字...