移动端为什么要用box-sizing:border-box?

提到Box-sizing，先前的一篇文章也提到过，其实在布局的时候很好用，可以省去很多多余的代码，至于兼容性，目前还只能在移动端应用多，因为它是CSS3的属性。大家看几个例子，应该就一目了然了。

那我想要一个元素100%显示，又必须有一个固定的padding-left或padding-right，还有1px的边框，怎么办？

  combox{
    width:100%;
    padding-left:10px;
    border:1px solid red;
  }

这样编写代码必然导致出现横向滚动条，怎么办？要相信问题就是用来解决的。这时候伟大的css3为我们提供了box-sizing属性，对于这个属性的具体解释不做赘述。让我们看看如何解决上面的问题：

  combox {
    width:100%;
    padding-left:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;/*Firefox*/
    -webkit-box-sizing:border-box;/*Safari*/
    border:1px solid red;
  }

是不是很神奇呢。接下来看下box-sizing的具体属性吧。

box-sizing是CSS3的box属性之一

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

content-box：此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度 /高度（content width/height）即：Element Width/Height = border+padding+content width/height。

border-box：此值让元素维持IE传统的Box Model（IE6以下版本），也就是说元素的宽度/高度等于元素内容的宽度/高度。（从上面Box Model介绍可知，我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width /height-border-padding】）。

inherit：规定应从父元素继承 box-sizing 属性的值。

为了更能形像看出box-sizing中content-box和border-box两者的区别，我们先简单来看一个示例图，如下所示：

其中代码如下：

  <div id="contentBox"\><imgsrc="/images/header.jpeg"alt=""/></div>
  <div id="borderBox"\><imgsrc="/images/header.jpeg"alt=""/></div>

.imgBox img{
    width:140px;
    height:140px;
    padding:20px;
    border:20px solid orange;
    margin:10px;
}
#contentBox img{
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -o-box-sizing: content-box;
  -ms-box-sizing: content-box;
  box-sizing: content-box;
}
#borderBox img{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

从上面的案例中 我们可以很明显的看出content-box和border-box两者的区别，在实际的生产应用中，CSS3 box-sizing 属性 为我们提供的极大的方面，以后在页面的排版中也不会在烦恼页面的错乱问题了