17370845950

盒模型由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 布局替代。

基本上就这些。掌握这些注意点，能有效避免常见布局偏差。