【FE学习-CSS】盒模型

Block Box 和 Inline Box⁍

这里讨论的是外部显示模型

	块级	内联	inline-block
设置`display`	`block`	`inline`	`inline-block`
默认	标题/`p`	`<a>`/`<span>`/`<em>`/`<strong>`	无（常用于导航栏）
是否换行	是	否	否
`width`和`height`属性是否会发挥作用	是	否	是
垂直方向	内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开”	会被应用，但不会把其他处于 `inline` 状态的盒子推开。	同块级
水平方向	同上	可以把其他处于 `inline` 状态的盒子推开。	同块级

内部显示类型，它决定了盒子内部元素是如何布局的。可以通过使用类似 flex 的 display 属性值来更改内部显示类型。如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。该盒子的所有直接子元素都会成为flex元素.

Learn more: 常规流中的块和内联布局 - CSS（层叠样式表） | MDN (mozilla.org)

盒模型的组成⁍

content-box：width/height
padding
border
margin

标准盒模型⁍

Showing the size of the box when the standard box model is being used.

替代盒/IE盒模型⁍

Showing the size of the box when the alternate box model is being used.

通过设置box-sizing: border-box实现
height/width包含了padding和border的大小

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

外边距折叠collapse⁍

如果有两个外边距相接的元素，这些外边距将合并为一个外边距，即 最大的单个外边距的大小 。

mastering margin collapsing (mozilla.org)

有三种情况会形成外边距重叠：

同一层的相邻的两个元素之间的外边距重叠，除非后一个元素加上clear-fix清除浮动。
没有内容将父元素和后代元素分开
1. 两个上边界：没有border/padding/inline内容/创建块级格式上下文或清除浮动来分开
2. 两个下边界：没有border/padding/inline内容/height/min-height/max-height来分开
重叠部分最终会溢出到父级块元素外面
空的块级元素