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