CSSパーセンテージ単位まとめ

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でテスト済み)

その他の特殊

本文のほとんどの属性のパーセンテージ単位はchromeの下でテストされ、その中で自身の幅より1つ高いものはテストされていません.文の中で間違いがあれば、みんなが指摘して一緒に交流することを歓迎します.
本文は以下の文章1を参考する.質疑応答:cssスタイルの割合は誰に対しても2.line-heightとvertical-alignを深く理解する
このline-heightはvertical-alginの説明に深く細かく、時間があれば自分で研究し、まとめます.