css盒模型宽高计算方法-css教程-PHP中文网

css盒模型宽高计算方法

P粉602998670

发布： 2025-09-20 16:58:01

原创

193人浏览过

box-sizing属性决定CSS盒模型的宽高计算方式。1. content-box为默认模型，width和height仅含内容区域，总宽度=width+padding+border+margin；2. border-box下，width和height包含内容、padding和border，总宽度=width+margin，内容区自动压缩；推荐全局设置*{box-sizing:border-box}以提升布局可控性与一致性。

css盒模型宽高计算方法

在CSS中，盒模型的宽高计算方式取决于

box-sizing

登录后复制

属性的设置。默认情况下，元素使用

content-box

登录后复制

，但可以通过设置

border-box

登录后复制

来改变宽高的计算逻辑。

1. content-box（标准盒模型）

这是默认的盒模型。此时，元素的

width

登录后复制

和

height

登录后复制

仅指内容区域的大小，不包括内边距、边框和外边距。

总占用宽度计算公式为：

总宽度 = width + 左右padding + 左右边框宽度 + 左右margin
总高度 = height + 上下padding + 上下边框宽度 + 上下margin

例如：

div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

登录后复制

该div实际占用的宽度为：

200 + (10+10) + (5+5) + (20+20) = 270px

2. border-box（IE盒模型）

当

box-sizing: border-box

登录后复制

时，设置的

width

登录后复制

和

height

登录后复制

包含了内容、内边距和边框，但不包括外边距。

此时的计算方式为：

算家云

高效、便捷的人工智能算力服务平台

查看详情

立即学习“前端免费学习笔记（深入）”；

width 已包含 padding 和 border
内容实际可显示区域会自动压缩
总占用宽度 = width + 左右margin
总高度 = height + 上下margin

例如：

div {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

登录后复制

该div的内容区宽度为：

200 - (10+10) - (5+5) = 170px，但整体占用宽度是 200 + 40 = 240px

3. 如何选择合适的盒模型

推荐在项目开始时统一设置：

* {
  box-sizing: border-box;
}

登录后复制

这样可以更直观地控制布局，避免因padding或border导致超出预期尺寸。

使用
```
border-box
```
登录后复制
时，设定的宽高就是视觉上的尺寸
响应式设计中更容易计算和对齐
减少意外溢出容器的问题

基本上就这些。理解

box-sizing

登录后复制

的影响，能有效避免布局错乱。

以上就是css盒模型宽高计算方法的详细内容，更多请关注php中文网其它相关文章！