css中盒模型有哪些

标准盒模型（w3c盒模型）

在标准盒模型中，元素的width和height只包括内容区域，不包括内边距、边框、外边距。也就是元素的实际宽高是内容区域加上内边距、边框、外边距。

例如：一个元素的宽度设置为100px，内边距为10px，边框为5px，那么该元素的实际宽度将是130px（100 + 10*2 + 5*2）

怪异盒模型（IE盒模型）

怪异盒模型与标准盒模型不同，它的width和height属性不仅包括内容区域，还包括内边距和边框，但不包括外边距。这意味着，如果你设置了相同的width和height，在怪异盒模型中，内容区域会比在标准盒模型中小，因为内边距和边框也被包含在内。在怪异模式下，一个块的总宽度等于width加上margin（左右），其中width已经包含了padding和border值。