# 盒模型

• content area
• padding area
• border area
• margin area

# box-sizing

# content-box

默认值，width和height只包括内容的宽和高，不包括内边距，边框和外边距

# border-box

width和height属性包括内容，内边距和边框，但是不包括外边距

# 块级格式化上下文

# 布局规则

1. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
2. BFC 区域不会与浮动元素重叠
3. BFC 在页面上是一个独立的容器，与其他元素互不影响（e.g. 内部清除浮动）
4. 计算 BFC 高度时，浮动元素也会参与计算

# 如何创建 BFC

• float 不为 none
• position 不为 static
• display 不为默认值
• overflow 不为 visible

Last Update: 2019-12-06 12:55:44 Source File