一、常规流
又叫普通流、文档流、普通文档流
脱离文档流就是不占元素位置
盒模型中的auto值
-
水平方向
常规流盒子水平方向上的尺寸,必须等于包含块的宽度
如果不行,则强行将margin-right设置为auto
-
垂直方向
margin为auto:0px
height为auto:适应内容的高度
盒子位置
-
盒子在包含块的垂直方向上依次摆放
依次摆放:按照HTML元素的书写顺序从上到下摆放
扫描二维码关注公众号,回复: 13141281 查看本文章 -
垂直方向上,若两个外边距相邻,则进行合并(折叠)
垂直方向:水平方向上的外边距不会合并
外边距相邻:两个外边距之间没有border、padding和content
外边距合并(规则):
1.相同值,取一个
2.都是正值取最大
3.都是负值取最小
4.一正一负则相加
禁止外边距合并可以加overflow:hidden;
二、浮动
浮动盒子位置
浮动的初衷是为了实现文字环绕
- 左浮动的盒子向上向左排列
- 右浮动的盒子向上向右排列
- 浮动盒子的顶边不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左或向右移动
子级浮动,父级元素高度塌陷
缺点:需要在HTML写一个空标签
解决方式,给父元素添加伪元素
清除浮动
1.clear属性名 left、right、both(全部)(对最后一个子元素使用可防止父元素塌陷)
2.overflow:hidden;(功能可清除浮动 实际是溢出内容隐藏 也可使外边距合并)
常规流盒子和浮动盒子混合摆放
为什么高度塌陷 脱离文档(页面)流了谁浮动谁脱离
-
浮动盒子在摆放时,要避开常规流盒子
-
常规流盒子在摆放时会无视浮动盒子
-
常规流盒子的自动高度计算时,无视浮动盒子—(高度塌陷)
绝对定位
当浮动元素被设置为绝对定位
属于绝对定位,float属性被强制设置为none
影响
绝对定位元素不会对其他任何元素造成任何影响
位置
可以通过top、bottom、right、left进行移动
绝对定位元素的包含块
固定位置使用场景
position-fixed
-
pc端:页面头部区域
-
移动端:footer底部
- ad(广告)
- 侧边栏
- 目录
- 回到顶部
- 即时通讯
包含块为视口 偏移量的设置(移动)
起始位置是视口的左上角
①参照物是屏幕可视区
②元素变成块元素
③完全脱离文档流,不占位置
绝对位置
绝对位置包含块 :包含我,离我最近的元素的position
的属性值不是默认值(static)若都是默认值则以视口为包含块
适用场景 两个及以上的标签重叠在一起的时候