盒模型都是由四个部分组成的,分别是margin、border、padding 和 content。即外边距,边框,内边距,内容。
一;标准盒模型
1. box-sizing: content-box
表示标准盒模型(默认值)
2.标准盒模型在计算宽高的时候只计算 content 内容的宽高,不包含内外边距以及边框的宽高。
3.当标准盒模型的宽高确认时,增加内外边距和边框会撑大原盒子。
二;怪异盒模型
1.box-sizing: border-box
表示IE盒模型(怪异盒模型)
2.怪异盒模型在计算宽高时包含 conntent 内容、padding内边距、border边框的宽高。
3.当怪异盒模型的宽高确认时,给怪异盒模型添加内边距和边框,怪异盒模型的宽高不会改变,而是通过向内压缩,挤压 content 内容的宽高实现。