标准盒模型和怪异盒模型(8.26)

标准盒模型和怪异盒模型的区别：

无非就是一些很小的差距,光看别人的文章难理解,自己动手一写就会

1.标准盒模型(box-sizing:content-box//默认属性 ):标准盒模型的高度和宽度是和padding和border分开算的,说简单点:比如width设置的100,那他就是100里面什么也不会包含,最后的值就是 width+padding+border=最终宽度(高度)

2.怪异盒模型(box-sizing:border-box):怪异盒模型,直击重点 比如width设置的100,那他就是100里面会包含padding和border的宽度,无论padding和border多大最后盒子的总值还是=100(还是不理解往下看)

.box{
width:100px;
padding:2px;
border:2px;
box-sizing:border-box;//怪异盒模型
}

结果:
怪异盒模型
width:96px;
padding:2px;
border:2px

width+padding+border=100px;

标准盒模型:
width:100px;
padding:2px;
border:2px

width+padding+border=104px;