css clac計算プロパティ

5771 ワード

Css calc 計算プロパティ

calc()は、数学演算の単純な加算(+)、減算(-)、乗算(*)、および除算(/)を使用して問題を解決できます.
また、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>

CSSはスタイルシートResetをリセットする.css

Rails 4.0--production環境構成の解決cssまたはjsをロードできません