css框模型也常被称为盒模型，是css规范中定义的元素空间计算规则，它规定了网页中每个元素在渲染时会被看作一个矩形的盒子，这个盒子的构成和尺寸计算方式由框模型的相关规则定义，直接影响页面的布局效果。
css框模型的核心构成规定
css框模型明确规定了每个元素盒子由内到外包含四个部分，这四个部分的规则共同决定了元素最终占用的页面空间：
- 内容区域（content）：是盒子最内层的区域，用来放置元素的实际内容，比如文本、图片等，内容的宽度和高度可以通过width和height属性设置。
- 内边距（padding）：内容区域和外边框之间的空白区域，用来分隔内容和边框，内边距会扩大盒子的整体尺寸，背景色会覆盖内边距区域。
- 边框（border）：包裹在内边距外层的边界线，可以设置边框的宽度、样式和颜色，边框同样会扩大盒子的整体尺寸，背景色也会覆盖边框区域。
- 外边距（margin）：盒子最外层的空白区域，用来分隔相邻的元素，外边距不会扩大盒子自身的尺寸，也不会被背景色覆盖。
css框模型对尺寸计算的规定
css框模型规定了两种尺寸计算模式，开发者可以通过box-sizing属性选择使用哪一种：
标准盒模型（content-box）
这是css默认的盒模型模式，框模型规定此时元素的width和height仅表示内容区域的宽度和高度，盒子的总宽度和总高度需要加上内边距和边框的尺寸，计算规则如下：
总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
总高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
以下是一个标准盒模型的代码示例：
/* 标准盒模型示例 */
.box {
box-sizing: content-box; /* 默认值，可省略 */
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
background-color: #f0f0f0;
}
按照上述代码，这个元素的内容区域是200px*100px，加上左右各20px内边距和5px边框，元素自身的宽度是200+20*2+5*2=250px，再加上左右各10px外边距，最终占用的水平空间是250+10*2=270px。
怪异盒模型（border-box）
框模型规定当box-sizing设置为border-box时，元素的width和height会包含内容区域、内边距和边框的总尺寸，此时调整内边距和边框不会让盒子尺寸变大，只会压缩内容区域的尺寸，总尺寸计算规则如下：
总宽度 = width + margin-left + margin-right
总高度 = height + margin-top + margin-bottom
怪异盒模型的代码示例如下：
/* 怪异盒模型示例 */
.box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
background-color: #f0f0f0;
}
按照上述代码，这个元素的总宽度固定为200px，加上左右各10px外边距，最终占用水平空间是200+10*2=220px，内容区域的宽度会被压缩为200-20*2-5*2=150px。
css框模型对布局的实际作用
css框模型的规定直接决定了页面布局的实现效果，主要作用体现在以下几个方面：
- 精准控制元素尺寸：通过框模型的尺寸计算规则，开发者可以明确知道设置width、padding、border后元素的最终大小，避免出现预期外的布局偏移。
- 调整元素间距：外边距的规则让开发者可以灵活控制相邻元素之间的距离，实现合理的页面留白，比如通过设置
margin: 0 auto实现块级元素水平居中。 - 避免布局溢出：理解内容区域、内边距和边框的关系，可以合理设置元素的overflow属性，处理内容超出盒子范围的情况。
- 统一布局计算：框模型的规则是通用的，所有元素都遵循相同的盒子构成规则，让不同元素的布局逻辑可以统一计算，降低布局复杂度。
常见框模型相关问题示例
很多布局问题都是因为对框模型的规定理解不到位导致的，以下是一个常见的外边距折叠问题的示例：
<div class="box1">第一个盒子</div> <div class="box2">第二个盒子</div>
.box1 {
margin-bottom: 20px;
background-color: #ccc;
height: 50px;
}
.box2 {
margin-top: 30px;
background-color: #ddd;
height: 50px;
}
按照框模型的规定，垂直方向相邻的两个块级元素的外边距会发生折叠，最终两个盒子的间距不是20px+30px=50px，而是取较大的30px，这也是框模型规则带来的常见布局特性。
css_box_modelcss布局盒模型属性网页排版修改时间：2026-06-23 07:21:24