Concept
out of flow
- floated
- absolutely
- root element
Box Model
在我们现实生活中，描述一个矩形直接用宽和高即可。但是在 CSS 中主要通过四个部分来描述，分别为：
- margin --> margin box
- border --> border box
- padding --> padding box
- content --> content box
计算方式
一般来说，默认的盒模型实际占用空间计算模式为：
水平空间大小 = margin(左右) + border(左右) + padding(左右) + width
垂直空间大小 = margin(上下) +border(上下) + padding(上下) + height
实际大小：
- 空间大小 - margin
Outline
outline 属性不属于盒模型部分，它不占据空间大小，目前来说使用很少，大概了解即可。
Box Type
Block-level elements and block boxes
Block-level elements – are elements which generate a block-level principal box.
css
.foo {
display: "block"; // 'list-item' 'table'
}Block-level boxes are boxes that participate in a block formatting context.
格式化上下文
Block formatting contexts
- BFC
In a block formatting context, boxes are laid out one after the other, vertically.
BFC 的作用
- 两列布局
- 通过使父元素 bfc 化，清楚内部浮动
- 通过使元素处于不同的 bfc 布局中，防止 margin 合并
- 包裹浮动的元素和 margin，使内部元素不影响元素本身的 margin 和其他的元素的布局
BFC 的形成
- 根元素，即 HTML 元素
- float 的值不为 none
- overflow 的值不为 visible
- display 的值为 inline-block、table-cell、table-caption
- position 的值为 absolute 或 fixed
视觉格式化模型
Collapsing margins (margin 塌陷)
在 CSS 中，两个或多个框的相邻边距(可能是兄弟框，也可能不是兄弟框)可以组合成一个边距。以这种方式合并的折叠称为坍塌，由此产生的合并 margin 称为 margin 坍塌。
相邻的垂直边距坍塌，除非
- 根元素不会坍塌
- 如果一个元素的上下边距有个浮动元素相邻，它的边界与相邻的兄弟块的边界一起坍塌，但是产生的边界不会与父块的底部边界一起坍塌。http://test.weasyprint.org/suite-css21/chapter10/section18/test19/
- 如果具有非零计算
min-height和autocomputedheight的盒子的顶部边距与其最后一个子元素的底部边距折叠，则子元素的底部边距不会与父元素的底部边距折叠。eg. demo/css/1.htmlhttps://www.brunildo.org/test/collmempty.html
发生折叠规则：
- 边距折叠只会发生在上下边距，左右边距是不会发生折叠的
- 边距折叠只发生邻接的上下边距中，也即兄弟节点或者父子节点
- 发生边距折叠的两个节点必须同处于一个 bfc 布局中
- 发生边距折叠的两个父子节点没有 border 或者 padding 隔开
- 只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框- 或绝对定位之间的外边距不会合并。
div 里一个图片宽高和 div 不同原因
img 标签是 inline replaced 元素，replaced 可以让他设置宽高等。inline 在垂直方向默认 vertical-align 为 baseline
参考资料
https://tech.youzan.com/css-margin-collapse/