CSS盒模型

1. CSS 盒模型是什么？

CSS 盒模型由内到外分别包括 content；border；padding；margin 4各部分。

盒模型

2. 盒模型分类

CSS 盒子模型主要分为两种，分别是：

• content-box : 标准盒模型（默认）
• border-box : 怪异盒模型；IE盒模型

  box-sizing:content-box width = content 宽度
  box-sizing:border-box width = content 宽度 + 2padding + 2margin

示意如下：

box-sizing 区别

3. margin 合并

margin合并：如果两个box都设置了外边距，那么在垂直方向上，两个box的外边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。

• 哪些情况下会出现 margin 合并

  父子元素：如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距，给父元素添加 overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距，但是父元素的高会变化；
  同级元素：在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个。
  注意：行内元素没有 margin-top 或 margin-bottom，也就是说，在行内元素上设置 margin-top 或 margin-bottom 是不起作用的。

• 如何阻止 margin 合并

1. 父子合并用 padding / border挡住；
2. 父子合并用 overflow：hidden；
3. 父子合并用 display：flex；
4. 兄弟合并用 display：inline-block