要素を配置するときに `calc（）`と `transform 'を使用する

Question

要素を配置するときにプロパティよりもcalc()を使用する理由がありますか、またはその逆の場合、要素のサイズがわかっていますか？例えば

...

.element { 
    bottom: 100%; 
    transform: translateY(-9px); 
} 

が同じ結果を生成します：要素のサイズは知らされていない場合

.element { 
    bottom: calc(100% + 9px); 
} 

、私はtransformを使用する利点を参照してください。しかし、サイズがわかっている場合（上のように）、ちょうど同じように調整するのにcalc()を使うことができます。十分なフェア

は "transformは、2つの行を必要としながらcalc()は、ちょうど1行を使用しています"。しかし、私はすでにtransformを使って他の軸に沿って調整しています（はが初期サイズを知っていないため）translateY()とtranslateX()を実際に組み合わせることができます行数。

「ブラウザのサポートので」

は、我々は両方のソリューションでフルブラウザをサポートしていると仮定します。一つの解決策を示唆している

標準、またはパフォーマンスの状況がありますが、他よりも良いですか？

Answer 1

transformは、単純な翻訳よりもはるかに強力な物事のできるモンスターです。

したがって、それは彼らが固定位置にある場合でも、その子孫のために含むブロックを確立するようないくつかの担保効果を持っています！あなただけの簡単な翻訳をしたいとき

したがって、経験則として、私はtransformを避けるためにお勧めします。私はcalc()、余白などを好む。

Answer 2

変換は、他の変換の影響を受ける可能性があります。これはレンダリングに違いが生じる可能性があります。たとえば、perspective変換を使用していた場合は、その視点の内側でtranslateY()が発生します。したがって、パースペクティブが適用され、次に設定した消失点に従って要素が変形されます。

あなたがcalc()を使用していた場合は、代わりに、要素は関係なく、設定された視点のページ上に配置されるだろう。おそらく微妙な違いですが、そこにはあります。

perspectiveのような3D変換を使用していない場合、またはtranslate()が使用している唯一の変換である場合は、違いはないと思います。