CSSにおける100%とは何を意味するのか
(wattenberger.com)「状況によって変わります」
「何に対する % ですか？」
- インタラクティブな例で学ぶ
→ Width & Height
→ Top & Left
→ Margins
→ Padding
→ Transform: translate
translateを除けば、親要素に対する %
「状況によって変わります」
「何に対する % ですか？」
→ Width & Height
→ Top & Left
→ Margins
→ Padding
→ Transform: translate
translate を除けば、親要素に対する %
2件のコメント
昔これ、ものすごく混乱したんですが、それでも
vwやvhが出てきてだいぶ楽になりました..笑本文では Parent オブジェクトと説明していますが、実際には Containing Block と言うほうが正しいようです。
ほとんどの場合は Parent で合っていますが、そうではないケースもあるとのことです。
"ほとんどの場合、ある要素の containing block は最も近いブロックレベル祖先のコンテンツ領域ですが、常にそうとは限りません"