CSS盒模型（Box Model）是网页布局的基石，浏览器在渲染每一个HTML元素时，都会将其视为一个矩形盒子。这个盒子由外到内依次由四个部分组成：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content）。理解盒模型对于精确控制页面元素的尺寸和间距至关重要，是每一位前端开发者必须掌握的基础知识。
在标准盒模型（content-box）中，当你设置 width: 300px 时，这个300像素只包含内容区域的宽度。如果此时再添加 padding: 20px 和 border: 2px，元素实际占据的总宽度将变成 300 + 20×2 + 2×2 = 344px。这种累加方式经常导致布局计算复杂且容易出错。
本工具通过可视化方式直观展示这四个部分的层级关系，并实时计算总宽高，帮助你快速理解不同box-sizing模式下的尺寸差异。
content-box（默认值）：width和height只包含内容区域。padding和border会额外增加元素的总尺寸。这是W3C标准盒模型，但在实际开发中计算繁琐。
border-box（推荐值）：width和height包含内容、padding和border的总和。设置 width: 300px 时，元素占据的总宽度就是300px（不包含margin），padding和border从内部"吃掉"空间，不会撑大元素。这是现代前端开发的最佳实践。
几乎所有现代CSS框架（如Bootstrap、Tailwind CSS、Bulma）都会在全局样式中设置 box-sizing: border-box，Google、MDN等权威文档也强烈推荐使用border-box作为默认盒模型。
第一步：设置基础尺寸。在"内容宽度"和"内容高度"输入框中输入元素的基础尺寸。如果你使用border-box模式，这通常就是元素的最终显示尺寸（不含margin）。
第二步：调整内边距和边框。分别设置上、下、左、右四个方向的内边距（padding）和边框（border）宽度。工具会实时更新可视化图形，让你直观看到padding和border如何影响布局。
第三步：设置外边距。输入四个方向的外边距（margin）值。注意margin在可视化中用虚线边框表示，它不参与元素本身的背景色渲染，而是元素与其他元素之间的间距。
第四步：切换box-sizing模式。通过下拉菜单切换content-box和border-box模式，观察总宽高的变化。border-box模式下，即使增加padding和border，元素总尺寸也不会超出设定的宽高。
第五步：复制CSS代码。调整完成后，点击"复制CSS代码"按钮，将生成的代码直接粘贴到你的样式表中，省去手动编写的麻烦。
响应式布局调试：在开发响应式网站时，经常需要精确控制卡片、按钮、表单等组件的尺寸。使用本工具可以快速计算在不同padding和border组合下元素的实际占用空间，避免布局错位或溢出。
CSS框架适配：当你在使用Bootstrap、Tailwind等框架时，组件的内边距和边框可能已经预设好了。通过本工具可以直观理解这些预置值如何影响最终尺寸，方便你进行覆盖和定制。
教学与学习：对于CSS初学者来说，盒模型是理解网页布局的关键。本工具的可视化展示让抽象的概念变得具体可感，帮助学习者建立正确的空间认知。
设计稿还原：前端工程师拿到设计稿后，需要精确还原设计师意图。本工具可以帮助你快速计算出正确的width、height、padding、margin值，确保像素级还原。
外边距折叠（Margin Collapse）：当两个垂直相邻的块级元素相遇时，它们之间的外边距不会相加，而是取两者中的较大值。例如一个元素margin-bottom: 20px，下一个元素margin-top: 30px，它们之间的间距是30px而不是50px。注意这只发生在垂直方向，水平方向不会折叠。
box-sizing的全局设置：最佳实践是在CSS根样式中统一设置 *, *::before, *::after { box-sizing: border-box; }。这样可以确保所有元素都使用border-box模型，避免不同组件之间的盒模型不一致导致的布局问题。
CSS逻辑属性：现代CSS引入了逻辑属性（Logical Properties），如 inline-start/end 和 block-start/end，可以替代传统的top/right/bottom/left。这在多语言（尤其是RTL语言如阿拉伯语、希伯来语）布局中尤为重要。
CSS盒模型是网页布局的基础概念，每个HTML元素都被视为一个矩形盒子，由外到内依次包括：外边距(Margin)、边框(Border)、内边距(Padding)和内容(Content)四个部分。总宽度和总高度的计算方式取决于box-sizing属性的设置。
content-box是CSS默认值，元素的宽度和高度只包含内容区域，padding和border会额外增加元素的总尺寸。border-box将padding和border包含在width和height内，元素的实际占用尺寸就是设置的宽高值，更符合直觉，也是现代开发的首选。
推荐使用border-box主要有三个原因：1)设置width=300px时，元素实际占用宽度就是300px，不会被padding和border撑大；2)响应式布局中更容易控制元素尺寸；3)减少计算失误，padding和border不会意外破坏布局。大多数CSS框架（如Bootstrap、Tailwind）都全局设置box-sizing: border-box。
不会。margin是元素外部的空白区域，不属于元素本身，因此不会显示元素的背景色。只有content、padding和border区域会显示背景色。margin用于控制元素与其他元素之间的间距。
在content-box模式下，元素总宽度 = width + padding-left + padding-right + border-left-width + border-right-width；总高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width。注意margin不计入元素本身尺寸，但会影响元素在文档流中的占位。
不可以。padding值必须是大于等于0的数值。与margin不同，margin可以设置负值（用于元素重叠或拉近间距），但padding不允许为负。在CSS中设置负padding会被浏览器忽略或视为无效值。
会。border区域属于元素的一部分，因此会响应鼠标事件（如click、hover）。如果你希望扩大点击区域但不想显示边框，可以使用透明的border（如 border: 10px solid transparent）或利用padding来实现。
有区别。块级元素（如div、p）的width、height、padding、border、margin属性都有效，可以完整应用盒模型。而行内元素（如span、a）的width和height属性无效（由内容决定），垂直方向的margin和padding虽然可以设置，但不会影响周围元素的布局（不会推开其他元素）。