css中的很多地方都是可以使用百分比單位的，之前一直理所當然的認為百分比就是相對於容器的寬高設定的，後來在自己實現垂直居中的多種寫法時，才意識到這個問題，遂收集資料進行整理。相對於容器的寬度的
相對於content-box寬度
width | max-width | min-width | margin | padding | grid-template-columns | grid-auto-columns | column-gap
相對於border-box寬度
left | right
也就是說設定的box-sizing屬性會直接影響到百分比的計算值
(已經在chrome下進行測試)
相對於容器content-box的高度的
相對於content-box高度
height | max-height | min-height | grid-template-rows | grid-auto-rows | row-gap
相對於border-box高度
bottom | top
(已經在chrome下進行測試)
相對於自身寬高的
background-size | broder-radius | transform: translate() | border-image-width | transform-origin相對于父元素的font-size的
font-size
(已經在chrome下進行測試)
相對於自身字型大小的
line-height
(已經在chrome下進行測試)
相對於行高的
vertical-align
(已經在chrome下進行測試)
其他特殊
2. 深入理解line-height與vertical-align
這個line-height為vertical-algin的講解比較深入細緻，有時間自己要研究一下，進行一下總結。
css百分比定位和百分比尺寸
只有設定了定位的 relative,absolute,fixed 的元素才有left,top等屬性。子元素relative定位 百分比定位和百分比尺寸都是相對于父元素，無論父元素有沒有定位 子元素absolute定位 百分比定位和百分比尺寸都是相對於最近的定位了的祖先元素，如果沒有則相對於視窗。可以...
CSS百分比布局
曾經的 布局可能大家都有點陌生了吧，其實我也是基本上沒用過，自從web2.0的興起，重構的思想，這讓 布局就這樣消失了基本上，布局中有用到百分比布局的，在 布局 落下帷幕之後，基本上我們都是讓網頁固定為950 1000px，如果布局使用了百分比寬度 如90 耳邊很快就能聽到抱怨 我的顯示器上效果不太...
CSS中百分比單位計算方式整理
整理於 相對于父元素的font size來計算，如果父元素 以及它的祖先元素 未顯式設定font size值的話，將會以瀏覽器的預設值16px為基準。基於元素自身的font size的值來計算。如果元素自身未顯式設定font size，則會基於元素繼承過來的font size的值計算。基於元素自身的...