盒模型由content、padding、border、margin组成，推荐使用box-sizing: border-box以包含padding和border在宽高中，避免布局溢出。
在CSS中，盒模型是布局的核心概念之一。每个HTML元素都被视为一个矩形盒子，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。理解盒模型的细节对精准控制页面布局至关重要。
盒模型的基本结构
每个盒子包含四个部分：
- content：盒子的实际内容区域，可设置宽高。
- padding：内容与边框之间的空间，受背景色或背景图像影响。
- border：围绕内容和内边距的边框线。
- margin：盒子与其他元素之间的空白区域，不显示背景。
box-sizing 的影响
CSS默认使用 content-box 模式，即设置的 width 和 height 只包括 content 区域。一旦添加 padding 或 border，实际占用空间会更大，容易导致布局溢出。
推荐统一使用 border-box：
立即学习“前端免费学习笔记（深入）”；
- width 和 height 包含 content、padding 和 border。
- 更直观地控制元素尺寸，避免意外溢出。
- 可通过全局重置提升一致性：
*, *::before, *::after {
box-sizing: border-box;
}
外边距折叠（Margin Collapse）
垂直方向上的相邻元素 margin 有时会合并为一个 margin，取较大者。这种情况常出现在：
- 块级元素上下排列时。
- 父元素与第一个/最后一个子元素之间。
注意：只有普通文档流中的块级元素才会发生 margin 折叠，flex 和 grid 子项不会。
处理不同浏览器的默认样式
不同浏览器对某些元素（如 body、h1~h6、ul 等）设置了默认 margin 和 padding，可能干扰布局。
建议做法：
- 使用 CSS Reset 或 Normalize.css 统一样式。
- 手动清零常用元素的边距：
body, h1, h2, h3, p, ul, ol, li {
margin: 0;
padding: 0;
}
空隙问题与行内元素
当元素 display 为 inline 或 inline-block 时，HTML 中的换行或空格会被渲染成小间隙。
解决方法包括：
- 将子元素写在同一行。
- 父元素设置 font-size: 0，再单独设置子元素字体大小。
- 使用 float 或 flex 布局替代。
基本上就这些。掌握这些注意点，能有效避免常见布局偏差。
