W3C标准盒子和ie盒子区别

W3C模型中：

　　　　　　CSS中的宽（width）=内容（content）的宽

　　　　　　CSS中的高（height）=内容（content）的高

eg:

<div style="width:50px;height:50px;padding:2px;border:1px solid blue;margin:3px;">
    W3C模型
</div>

则此div的实际大小：

　　　　　　　　div高=height+（padding+border+margin）2=50+(2+1+3)2=62px;

　　　　　　　　div宽=width+（padding+border+margin）2=50+(2+1+3)2=62px; div内容占大小：

　　　　　　　　div高=height=50px;

　　　　　　　　div宽=width=50px;

IE盒子模型：

IE模型中：

　　　　　　CSS中的宽（width）=内容（content）的宽+（border+padding）*2

　　　　　　CSS中的高（height）=内容（content）的高+（border+padding）*2

eg:

 .div2{
          box-sizing: border-box;
}

<div class="div2" style="width:50px;height:50px;padding:2px;border:1px solid blue;margin:3px;">
    ie模型
</div>

则此div的实际大小：

　　　　　　　　div高=height+margin2=50+32=56px;

　　　　　　　　div宽=width+margin2=50+32=62px;

div内容占大小：

　　　　　　　　div高=height-（border+padding）2=50-（1+2）2=44px;

　　　　　　　　div宽=width-（border+padding）2=50-（1+2）2=44px;

盒子模型包含四个部分：内容（content）、内填充（padding）、边框（border）、外边距（margin）；盒子模型又分为两种：IE盒子模型和W3C标准模型，IE的width,height含padding、border、 content部分，W3C的width hieight就是content的width height