盒模型

1. box-sizing: 默认取值content-box，width对应内容区content的宽度。

当box-sizing取值为border-box时，给出padding, border后，width对应的是content的宽度+padding(左右)+border(左右)

2. 元素width的单位为%时，是相对于其父元素width的百分比；

*上下方位的padding，margin单位为%，是相对于包含块的width来计算。

    包含块：如果元素的position是static(默认值)或者relative【这两种属于常规文档流】, 则包含块的边界计算到最近一个父元素；该元素的display属性必须能够提供类似块级上下文，如：block, inline-block,  table-cell, list-item等。默认情况下，width, height, padding, margin的值为百分比时，以父元素的尺寸为依据。

• 脱离常规文档流：

1. position: absolute
2. 浮动

块级格式化上下文(BFC)：

满足以下条件可以创建自己的BFC

1. position: absolute
2. display: inline-block, table-cell
3. float: 不是none
4. overflow: 不是visible

BFC规则：

• 自动包含浮动的元素（解决盒子塌陷问题）；
• 所有块级盒子的左边界默认与包含块的左边界对齐（文字方向为从右到左，则与右边界对齐）；
• 当一个元素具备了bfc的条件，且挨着一个浮动元素时，它就会忽略自己的边界必须接触自己的包含块边界的规则，同时该元素自动调整以适应浮动元素旁边的剩余空间，确保挨着浮动元素的一边始终是直的。（取消文字环绕）