[分享]css两种盒子模型的区别区别

网页设计中，CSS中有两种盒子模型：标准盒子模型和IE盒子模型。两者在盒子大小计算方式上有所不同，分别为内容盒子和内容+边框+内边距盒子。下面我们来一一对比这两种盒子模型的区别。标准盒子模型：boxs...

网页设计中，CSS中有两种盒子模型：标准盒子模型和IE盒子模型。两者在盒子大小计算方式上有所不同，分别为内容盒子和内容+边框+内边距盒子。下面我们来一一对比这两种盒子模型的区别。

标准盒子模型：

box-sizing: content-box; 

标准盒子模型的计算方式是：width的值只包含内容的宽度，不包含边框和内边距。也就是说，如果给一个宽度为400px的div设置了10px的边框和20px的内边距，那么div的实际宽度就是400+20*2+10*2=460px。

IE盒子模型：

box-sizing: border-box; 

IE盒子模型的计算方式是：width的值包含内容、边框和内边距的宽度。也就是说，如果给一个宽度为400px的div设置了10px的边框和20px的内边距，那么div的实际宽度就是400px。

两种盒子模型的区别主要体现在网页尺寸计算上，对于前端开发者而言需要根据实际需求选择合适的盒子模型。如果需要计算宽度时包含边框和内边距，使用IE盒子模型；如果需要计算宽度时只考虑内容宽度，使用标准盒子模型。