传统盒模型和css3盒模型对比

一、传统盒模型

*
   传统盒子模型：宽度=padding+border+width，内容区域即width设定大小不变，总体大小变化
  div{
      width: 200px;
      height: 200px;
      background-color: red;
      margin-top:20px;
  }
.box2,.box3{
       border:25px blue solid;
       padding:25px;
}

如果内边距增大了，整个盒子也是增大的，那么要保持整个盒子不变大的话，就要减小宽读或者高度，即内容区的宽度或者高度

二、css3盒模型

           /*css3盒子模型：content-box：内容盒子；padding-box：内边距盒子；border-box：边框盒子
           设置谁谁不变化
           */

          div{
              width: 200px;
              height: 200px;
              background-color: red;
              margin-top:20px;
          }
        .box2,.box3{
               border:25px blue solid;
               padding:25px;
       /*     设置的放内容区域大小
            外加模式  box-sizing的默认值,如果加边距和边框内容的大小不变即我们一开始设置的width，
            但是总大小变化了，即边框和内边距大了
       */
          box-sizing: content-box;
        }
        .box2{
            /*设置盒子模型中最大盒子大小，如果在家padding内边距时，那么就缩小内容区
            内减模式
            */
            box-sizing: border-box;
        }

/*
  总结：传统盒子内容区不变，总大小变化，css3盒子分内减和外曾，内减内容区变化总大小不变，外曾，

内容区不变，总大小变即内边距和边框变
*/

、

注意：

当盒子设置了宽，没有设置高的时候，并且设置border-box，垂直方向还是以content-box
水平方向以border-box