1.常规流
>常规流布局
(1) 常规流 文档流 普通文档流 常规文档流。所有元素,默认情况下,都属于常规流布局
(2)总体规则:块盒独占一行,行盒水平依次排列
>包含块(containing)
-
每个盒子都有自己的包含块, 包含块决定了盒子的排列区域(参考坐标系)。
绝大部分情况下,盒子的包含块,为其父元素的内容盒 -
块盒特征
-
每个块盒的总宽度,必须刚好等于包含块的宽度
-
宽度的默认值是auto,auto:将剩余空间吸收掉(除去border,padding,margin)
-
外边距的默认值为0,设置为auto时,将剩余空间吸收掉 (width的吸收能力强于margin)
(1) 若宽度、边框、内边距、外边距计算后,仍然有剩余空间,该剩余空间被margin-right全部吸收 (2) 在常规流中,块盒在其包含块中居中,可以定宽,然后左右margin设置为auto(左右各吸收一半) (3) 在常规流中,块盒在其包含块中时,将width设置为auto,左右margin设置为负数,width会随之变宽,吸收剩余内容,达到块盒的总宽度,刚好等于包含块的宽度的代数和 (4) 每个块盒垂直方向上的auto值: height:auto(默认值),被内容撑开 margin:auto(默认值),表示0
- 百分比取值
- padding、width、margin可以取值为百分比(所有百分比都是相当于包含块的宽度,跟高度没有关系)
高度的百分比: (1) 包含块的高度取决于子元素的高度(父元素没设置宽高),这种情况设置宽高无效 (2) 包含块的高度不取决于子元素的高度(父元素设置宽高),百分比相对于包含块的高度
- 上下外边距的合并
- 两个常规流块盒,上下外边距相邻,会进行合并(两个外边距的最大值)
(1) 如父元素设置了外边距,上下外边距的合并,子元素会和父元素上端重合,这也是前面的 before添加一个元素的content:"";的原因,使脱离重合(或者父元素设置padding)
- 补充
当内容盒的宽高设定好,设置padding占取剩余空间(原本是margin-left占据剩余) 当内容盒的宽高没有设定,宽度等于页面最大宽度,设置padding占取内容盒空间
2. 浮动流
浮动的应用
- 文字环绕
- 横向排列
浮动的基本特点
-
float属性值
- left: 左浮动,元素靠上靠左排列 - right: 右浮动,元素靠上靠右排列 - none: 默认值, 常规流 注: 1.当一个元素浮动,元素必定为块盒(更改display属性为block) 2.浮动元素的包含块,和常规流一样,为父元素的内容盒
-
盒子尺寸
(1)宽度为auto时,适应内容宽度,如果没内容,则宽度为零 (如果是常规流,没有内容, 会默认父级宽度,有内容也会用margin-leftz撑满整个包含块的宽度) (2)高度为auto时,与常规流一样,适应内容宽度 (3)在常规流中,margin左右为auto时,会吸收父级元素剩余内容居中,如果内容占满了,margin就没有用了 在浮动流中,margin为auto时,会自动设置为0 (4)边框、内边距、百分比设置与常规流一样
-
盒子排列特点
(1)左浮动的盒子靠上靠左排列 右浮动的盒子靠上靠右排列 (2)浮动盒子在包含块中排列时,会避开常规流块盒 (3)常规流块盒在包含块中排列时,不会避开浮动盒子 (看不见浮动元素的位置) (4)行盒在排列时,会避开浮动盒子 (5)外边距合并不会发生(公用一个外边距)
注: 如果文字没有在行盒中,浏览器会自动生成一个行盒包裹文字,该行盒叫做匿名行盒(类似span)
-
盒子高度坍塌
(1)原因:高度坍塌的原因:父级常规流盒子的自动高度,不会考虑浮动盒子 (2)解决办法:清除浮动盒子的浮动 清除浮动,涉及css属性:clear - none: 默认值 - left: 清除左浮动,该元素必须出现在前面元素的左浮动盒子的下方 (看一下天上左边浮动元素的位置) - right:清除右浮动,该元素必须出现在前面元素的右浮动盒子的下方 (看一下天上右边浮动元素的位置) - both: 清除两边浮动,该元素必须出现在前面元素的浮动盒子的下方 (清除上面元素的浮动,就可以出现盒子下方,撑开盒子) 例: .clear::after{ content: ""; display:block; //默认行盒 clear:both; }
-
盒子占位
(1)块元素独占一行 (2)float(浮动) float:left; //可以使块元素从左到右依次排列,#可以同在一行,直到排不下 flaot:right;//可以使块元素从右到左依次排列,#可以同在一行,直到排不下 ### 补充 浮动盒子的顶边不得高于上一个盒子的顶边 若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左向右排列