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的值为百分比时,以父元素的尺寸为依据。
- 脱离常规文档流:
- position: absolute
- 浮动
块级格式化上下文(BFC):
满足以下条件可以创建自己的BFC
- position: absolute
- display: inline-block, table-cell
- float: 不是none
- overflow: 不是visible
BFC规则:
- 自动包含浮动的元素(解决盒子塌陷问题);
- 所有块级盒子的左边界默认与包含块的左边界对齐(文字方向为从右到左,则与右边界对齐);
- 当一个元素具备了bfc的条件,且挨着一个浮动元素时,它就会忽略自己的边界必须接触自己的包含块边界的规则,同时该元素自动调整以适应浮动元素旁边的剩余空间,确保挨着浮动元素的一边始终是直的。(取消文字环绕)
来源:https://www.cnblogs.com/ceceliahappycoding/p/11191317.html