盒子就是容器,是二维平面上,有以下特征

  1. 宽高所划分的域 content-area
  2. 内边距 padding
  3. 边框 boder
  4. 外边距 margin

    w3c 标准盒子模型

    内边距及边框不占据盒子原来的宽高,是外向扩散。
    box-sizing: content-box; 默认
    image.png

    IE6 混杂模式盒模型

    不外向扩散使用,边框内收
    box-sizing: border-box;-moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    image.png