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%
}
“`

小白第一次写博，主要讲每次学到的记录下来，请大家多多指教啦

---