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

CSS盒模型是前端开发中非常重要的知识点。其基本概念是每个HTML元素都可以看做是一个盒子，盒子由四个部分组成：内容区、内边距区、边框区和外边距区。这个模型有两种版本：1. W3C标准盒模型 widt...

CSS盒模型是前端开发中非常重要的知识点。其基本概念是每个HTML元素都可以看做是一个盒子，盒子由四个部分组成：内容区、内边距区、边框区和外边距区。这个模型有两种版本：

1. W3C标准盒模型
    width = 内容区宽度
    height = 内容区高度
    盒子总高度 = 内容区高度 + 上下内边距 + 上下边框 + 上下外边距
    盒子总宽度 = 内容区宽度 + 左右内边距 + 左右边框 + 左右外边距

2. IE盒模型
    width = 内容区宽度 + 左右内边距 + 左右边框
    height = 内容区高度 + 上下内边距 + 上下边框
    盒子总宽度 = 内容区宽度 + 左右内边距 + 左右边框 + 左右外边距
    盒子总高度 = 内容区高度 + 上下内边距 + 上下边框 + 上下外边距 

两种盒模型的区别主要在于它们计算盒子总高度和盒子总宽度的方式不同。在W3C标准盒模型中，盒子总高度和盒子总宽度分别由内容区、内边距、边框和外边距共同组成。而在IE盒模型中，盒子总高度和盒子总宽度不包括外边距，其中边框和内边距都会对内容区产生影响。因此，如果使用IE盒模型，我们需要考虑盒子的内边距和边框对内容区的影响。

可以通过CSS的box-sizing属性来确定盒模型应该使用哪种模型。默认情况下，该属性的值为content-box，表示使用W3C标准盒模型。如果将此属性值改为border-box，则使用IE盒模型。值得注意的是，改变盒模型使用的方式会影响元素的大小和位置，因此在前端开发中需要充分考虑使用的场景和风格。