关于移动端Box-sizing的基本知识和应用 - Web前端

提到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属性之一

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"><img src="/images/header.jpeg" alt="" /></div> 
<div id="borderBox"><img src="/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 属性 为我们提供的极大的方面，以后在页面的排版中也不会在烦恼页面的错乱问题了