box-sizing的用法

使用box-sizing確定盒子的寬度

css使用的是盒模型，也就是說元素實際的寬度=padding+border+width,只要改變了內邊距或者邊框的寬度，元素的整體寬度都會改變，CSS3中box-sizing爲這一問題提供瞭解決方法

---

box-sizing屬性

• box-sizing的取值 content-box|border-box|inherit
• content-box
  width指的是元素的內容框的寬度，不包括邊框和內邊距
• border-box
  width包括元素內容框的寬度+padding+border
• inherit
  屬性值從父元素那裏繼承

box-sizing的兼容性

幾大瀏覽器都提供支持，但我們依然建議使用時加上前綴

`—.{
 -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
  }`

其他關於瀏覽器佈局的問題

使用百分比佈局　
假設頁面中只有兩個div,且其樣式如下，

body{
padding:0;
}
—.{
 -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
width:50%
}


理論上，頁面上應該是兩個div並排，但實際情況往往並非如此，造成這個結果的原因很可能是瀏覽器計算50%時四捨五入了，導致最後兩個div的寬度加起來超過了父元素的寬度，所以我建議將代碼修改成下面這樣

—.{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:49%
}
“`

小白第一次寫博，主要講每次學到的記錄下來，請大家多多指教啦

---