css clac計算プロパティ
calc()は、数学演算の単純な加算(+)、減算(-)、乗算(*)、および除算(/)を使用して問題を解決できます.
また、px、em、rem、パーセンテージなどの単位に基づいて計算を変換することもできる.
簡単な例:
childの高さは属性を計算して算出したものです.
また、px、em、rem、パーセンテージなどの単位に基づいて計算を変換することもできる.
簡単な例:
childの高さは属性を計算して算出したものです.
/span>html>
lang="zh">
charset="UTF-8">
http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
name="viewport" content="width=device-width, initial-scale=1.0">
</span>calc <span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"><style>
</span><span style="color:#e8bf6a;"> </span>.<span style="color:#e8bf6a;">box</span>{
<span style="color:#bababa;">height</span>:<span style="color:#6897bb;">500</span><span style="color:#a5c261;">px</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span><span style="color:#bababa;">width</span>:<span style="color:#6897bb;">500</span><span style="color:#a5c261;">px</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span><span style="color:#bababa;">border</span>:<span style="color:#6897bb;">1</span><span style="color:#a5c261;">px solid </span><span style="color:#6897bb;">#e1b700</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span>}
.<span style="color:#e8bf6a;">content</span>{
<span style="color:#bababa;">height</span>:<span style="color:#6897bb;">100</span><span style="color:#a5c261;">px</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span><span style="color:#bababa;">width</span>:<span style="color:#6897bb;">500</span><span style="color:#a5c261;">px</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span><span style="color:#bababa;">background</span>: <span style="color:#6897bb;">#f56868</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span>}
.<span style="color:#e8bf6a;">child</span>{
<span style="color:#bababa;">height</span>:<span style="color:#e8bf6a;">calc</span>(<span style="color:#6897bb;">500</span><span style="color:#a5c261;">px </span>- <span style="color:#6897bb;">100</span><span style="color:#a5c261;">px</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span><span style="color:#bababa;">background</span>: <span style="color:#6897bb;">#1d7db1</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span>}
<span style="color:#e8bf6a;"></style>
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"> <div><span style="color:#bababa;">class=</span><span style="color:#a5c261;">"box"</span><span style="color:#e8bf6a;">>
</span><span style="color:#e8bf6a;"> <div><span style="color:#bababa;">class=</span><span style="color:#a5c261;">"content"</span><span style="color:#e8bf6a;">></span></div>
</span><span style="color:#e8bf6a;"> <div><span style="color:#bababa;">class=</span><span style="color:#a5c261;">"child"</span><span style="color:#e8bf6a;">></span></div>
</span><span style="color:#e8bf6a;"> </span></div>
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"/></span></span></span></span></span></code></pre>
<br/>
</div>
</div>
</div>
</div>