今天搞一搞box-sizing?

讲到box-sizing,首先你要知道什么是css的盒子模型!
盒子模型有两种分别是IE的border-box和w3c的content-box.

看了图可能你就已经明白了,不过还要继续,简单来讲:

标准 w3c 盒子模型的范围包括 margin、border、padding、content，而且 content 部分不包含其余部分,border-box则是content包含content,padding,border

W3C的标准Box Model:

/*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*内盒尺寸计算（元素大小）*/
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）

IE)传统下Box Model（IE6如下，不含IE6版本或“QuirksMode下IE5.5+”）:

/*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content Height + margin (Height包含了元素内容宽度，边框宽度，内距宽度)
  Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
  /*内盒尺寸计算（元素大小）*/
  Element Height = content Height(Height包含了元素内容宽度，边框宽度，内距宽度)
  Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)

到这基本上你就可以明明白白的了吧?

想想你再布局的时候有没有遇到过由于paddingborder致使多列布局打乱了的状况,明明是想要每行四个元素,可是第四个就是被挤了下去的状况.

好比三栏布局来说:

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
    div {
        height: 700px;
        float: left;
    }
    div.left {
        width: 25%;
        background: red;
    }
    div.cent {
        width: 50%;
        box-sizing: border-box;
        /* 如今整个元素,包括填充在内,占页面总宽度的50%,全部元素的组合宽度为100%*/
        background: yellow;
        padding: 0 20px;
        /*加了这个会使盒子内容溢出 可是box-sizing很好的自适应了*/
    }
    div.right {
        width: 25%;
        background: blue;
    }

或者是ul-li结构,每行展现四个元素等等状况的布局,巧妙的运用能够让代码更加精简和优美.

最后浏览器的兼容性:ie9+,火狐加前缀-moz-,低版本ios和android加-webkit-