CALC CSS3の使用()関数は、幅と高さを計算します

何CALC()はい?

短い略語で新しい関数、計算(計算)でCSS3です。動的幅/高さを算出するためには、要素[マージン、境界、パディング、フォントサイズ、等]の各属性値にCalcの()セットを使用することができます。

CALC()構文

CALC構文は、単純な四則演算であります

使用 "+"、 " - "、 "*" と "/" 4つの事業。

  1. パーセンテージは、PX、EM、REM、およびその他の手段を使用することができます。
  2. これは、種々の演算部と混合することができます。
  3. 「+」とにおける発現は、「 - 」は、そのような「widht:CALC(12%+ 5em)」として、前後にスペースを持っている必要があります。この文言は一切スペースエラーではありません。
  4. 「*」と「/」の表現は、それが前と後にはスペースになることはできませんが、スペースを残すことをお勧めします。

ブラウザの互換性:
ブラウザの互換性のCalcは()かなり良いです、IE9 +、FF4.0 +、Chrome19 +で 、Safari6 + より良いサポートされている、また、前に各ブラウザベンダー識別子を追加する必要があります残念ながら、携帯端末のブラウザだけでなく、「Firefoxのアンドロイド14.0のための」サポート。

Calcの()を使用

計算するために使用される主な不確実性は、10pxの距離外と我々はそれを設定する方法この場合の要素の100%の幅をこのような値?あなたが設定されている場合

width: 100%;
margin: 10px;

このボックスがオーバーフローしたこと、そして、どのようにそれを解決するために見ることができますか?あなたはCALC機能を使用することができます

width: 800px;
width: calc(100% - (10 *2)px);
margin: 10px;

小さなパートナー便利な場合は、賞賛の聖歌を与えます!あなたのサポートは私が感謝し、電力、帝国キノコクールを共有し続けるものです!

リリース3元の記事 ウォンの賞賛9 ビュー2706

おすすめ

転載: blog.csdn.net/hdy119yaner/article/details/104858185