HTML&CSS精华知识点——第七节
一、常规流
视觉格式化模型(布局规则):页面中的多个盒子排列规则,大体上将页面中盒子的排列分为三种:常规流、浮动、定位
常规流:所有元素,默认情况下,默认都属于常规流布局
1、布局的总体规则:块盒独占一行,行盒水平依次排列
【扩展】包含块:每个盒子都有它的包含块,包含块决定了盒子的排列区域,绝大部分情况下,盒子的包含块,为其父元素的内容盒
1)、块盒
- 每个块盒总宽度,必须刚好等于包含块的宽度,宽度的默认值是auto,auto:将剩余空间吸收掉,若宽度边框内边距计算后仍然有剩余空间,该剩余空间被margin-right吸收
- 在常规流中,块盒在其包含快中居中可以定宽margin:0 auto
• 百分比取值 - padding、margin、可以取值为百分比,相对于包含块的宽度
- 高度的百分比:包含块的高度是否取决于子元素的高度,设置百分比无效,包含块高度不取决于子元素高度,百分比相对于父元素的高度
- 上下外边距合并,上下边距相邻、会进行合并,两个值取最大值
二、浮动 float:这个属性可以让元素排队
1、应用场景:文字环绕、横向排列
2、修改float属性值为
-left:元素靠上靠左排列
-right:元素靠上靠右排列
-none:默认值,常规流
3、浮动的基本特点:当一个元素浮动后