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

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

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

1.标准盒模型(box-sizing:content-box//默认属性 ):

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

//标准盒模型代码展示

.box{
100px;
padding:2px;
border:2px;

}
//宽度:width(100px)+padding(2px)+border(2px)=104px

2.怪异盒模型(box-sizing:border-box):

怪异盒模型,直击重点 比如width设置的100,那他就是100里面会包含padding和border的宽度,无论padding和border多大最后盒子的总值还是=100

//怪异盒模型代码展示

.box{
100px;
padding:2px;
border:2px;
box-sizing:border-box;//怪异盒模型
}
//宽度: width+padding+border=100px//因为width会包含padding和border的宽度