css盒模型宽高计算方法

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中，盒模型的宽高计算方式取决于

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

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

此时的计算方式为：

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

Movie Gen

Movie Gen 是 Meta 公司最新推出的ai视频生成大模型

90

查看详情

• 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 响应式设计 css 外边距 内边距 margin padding border