盒模型

简述： CSS 盒模型用于设计和布局，将所有的 HTML 元素看作盒子， CSS 盒模型可封装周围的 HTML 元素，它包括：边框 (border)、边距 (Margin/Padding) 和内容 (content) 。CSS的盒模型分两种，一种是 content-box ，另一种是 border-box。二者的区别主要是 content-box 的宽度只包含 content，而 border-box 的宽度包含了 border、padding 和 content。

两种盒模型

1. content-box 内容盒：内容是盒子的边界
2. border-box 边框盒：边框才是盒子的边界
   主要区别：

• content-box width = 内容宽度
• border-box width = 内容宽度 + padding + border 举例说明：
  此时的 content-box :

此时的 border-box :

margin 合并

父级元素的上外边距和下外边距会合并为单个外边距，这种现象称为margin合并。

• 合并只在上下方向合并，左右方向不合并; margin 合并发生于块级元素。
• 不合并：1. display:inline-block;
  

margin 合并的场景：

• 相邻兄弟元素 margin 合并；(可设置浮动元素解决)
• 父级元素和子元素 margin 合并； （使用overflow:hidden;）
• 空级块元素 margin 合并。