常规流
盒模型:规定单个盒子的规则
视觉格式化模型(页面布局):页面中多个盒子的排列规则
视觉格式化模型,大体上将页面中的盒子的排列分为三种
- 常规流
- 浮动
- 定位
常规流布局
常规流、文档流、普通文档流、常规文档流
所有元素,默认情况下,都属于常规流布局
总体规则:块盒独占一行,行盒水平依次排序
包含块(containing block):每个盒子都有他的包含块,包含块决定了盒子的排列区域
绝大部分情况下:盒子的包含块,为其父元素的内容盒
块盒
- 每个块盒的总宽度,必须刚好等于包含块的总宽度
宽度的默认值是auto
margin的取值也可以是auto,默认是0
auto:将剩余的空间吸收掉
width吸收能力强于margin
若宽度、边框、内边距、外边距计算后,仍有剩余空间,则该空间被margin-right全部吸收,等于margin-right:autol;
使块盒在包含块中居中:在常规流中,块盒在其包含块中,可以定宽,然后左右margin设置为auto
margin为负数时content可能溢出(本质为 包含块宽度数值 = 宽度、边框、内边距、外边的和)
- 每个块盒垂直方向上的auto值
height:auto,适应内容高度
margin:auto,表示0
- 百分比取值
padding、宽、margin可以取值为百分比
以上的所有百分比相对包含块的宽度(与高度无关)
高度的百分比:
1). 包含块的高度取决于子元素的高度(即父元素没有设置高度),设置百分比无效
2). 包含块的高度取不决于子元素的高度(即父元素设置了height),按百分比取值
- 上下外边距的合并
两个常规流块盒,上下外边距相邻,会进行合并
1).兄弟元素相邻,上面块盒的margin-bottom和与下面块盒的margin-top会合并(取二者中的更大值)
2).父子元素,两者margin-topyehui也会合并,若父元素margin-top大于等于子元素的margin-top,展示结果为子元素紧挨父元素
eg见text
2).的解决方法
(1)给父元素元素加入border
(2)把父元素的margin-top换成padding-top