css 标准盒模型 content-box（只包含content） 和 IE怪异盒子模型border-box（只包含content + border + padding）

1、标准盒模型中width指的是内容区域content的宽度；

     height指的是内容区域content的高度。（这个元素高度直接就是内容高度）

     标准盒模型下盒子的大小  = content + border + padding + margin

    所以这样记：content-box（只包含content） 定的宽高是多少就是多少 ， 再加上其他的高度

 

content-box的缺点

content-box的最大缺点就是：当你想让两个子容器float:left，宽度各50%，然后给一点padding，最后让子容器并排充满父容器，一切想的挺美好，然而你发现结果并不是这么美好，因为子容器的盒子宽度已经超出了父容器的一半，导致了折行，于是，width就不能50%了，只能是50%再减去padding的像素值。（导致换行了...）  这时候就要用 border-box 直接包含了边框，随便改

 

 

 

2、IE盒子模型（怪异盒模型）中的width指的是内容、边框、内边距总的宽度（content + border + padding）；

      height指的是内容、边框、内边距总的高度    （这个高度包含 content + border + padding）

     

     怪异盒模型下盒子的大小=width（content + border + padding）   + margin

    所以这样记：border-box（只包含content + border + padding） 实际上定的宽度就是（content + border + padding）

    一般我们都是直接选用IE盒子模型来处理元素，并且直接初始化的时候指定 box-sizing

* {
    box-sizing: border-box;  
    margin: 0;
    padding: 0;
}