在CSS里控制元素的尺寸是最基础的操作，我们通常用width和height两个属性来设置。但不少人在实际写样式时发现，明明写了宽高，元素看起来却不是那么宽、那么高，这背后的原因就是盒模型在起作用。下面我们先看一张示意图，帮助建立直观认识。
一、如何用width和height设置元素宽高
width和height用来定义元素的内容区域尺寸。它们可以接受长度值（如px、em、rem）、百分比，或者auto（默认值，由内容或父级决定）。
/* 设置一个div的内容宽度为200px，高度为100px */
.box {
width: 200px;
height: 100px;
background: #f2f2f2;
}
上面的代码会让类名为box的元素内容区是200乘100像素。但如果你再加padding和border，它占的总空间就会变大。
二、标准盒模型与width height的关系
在默认的box-sizing: content-box模式下，也就是标准盒模型，元素最终在页面上占用的宽度计算公式是：
- 总宽度 = width + 左右padding + 左右border + 左右margin
- 总高度 = height + 上下padding + 上下border + 上下margin
margin虽然不计入元素自身背景区，但会挤开其他元素。看下面例子：
.standard {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
/* 此时总宽度 = 200 + 40 + 10 = 250px */
}
标准盒模型结构
| 组成部分 | 是否计入width | 实际占用 |
|---|---|---|
| content | 是 | 200px |
| padding | 否 | 40px |
| border | 否 | 10px |
| 总宽 | - | 250px |
三、边框盒模型（IE盒模型）下的宽高
如果把box-sizing设为border-box，就切换到了边框盒模型。此时你写的width和height已经包含了padding和border。
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
/* 内容区自动变成 200-40-10 = 150px 宽 */
}
这种模式下更容易控制元素在布局中占的真实大小，所以很多项目会在全局重置里加上：
* {
box-sizing: border-box;
}
四、百分比宽高与父级关系
当width或height使用百分比时，它是相对于父元素对应尺寸计算的。例如父级内容宽400px，子级width:50%就是200px。但height百分比通常要求父级有确定高度，否则可能失效。
<div class="parent" style="width:400px;height:200px;"> <div class="child" style="width:50%;height:50%;background:#ccc;"></div> </div>
五、总结
设置元素宽高直接用width和height即可，但一定要清楚当前处于哪种盒模型。默认content-box只管内容区，border-box让宽高包住内边距和边框。实际开发中推荐统一使用border-box，能减少布局计算错误。理解盒模型是写好CSS布局的重要一步。
CSSwidthheight盒模型box_sizing修改时间：2026-07-25 14:30:38