传统盒模型和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