CSS（div）盒子模型详解

CSS盒子模型是指一个HTML元素所占用的空间，包括元素内容、内边距、边框和外边距四个部分。这个模型可以用来设置元素在页面中的布局和样式。

在CSS盒子模型中，每一个元素都被看作一个矩形的盒子，其中包含了以下部分：

1. 内容(content)：盒子中的内容部分，是我们在HTML中写的文本或图像等。

2. 内边距(padding)：内容与边框之间的距离，用来控制元素内容与边框之间的间隔，可以用padding属性来设置。

3. 边框(border)：内容与外边距之间的距离，用来控制元素边框的样式和宽度，可以用border属性来设置。

4. 外边距(margin)：盒子外部的空白区域，用来控制元素与其他元素之间的距离，可以用margin属性来设置。

盒子模型的标准模式和怪异模式

在标准模式下，元素的宽度可以通过设置width属性来控制，这个宽度是指内容区域的宽度，不包括边框和内边距。如果我们想要计算整个盒子的宽度，那么必须将内容宽度加上边框和内边距的宽度。

在怪异模式下，元素的宽度包括了边框和内边距的宽度，这会影响我们设置元素宽度的计算方式。

box-sizing属性

为了方便调整盒子模型的宽度和高度，CSS3引入了box-sizing属性，可以用来改变盒子模型的计算方式。

box-sizing属性有三个值：

1. content-box：默认值，表示元素的宽度和高度不包括边框和内边距，仅仅包括内容；

2. border-box：表示元素的宽度和高度包括边框和内边距，不包括外边距；

3. padding-box：表示元素的宽度和高度包括边框和内边距，但是不包括外边距。

示例代码：

HTML代码：

<div class="box">这是一个盒子</div>

CSS代码：

.box {
    width: 200px; /* 宽度为200像素 */
    height: 100px; /* 高度为100像素 */
    padding: 20px; /* 内边距为20像素 */
    border: 1px solid #000; /* 边框为1像素实线 */
    margin: 10px; /* 外边距为10像素 */
}

.box2 {
    width: 200px; /* 宽度为200像素 */
    height: 100px; /* 高度为100像素 */
    padding: 20px; /* 内边距为20像素 */
    border: 1px solid #000; /* 边框为1像素实线 */
    margin: 10px; /* 外边距为10像素 */
    box-sizing: border-box; /* 使用border-box模型 */
} 

以上代码中，我们创建了一个名为"box"的div，设置其宽度为200像素，高度为100像素。我们通过padding属性为它设置内边距，通过border属性为它设置边框，通过margin属性为它设置外边距。

我们还创建了另一个名为"box2"的div，和"box"一样的设置，只是我们把它的样式加上了box-sizing:border-box。这样，我们就用"border-box"模型来计算它的宽度和高度，使盒子更方便地调整大小。