在前端css定位中經常面對的乙個問題是，百分比定位究竟是針對於誰定位？
一、margin，padding的百分比
首先從css的設計意圖說起，在瀏覽器預設的writing-mode: horizontal-tb;和direction: ltr;的情況下，因為css的基礎需求是排版，而通常我們所見的橫排文字，其水平寬度一定（仔細回想一下，如果沒有顯式的定義寬度或者強制一行顯示，都會遇到邊界換行，而不是水平延展），垂直方向可以無限延展。這也是為什麼：
1.margin: auto;無法在縱向上垂直居中，其實原因也是上面所說的，因為縱向是可以無限延展的，所以沒有乙個一定的值可以被參照被用來計算。
2.margin(包括margin-top,margin-bottom,margin-left,margin-right)：使用百分比時都是相對于父元素的寬度定位；
3.padding(包括padding-top,padding-left,padding-bottom,padding-right):使用百分比時也都是相對于父元素的寬度定位。
二、歸納如下：
相對于父元素寬度的，（如果自身已經是最外層元素，則相對於視口）
[max/min-]width、left、right、padding（包括padding-top,padding-bottom）、margin(包括margin-top,margin-bottom) 等；
相對于父元素高度的：（如果自身已經是最外層元素，則相對於視口）
[max/min-]height、top、bottom 等；
其中，關於height百分比定位的乙個冷知識是：若某元素的父元素沒有確定高度，則無法有效使用height=xx%的樣式。除非該元素已經是最外層元素，此時是相對於視口。
詳情可參見：
相對於繼承字型大小的：
font-size 等；
相對於自身字型大小的：
line-height 等；
相對於自身寬高的：
border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等；
特殊演算法的：
background-position（方向長度 / 該方向除背景圖之外部分總長度 * 100）、
filter 系列函式等；
如果自身設定 position: absolute，相對於離它最近的那個 position 不為 static 的祖先元素，如果沒有這樣的元素，則相對於視口。
如果 position: fixed，「父元素」指視口。
css百分比定位和百分比尺寸
只有設定了定位的 relative,absolute,fixed 的元素才有left,top等屬性。子元素relative定位 百分比定位和百分比尺寸都是相對于父元素，無論父元素有沒有定位 子元素absolute定位 百分比定位和百分比尺寸都是相對於最近的定位了的祖先元素，如果沒有則相對於視窗。可以...
CSS百分比布局
曾經的 布局可能大家都有點陌生了吧，其實我也是基本上沒用過，自從web2.0的興起，重構的思想，這讓 布局就這樣消失了基本上，布局中有用到百分比布局的，在 布局 落下帷幕之後，基本上我們都是讓網頁固定為950 1000px，如果布局使用了百分比寬度 如90 耳邊很快就能聽到抱怨 我的顯示器上效果不太...
CSS筆記 margin（塌陷 百分比 定位）
note margin的top和bottom屬性對非替換內聯元素無效，例如和。一 margin塌陷 collapsing 定義 塊級元素的上外邊距和下外邊距有時會合併 或摺疊 為乙個外邊距，如果都為負，取最小值 如果都為正，取最大值 如果一正一負，取和。注意 浮動元素 和 絕對定位 元素的外邊距不會...