box-sizing：content-box width/height = content （内容就是盒子边界）
box-sizing：border-box width/height = content + padding + border（边框就是盒子边界）

BFC

块级格式化上下文（Block Formatting Context），是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

下列方式会创建BFC：

  1. 根元素（<html>）
  2. 浮动元素（元素的 float 不是 none）
  3. 绝对定位元素（元素的 position 为 absolute 或 fixed）
  4. 行内块元素（元素的 display 为 inline-block
  5. overflow 值不为 visible 的块元素
  6. 弹性元素（display 为 flex 或 inline-flex元素的直接子元素）
  7. 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）

margin合并

如果两个相邻的元素都设置了margin 并且两个margin有重叠，那么更大的设置会被保留，小的则会消失 —- 这被称为外边距叠加。
注：margin合并上下重叠，左右不重叠

  • 父子margin合并
  • 兄弟margin合并

如何消除

  • 父子合并,在父级上添加padding/border消除
  • 创建新的 BFC 避免两个相邻 <div> 之间的外边距合并问题
  • 父子合并,在父级上添加overflow：hidden消除
  • 父子合并,在父级上添加display：flex消除
  • 兄弟合并是符合预期的,若要去除合并在兄弟元素上添加 display:inline-block消除