常规流
- 页面中多个盒子排列规则
- 所有元素,默认情况下都属于常规流布局
总体规则:
**块盒独占一行,行盒水平一次排列**
-
包含快:
- 每个盒子都有它的包含快,包含块决定了盒子的排列区域
- 绝大部分情况下,盒子的包含块,为其父级元素的内容盒
-
块盒
-
每个块盒的总宽度,必须等于包含块的宽度
-
auto是宽度的默认值,将剩余空间吸收掉
-
width 吸收能力强于 margin
-
若 width,padding,margin,border计算之后仍有空余空间,则由margin-right吸收
-
块盒在器包含块中居中,可以定宽,然后设置margin:0 auto;
-
每个块盒垂直方向上的auto值
- height:auto 适应内容宽度
- margin:auto 表示0
-
-
百分比取值
-
padding,width,margin可以取值为百分比(仅相对于包含块宽度)
-
height百分比:
- 包含块不设置height,子元素设置height百分比无效
- 包含块设置height,子元素设置height百分比是相对于父级元素的和height
-
margin的上下合并
- 两个常规流块盒,上下margin相邻,会进行合并,两个margin取最大值
- 父子元素之间的margin合并,可在父级元素加border或padding使其不相邻
-
