box-sizing

 

box-sizingのCSSプロパティは、デフォルトのCSSボックスモデルを変更するために使用されます。

 
ツールバーの
 
初期値:content-box
適用先:すべてのエレメントの幅または高さ
継承:なし
メディア:visual
指定:as specified
アニメーション:no
規範秩序:独特な曖昧さのない正式な文法定義の順序
構文
 

box-sizing: content-box（    ） | padding-box | border-box

content-box,borderとpaddingはwidth内に計算されません
padding-box,padding計算width内
border-box,borderとpaddingはwidth内に計算されますが、実は変なパターンです~
互換性:
-webkit-box-sizing:    /*chrome safari android*/
-moz-box-sizing:        /*Firefox*/
box-sizing:                /*Standard */
 
 

CSS 3 calc()が計算する属性

calcは英語の単語calculate(計算)の略で、css 3の新しい機能で、calc()を使用して要素のborder、margin、pading、font-size、widthなどの属性に動的値を設定することができます.以前はbox-sizing:border-boxを使用することができました.の双曲線コサインを返します.今、私たちはもう一つの選択をしました.しかし、両者は1つしか使えないので注意してください.そうしないと衝突します.

calc()は何ができますか?

calc()は要素を計算することができます.div要素を与え、パーセント、em、px、rem単位値を使用して幅または高さを計算することができます.例えば、「width:calc(50%+2 em)」は、要素DIVの幅値がどれだけあるかを考慮する必要がなく、この煩わしいタスクをブラウザに渡して計算します.

calc()構文

calc()構文は非常に簡単で、私たちが子供の頃にプラス(+)、マイナス(-)、乗(*)、除算(/)を学んだように、数学式を使って表します.

.elm {
  width: calc(expression); /*expression      ，          。*/ }

calc()は汎用的な数学演算規則を使用しますが、よりスマートな機能も提供します.
1、「+」、「-」、「*」および「/」の4つの演算を使用する.
2、パーセンテージ、px、em、remなどの単位を使用することができる.
3、様々な単位を混合して計算することができる.
4、式に「+」と「-」がある場合、その前後に「widht:calc(12%+5 em)」のようなスペースのない書き方は間違いです.
5、式に「*」と「/」がある場合、前後にスペースがない場合もありますが、スペースを残すことをお勧めします.

互換性

ブラウザはcalc()の互換性に対して悪くなくて、IE 9+、FF 4.0+、Chrome 19+、Safari 6+はいずれも良好なサポートを受けており、同様にその前に各ブラウザメーカーの識別子を付ける必要があるが、残念なことに、モバイル端末のブラウザはまだ「firefox for android 14.0」のサポートしかなく、他の全滅している.

-moz-calc(expression);/*Firefox*/
-webkit-calc(expression);/*chrome safari*/
calc();/*Standard */