cssにおけるcalc関数の動的計算長さ値

613 ワード

cssのcalc関数は数値計算に使用できます.単純なパーセンテージ計算、画素pxの計算、混合計算でも構いませんが、演算子の前後にスペースを1つずつ残してください.そうしないと無効です.以下の計算方法は正しいです.
.circle{
	position:absolute;
	top:calc(50% - 30%);
	left:calc(50% - 30%);
}

.circle{
	position:absolute;
	top:calc(50px - 33px);
	left:calc(50px - 40px);
}

.circle{
	position:absolute;
	top:calc(50% - 33px);
	left:calc(50% - 40px);
}
  • vw:ウィンドウ幅のパーセント(1 vwはウィンドウの幅を1%、100は100%)
  • vh:窓の高さのパーセント
  • vmin:現在のvwおよびvhの小さい値
  • vmax:現在のvwおよびvhの大きな値
  • .circle{
    	position:absolute;
    	top:calc(100vh - 33px);
    	left:calc(100vw - 40px);
    }