css盒模型基础详解与使用方法

CSS盒模型由content、padding、border、margin组成，总宽=width+左右padding+左右border+左右margin；使用box-sizing:border-box可将padding和border包含在宽高中，避免布局溢出，推荐全局设置*{box-sizing:border-box}以统一行为。

CSS盒模型是网页布局的核心概念之一，每个HTML元素都可以看作是一个矩形盒子。理解盒模型的结构和工作方式，是掌握页面排版和样式控制的基础。

盒模型的基本组成

每一个元素的盒模型由四个部分构成：内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。

默认情况下，元素的总宽度计算公式为：

总宽度 = width + 左右padding + 左右border + 左右margin

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

总高度同理。

box-sizing 属性的使用

默认的盒模型行为有时会让布局变得难以控制，特别是当设置了 padding 或 border 后，元素的实际尺寸会超出预期。这时可以使用 box-sizing 属性来改变计算方式。

推荐在项目中统一设置：

文心大模型

百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作

56

查看详情

*, *::before, *::after { box-sizing: border-box; }

这样所有元素都按 border-box 模式计算尺寸，避免意外溢出。

常见使用场景与技巧

合理运用盒模型可以简化布局设计。

实例演示

一个简单的 div 设置：

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #000;
  margin: 10px;
  box-sizing: border-box;
}

此时该元素的总宽度仍为 200px（包含 padding 和 border），外层占用空间为 200px + 20px（左右 margin）= 220px。

如果不使用 border-box，则 content 宽度为 200px，加上 padding 和 border 后实际宽度变为 250px，容易导致布局错乱。

基本上就这些。掌握盒模型的关键在于理解各部分如何影响元素尺寸，以及灵活使用 box-sizing 来控制布局行为。

以上就是css盒模型基础详解与使用方法的详细内容，更多请关注php中文网其它相关文章！