css两种盒子模型

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

1. 标准盒子模型（W3C盒子模型）

   • 组成部分：
     • 内容区（content）：这是盒子模型的核心部分，用于放置文本、图像等实际内容。例如，如果你有一个<div>元素，其中的文字或图片就位于内容区。它的大小可以通过width和height属性来设置。比如，div { width: 200px; height: 100px; }就定义了一个内容区宽度为200像素、高度为100像素的<div>。
     • 内边距（padding）：内边距是内容区和边框之间的空白区域。它可以让内容与边框保持一定的距离，增强内容的可读性和布局的美观性。内边距有四个方向，分别是padding - top（上内边距）、padding - bottom（下内边距）、padding - left（左内边距）和padding - right（右内边距）。例如，div { padding - top: 10px; padding - left: 20px; }会在<div>的内容区上方添加10像素的内边距，左侧添加20像素的内边距。
     • 边框（border）：边框围绕着内边距和内容区，用于定义元素的边界。边框的样式可以通过border - style（如solid实心、dashed虚线等）、border - width（边框宽度）和border - color（边框颜色）来设置。例如，div { border - style: solid; border - width: 2px; border - color: black; }会给<div>添加一个2像素宽的黑色实心边框。
     • 外边距（margin）：外边距是盒子模型最外层的部分，它用于控制元素与相邻元素之间的距离。和内边距一样，外边距也有四个方向，margin - top、margin - bottom、margin - left和margin - right。例如，div { margin - top: 30px; margin - right: 40px; }会在<div>的上方留出30像素的外边距，右侧留出40像素的外边距。
   • 尺寸计算：在标准盒子模型中，元素的总宽度 = 内容区宽度 + 左右内边距 + 左右边框 + 左右外边距；元素的总高度 = 内容区高度 + 上下内边距 + 上下边框 + 上下外边距。例如，一个内容区宽度为100px、左右内边距各为10px、左右边框各为2px、左右外边距各为20px的元素，其总宽度为100 + 10×2+2×2 + 20×2 = 164px。

2. IE盒子模型（怪异盒子模型）

   • 组成部分：它的组成部分名称和标准盒子模型相同，也是包括内容区、内边距、边框和外边距。
   • 尺寸计算：在IE盒子模型中，元素的width和height属性设置的是包括内容区、内边距和边框在内的总宽度和总高度。也就是说，元素的总宽度 = 内容区宽度（包含内边距和边框）+ 左右外边距；元素的总高度 = 内容区高度（包含内边距和边框）+ 上下外边距。例如，当设置div { width: 100px; }时，这个100px已经包含了内容区宽度、内边距和边框的宽度，再加上外边距来确定元素在页面中的实际位置。

在CSS3中，可以通过box - sizing属性来切换这两种盒子模型。box - sizing: content - box;表示使用标准盒子模型，box - sizing: border - box;表示使用IE盒子模型。这使得开发者可以更灵活地控制布局和元素的尺寸。