CSSで100％とはどういう意味ですか？

私が最も頻繁に使用するCSSユニットの1つは優れた％です。各属性のパーセンテージのルールは完全に同じではありません。

幅高さ

最も基本的で簡単な例から始めましょう：widthとheight。

.self {
  position: absolute;
  height: 50%;
  width: 40%;
}

私たちは、要素を見ることができますwidthし、height親要素に基づいており、それぞれ、widthとheight。

左/上

これらの値は、親要素widthとにも基づいていheightます。要素leftが50％の場合、親要素の中央に残ります。

.self {
    
    
  position: absolute;
  height: 50%;
  width: 50%;
  margin-top: 0%;
  margin-left: 50%;
}

マージン/パディング

margin 作業は前の例と似ています。親オブジェクトのサイズに基づいています。

ここでpadding-leftはwidth、padding-left値が要素自体よりも大きくない限り、要素自体は変更されないことに注意してくださいwidth。

.self {
  position: absolute;
  height: 50%;
  width: 50%;
  padding-top: 0%;
  padding-left: 50%;
}

変身

このtransform: translateパーセント値は、要素自体widthとに基づいていますheight。

.self {
  position: absolute;
  height: 50%;
  width: 50%;
  top: 0%;
  left: 50%;
  translate-top: 0%;
  translate-left: 50%;
  transform: translate(50%, 0%);
}