border-box和CSS3 calc()解決盒模型加邊框或邊距後尺寸變大的問題

 

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 */

 

 

CSS3 calc() 會計算的屬性

calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，你可使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。之前咱們可使用box-sizing:border-box;來設置盒子的屬性爲不加上邊距。如今咱們又多了一個選擇了。但要注意，二者只能使用一個哦，不然就會形成衝突了。

calc()能作什麼？

calc()能讓你給元素的作計算，你能夠給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，好比說「width:calc(50% + 2em)」，這樣一來你就不用考慮元素DIV的寬度值究竟是多少，而把這個煩人的任務交由瀏覽器去計算。

calc()語法

calc()語法很是簡單，就像咱們小時候學加 （+）、減（-）、乘（*）、除（/）同樣，使用數學表達式來表示：

.elm { width: calc(expression); /*expression是一個表達式，用來計算長度的表達式。*/ }

calc()使用通用的數學運算規則，可是也提供更智能的功能：

一、使用「+」、「-」、「*」 和 「/」四則運算；

二、可使用百分比、px、em、rem等單位；

三、能夠混合使用各類單位進行計算；

四、表達式中有「+」和「-」時，其先後必需要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；

五、表達式中有「*」和「/」時，其先後能夠沒有空格，但建議留有空格。

兼容性

瀏覽器對calc()的兼容性還算不錯，在IE9+、FF4.0+、Chrome19+、Safari6+都獲得較好支持，一樣須要在其前面加上各瀏覽器 廠商的識別符，不過惋惜的是，移動端的瀏覽器還沒僅有「firefox for android 14.0」支持，其餘的全軍覆沒。

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