W3C盒模型和IE盒模型的区别

盒模型结构

从里到外：content → padding → border → margin

box-sizing

box-sizing属性可以切换盒模型模式，默认值是content-box，可选择有border-box、inherit。

content-box：w3c标准盒模型

border-box：IE盒模型

inherit：从父元素集成box-sizing属性的值

标准盒模型（W3C）

• 元素的width、height只包含content，不包含padding和border值
  

• 盒子实际大小取决于width+padding+border

<div className={styles.parent}>
      <div className={styles.son}>son</div>
      <div className={styles.son}>son</div>
</div>

<style type="text/css">
 .parent{
     background-color: pink;
     height: 200px;
     width: 200px;
     padding: 10px;
     box-sizing: content-box;
}
.son{
     background-color: red;
     float:left;
     width: 100px;
     height: 100px;
}
</style>

因为box-sizing: content-box只包含content，所以可以放下width为200的内容，但是盒子的实际宽度也被撑大了

IE盒模型

• 元素的width、height不仅包括Content，还包括padding和border值 
•  盒子实际的大小取决于width

<div className={styles.parent}>
      <div className={styles.son}>son</div>
      <div className={styles.son}>son</div>
</div>

<style type="text/css">
 .parent{
     background-color: pink;
     height: 200px;
     width: 200px;
     padding: 10px;
     box-sizing: border-box;   // ie盒模型
}
.son{
     background-color: red;
     float:left;
     width: 100px;
     height: 100px;
}
</style>

因为box-sizing: border-box包含content、padding和border，此时content = 200 - padding * 2，所以放不下width为200的内容

开发过程中的问题

在标准盒模型中，如果你遇到边框超出1px的问题，可以用box-sizing属性，设为border-box，转为IE盒模型，这时候盒子的实际宽度为border+padding+content，也相当于把content被挤压了1px，从而盒子的实际宽度不会超出去。