box-sizing 布局

在CSS中盒模型被分为两种，第一种是W3C的标准模型，第二种是IE怪异盒模型。不同之处在于后者的宽高定义的是可见元素框的尺寸，而不是元素框的内容区尺寸。目前对于浏览器大多数元素都是基于W3C标准的盒模型，但对于表单form中的部分元素还是基于IE的怪异盒模型，如input里的radio、checkbox、button等元素，如果给其设置border和padding它们也只会往元素盒内延伸。

　　在W3C的标准模型下，宽度和高度仅仅包含了内容宽度，除去了边框和内边距两个区域，这样为web设计师处理效果带来了不少麻烦。为了解决这个问题，CSS3新增了一个盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式。
一般盒子的模式有两种：
1. content-box:仅包括content.即设置的width属性值仅为content的值。（box-sizing的默认值）
2. border-box:包括content+padding+border.设置的width的值是content+padding+border的值。

使用场景：当需要两个宽度为50%的div确保并列时，设置box-sizing:border-box;
此时的width:50%;是content+padding+border的宽度。