css3 calc()

19895 ワード

概要

CSS関数calc()は、<length>を必要とする任意の場所で使用することができる.calc()があれば、計算によってオブジェクトの大きさと形状を決定することができます.calc() calc()で

構文

CSS文法を読む方法.

calc(expression)

値

expression
最終的な数式として使用される数式<length> .

式＃シキ＃

この式では、次の演算子を使用して、任意の単純な式を接続できます.
+
加算
-
減算
*
乗算＃ジョウサン＃
/
除法
式中のオペランドは任意の長さの構文を用いることができる.もしよろしければ、1つの式に複数の異なる長さの単位を混用することができます.必要に応じて、カッコを使用して計算順序を調整することもできます.

例

指定した外付け距離を使用してオブジェクトを配置する

calc() .この例では、CSSを使用して、ウィンドウのエッジから40ピクセルの間隔が左右に1つずつあるウィンドウ全体にわたるbannerを作成します.

.banner {   position:absolute;   left: 40px;   width: 90%;                       /* fallback for browsers without support for calc() */   width: -webkit-calc(100% - 80px);  /* WebKit 536.3 (Chrome 19) and above, experimental */   width:         calc(100% - 80px);  /* final CSS3 compliant implementation; Firefox 16 and IE 9, and above */   border: solid black 1px;   box-shadow: 1px 2px;   background-color: yellow;   padding: 6px;   text-align: center; }

<div class="banner">This is a banner!</div>

コンテナのサイズに合わせてフォームフィールドのサイズを自動的に変更

のcalc() は、容器の縁を超える押圧によって、適切な外縁を維持することなく、押圧する.次のCSS:

input {   padding: 2px;   display: block;   width:  98%;                      /* fallback for browsers without support for calc() */   width: -webkit-calc(100% - 1em);  /* WebKit 536.3 (Chrome 19) and above, experimental */   width:         calc(100% - 1em);  /* final CSS3 compliant implementation; IE 9 and above */ }  #formbox {   width:  130px;                 /* fallback for browsers without support for calc() */   width:    -moz-calc(100% / 6);   /* Gecko 2.0 (Firefox 4) and above, experimental, will be dropped */   width: -webkit-calc(100% / 6);   /* WebKit 536.3 (Chrome 19) and above, experimental */   width:         calc(100% / 6);   /* final CSS3 compliant implementation; Firefox 16 and IE 9, and above */   border: 1px solid black;   padding: 4px; }

の例では、form要素自体がウィンドウの利用可能な幅の1/6を使用する、そして、form要素内部のinput要素を適切な大きさに保つために、再びcalc(), 1emを使用した.次のHTMLは上のCSS:

<form>   <div id="formbox">   <label>Type something:</label>   <input type="text">   </div> </form>

を使用しています.

ブラウザの互換性

Desktop
Mobile
Feature
Android
Firefox Mobile (Gecko)
IE Mobile
Opera Mobile
Safari Mobile
Basic support
?
4.0 (2) -moz16.0 (16)
?
?
?
On gradients' color stops
?
19.0 (19)
?
?
?

Desktop Mobile Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit) Basic support 19 (WebKit 536.3) -webkit 4.0 (2) -moz16 (16) 9 - 6 -webkit(buggy) On gradients' color stops 19 (WebKit 536.3) -webkit 19 (19) 9 - 6 -webkit(buggy)