今天搞一搞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-