CSSbox-sizing详解:border-box与content-box的区别
时间:2025-06-05 17:55:21 284浏览 收藏
在CSS中,`box-sizing`属性决定了元素的宽高如何计算。其默认值`content-box`仅包含内容区域,不包括`padding`和`border`,导致实际尺寸大于设定值。例如,设置`width:200px;height:100px;padding:10px;border:5px`时,总宽变为230px。相反,`border-box`将`padding`和`border`计入设定宽高内,如`width:200px`时,总宽仍为200px,内容区自动调整为170px。推荐使用`border-box`以简化布局计算,但特定场景下`content-box`仍有其用 warrior。全局设置`box-sizing:border-box`可避免常见的溢出问题,如`width:100%`时未使用`border-box`导致子元素超出父容器。
content-box是box-sizing的默认值,设置元素的宽高仅指内容区域的大小,不包括padding和border,例如width:200px;height:100px;padding:10px;border:5px时,实际总宽为230px,因为padding和border会额外增加尺寸;而border-box将padding和border包含在设定的宽高中,如设置width:200px后,整个盒子总宽即为200px,内容区自动压缩为170px,推荐使用border-box因其便于精确布局;选择方式上建议全局统一使用border-box以减少计算负担,但某些场景如需精确控制内容区或依赖默认行为时可保留content-box;常见误区是使用width:100%时若未配合border-box会导致溢出父容器,解决方法是添加box-sizing:border-box。
在CSS中,box-sizing
属性用来控制元素的宽度和高度如何计算。最常见的两个值是 border-box
和 content-box
,它们的区别主要在于是否将边框(border)和内边距(padding)计入元素的总宽高。
什么是 content-box
?
这是 box-sizing
的默认值。
当你设置一个元素的 width: 200px; height: 100px; padding: 10px; border: 5px solid black;
,它的实际显示尺寸会比你设定的大一圈:
- 内容区域宽:200px
- 加上左右 padding 各10px → 总宽变为 200 + 20 = 220px
- 加上左右 border 各5px → 总宽变成 220 + 10 = 230px
也就是说,你设的是内容区大小,其他部分是额外加出来的。
这种模式在早期网页布局中比较常见,但随着响应式设计的发展,它在做精确布局时容易出问题。
什么是 border-box
?为什么推荐使用它?
设置为 box-sizing: border-box;
后,元素的宽高就包括了内容、padding 和 border:
- 设置
width: 200px;
那么整个盒子(包括边框和内边距)就是 200px 宽 - 实际内容区会自动压缩:200px 减去 padding 和 border 的宽度
举个例子:
.box { width: 200px; padding: 10px; border: 5px solid black; box-sizing: border-box; }
这个元素的总宽度就是 200px,内部的内容区会被压缩成 200 - 102 -52 = 170px。
这在现代前端开发中非常实用,尤其是做栅格系统或者响应式布局的时候,能避免很多“算错了”的尴尬。
如何选择用哪个?
通常建议直接统一使用 border-box
,可以减少布局时的计算负担。你可以这样全局设置:
* { box-sizing: border-box; }
不过也有几种情况适合保留 content-box
:
- 需要对内容区域进行精确控制(比如画布或特定图形)
- 使用
或某些旧版组件样式依赖默认行为
- 想让子元素撑开父容器时更灵活一些
常见误区提醒
有时候开发者以为设置了
width: 100%
就一定能填满父容器,但如果用了padding
又没用border-box
,就会溢出。例如:- 父容器宽 300px
- 子元素设置
width: 100%; padding: 10px;
- 实际子元素宽变成 300 + 20 = 320px,超出了父级
这种情况只要加上
box-sizing: border-box;
就解决了。基本上就这些。虽然看起来是个小属性,但在布局细节上影响挺大,理解清楚能省不少调试时间。
文中关于border,padding,content-box,box-sizing,border-box的知识介绍,希望对你的学习有所帮助!若是受益匪浅,那就动动鼠标收藏这篇《CSSbox-sizing详解:border-box与content-box的区别》文章吧,也可关注golang学习网公众号了解相关技术文章。
相关阅读更多>-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
最新阅读更多>-
492 收藏
-
141 收藏
-
222 收藏
-
433 收藏
-
423 收藏
-
115 收藏
-
225 收藏
-
307 收藏
-
242 收藏
-
442 收藏
-
257 收藏
-
437 收藏
课程推荐更多>-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 508次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 497次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 484次学习