css的盒子模型有几种

CSS盒子模型是用于布局和定位网页元素的基本概念。它描述了一个元素在网页中的尺寸、边框、内边距和外边距之间的关系。

每个HTML元素都可以被看作是一个矩形的盒子，其中包含内容、内边距、边框和外边距。CSS盒子模型定义了这些组成部分的尺寸和相互关系。

在CSS中，有两种盒子模型：标准盒子模型和IE盒子模型。

1、标准盒子模型（Standard Box Model）

标准盒子模型是CSS的默认盒子模型。在标准盒子模型中，一个元素的总宽度（width）和总高度（height）由内容区域（content）、内边距（padding）、边框（border）组成。换句话说，元素的宽度和高度不包括内边距和边框。

标准盒子模型的计算公式：

总宽度 = 内容宽度（width） + 左内边距（padding-left） + 右内边距（padding-right） + 左边框宽度（border-left） + 右边框宽度（border-right）总高度 = 内容高度（height） + 上内边距（padding-top） + 下内边距（padding-bottom） + 上边框宽度（border-top） + 下边框宽度（border-bottom）

2、IE盒子模型（IE Box Model）

IE盒子模型是早期Internet Explorer浏览器（IE5及以下版本）采用的盒子模型。在IE盒子模型中，元素的总宽度和总高度包括了内容区域（content）、内边距（padding）和边框（border）。

IE盒子模型的计算公式：

总宽度 = 内容宽度（width） + 左内边距（padding-left） + 右内边距（padding-right） + 左边框宽度（border-left） + 右边框宽度（border-right）总高度 = 内容高度（height） + 上内边距（padding-top） + 下内边距（padding-bottom） + 上边框宽度（border-top） + 下边框宽度（border-bottom）

现在的浏览器中，默认使用的是标准盒子模型。如果你希望使用IE盒子模型，可以通过设置CSS的box-sizing属性为border-box来实现。

.element {  box-sizing: border-box;}

这将使元素采用IE盒子模型，使元素的宽度和高度包括了内边距和边框。