细说 CSS3 Box-sizing

CSS的盒模型（Box model）是CSS运用中比较重要的一个属性，Box-sizing是CSS3的Box属性之一，它遵循CSS的Box model原理，CSS中Box model是分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，如下：

1）W3C
W3C定义的盒子模型包括margin、border、padding、content ，元素的width=content的宽度 height=content的高度

2) IE
width=content-width+padding+border
height=content-height+padding+border
IE6以下版本浏览器的宽度包含了元素的padding,border值，换句话来说在IE6以下版本其内容真正的宽度是(width-padding-boder)

---

box-sizing ： content-box || border-box || inherit

区别示图如下：

box-sizing用在什么场景？

1）布局时

<div id="parent-box">
    <div id="left">div>
    <div id="left2> 

#parent-box{
    width:900px;    
}
 #left {
    width: 220px;
    float: left; 
  }
  #left2{
    width: 680px;
    float: left; 
  }

此时父级元素里面有两个子级元素。每个宽度加起来正好是父级的宽度900px; 此时布局没有问题。当我在我的任何一个子级上面添加border时，那怕是1px。两个并排元素就会折行 border:1px solid red;

此时如何用box-sizing来修复这个撑破的布局，box-sizing是取了其默认值content-box，其Box Model完全符合W3C的标准，为了修复这样的布局，我们需要把Box Model改用IE传统下的解析，这样一加，我们给他加上下面box-sizing属性：

  .box-sizing {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

记得以前为了处理这样的问题，我们需要改变box的宽度或者在box里面在嵌套一个div，在里面的div中增加padding和border来达到这样的效果。从今天开始，我们不需要那样做了，我们只要通过box-sizing:border-box来改变Box Model回到IE的传统模式下，就可以实现了，只是有一点遗憾的是，我们IE6和IE7不支持，如果为了达到一致的效果，在加上你知道CSS Hack如何写，这样也并不难，你只要让IE6和IE7的宽度改变一下，也能达到效果用*去写即可

2）box-sizing统一form表单风格

form有些input还是支持IE传统下的Box Model标准，比如说【type=”submit”】、【type=”reset”】、button、select等，如果用样式来控制表单元素在各浏览器下的显示效果是很难，如果还要兼容各系统下的效果更是难上加难。除非使用UI去制作。那么今天我们就要来看看用box-sizing如何来让他们达到一致效果：

首先看下在不同浏览器下表单的解析结果如下：

【type=”submit”】、【type=”reset”】、button、【type=”text”】、select、textarea默认情况下都带有2px的border;

2、【type=”submit”】、【type=”reset”】、button默认情况下会有6px的左右padding；height在mac系统下会比在winxp win7系统下少1px,只有16px,（12px的字体时高度为17px）;

3、【type=”text”】默认情况下会有1px的上下padding；WinXP和Win7下高度为15px，Mac系统下为14px

4、【type=”checkbox”】默认情况下会有margin：3px 3px 3px 4px,并且宽/高度默认为13px(IE6，IE7默认大约是15px，Mac系统下只有9px)

5、【type=”radio”】默认情况下会有margin: 3px 3px 0 5px的外边，并且宽/高度默认为13px（IE6,IE7默认大约是15px,Mac系统下只有9px）

6、textarea默认情况带有1px的上下margin；

上面那些常用的form元素只有【type=”text”】和textarea两者是遵循W3C的标准Box Model，而其他几个都是还是遵循IE传统下的Box Model，为了解决这个头痛的问题首先我们要初始化表单如下：

  .submit,
  .reset,
  .button,
  .text,
  .select,
  .textarea,
  .checkbox,
  .radio {
     margin: 0;
     padding: 0;
     border-width: 1px;
   }

现在看结果时虽然margin,border,padding现在都统一了，宽度只有【type=”checkbox”】和【type=”radio”】在不同的系统和浏览器会解析不一样，最明显的上面也说过了，这两个表单元素在IE6和IE7下的宽、高度都是15px,而在Mac系统下是9px,但在WinXP/Win7的Firefox下又是13px，这样给我们在线上的显示效果完全带来了不一样的风格，头痛的是表单元素的高度问题，在Mac系统下各种表单元素的高度都会比Win系列下少1px，这时我们用box-sizing去解决如下：

.submit,
   .reset,
   .button,
   .text,
   .select,
   .textarea,
   .checkbox,
   .radio {
    margin: 0;
    padding: 0;
    border-width: 1px;
    height: 17px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
   }

   .checkbox,
   .radio {
    width: 13px;
    height: 13px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
   }

但此时最大的问题 IE6\7下的不兼容问题需要处理，此时我们写一个CSS hack

.submit,
  .reset,
  .button,
  .text,
  .select,
  .textarea,
  .checkbox,
  .radio {
     margin: 0;
     padding: 0;
     border-width: 1px;
     height: 17px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -o-box-sizing: border-box;
     -ms-box-sizing: border-box;
     box-sizing: border-box;
     /*这里需要减去border的值，如果padding的值不是0还需要减去padding的值，*/
     *height:15px; 
     *width: 15px;
   }

如果你在样式中没有对border进行设置的话，那么表单中除了checkbox和radio外默认都是2px的border,这样一来你的宽度和高度在都要相应的减去4px.

总结：
box-sizing，不管从布局和FORM上还是有一定的用途的。 以后在CSS布局和样上加以至用。肯定能事半功倍