border-box是一种盒模型设置，它使元素的width和height包含内容、内边距和边框；使用box-sizing: border-box后，元素总宽高不因padding或border而超出设定值，便于实现自适应布局；推荐全局设置* { box-sizing: border-box; }以统一所有元素的尺寸计算方式；在两栏布局等场景中，即使添加内边距和边框，各列也能准确按百分比分配宽度而不换行溢出。
在CSS中使用 border-box 可以更方便地实现自适应容器，避免因内边距或边框导致元素超出预期宽度。
什么是 border-box？
box-sizing: border-box; 是一种盒模型设置，它让元素的 width 和 height 包含内容、内边距（padding）和边框（border），但不包括外边距（margin）。
这意味着当你设置一个元素的宽度为 300px，即使添加 padding 或 border，实际占用的宽度仍为 300px，内容区域会自动压缩。
为什么 border-box 有助于自适应布局？
在默认的 box-sizing: content-box; 模式下，元素总宽度 = width + padding × 2 + border × 2。这会导致在响应式布局中难以精确控制尺寸。
立即学习“前端免费学习笔记（深入）”；
使用 border-box 后，所有元素的尺寸计算方式统一，更容易实现：
樱桃企业网站管理系统全DIV+CSS模板，多浏览器适应，完美兼容IE6-IE8,火狐，谷歌等符合标准的浏览器，模板样式集中在一个CSS样式中，内容与样式完全分离，方便网站设计人员开发模板与管理。系统较为安全，以设计防注入，敏感字符屏蔽，适合新手自己操作修改。新闻，产品，单页独立关键字设计，提高搜索引擎收录。 后台地址：admin/login.asp 后台账户:admin 密码:admin （
- 多列布局中子元素并排且带内边距
- 百分比宽度容器内添加 padding 不溢出
- 移动端适配时减少计算误差
如何全局启用 border-box
推荐在项目开始时统一设置所有元素使用 border-box：
* {box-sizing: border-box;
}
这样可以确保所有元素都遵循相同的盒模型规则，减少布局错位问题。
实际应用示例：两栏自适应布局
假设要创建一个左右两栏、总宽100%的弹性布局：
.container {display: flex;
}
.left {
width: 70%;
padding: 20px;
}
.right {
width: 30%;
padding: 20px;
border-left: 1px solid #ccc;
}
由于设置了 box-sizing: border-box，左右两栏即使有 padding 和 border，也能完美贴合父容器宽度，不会换行或溢出。
基本上就这些。合理使用 border-box 能大幅简化CSS布局工作，特别是在构建响应式页面时非常实用。
