标签：体系 定位 位置 盒子 auto 元素 文档 浮动 css
文章目录
一、常规流
又叫普通流、文档流、普通文档流
脱离文档流就是不占元素位置
盒模型中的auto值
-
水平方向
常规流盒子水平方向上的尺寸，必须等于包含块的宽度
如果不行，则强行将margin-right设置为auto
-
垂直方向
margin为auto：0px
height为auto：适应内容的高度
盒子位置
-
盒子在包含块的垂直方向上依次摆放
依次摆放：按照HTML元素的书写顺序从上到下摆放
-
垂直方向上，若两个外边距相邻，则进行合并（折叠）
垂直方向：水平方向上的外边距不会合并
外边距相邻：两个外边距之间没有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）若都是默认值则以视口为包含块
适用场景 两个及以上的标签重叠在一起的时候
标签：体系,定位,位置,盒子,auto,元素,文档,浮动,css 来源： https://blog.csdn.net/qq_44277429/article/details/115425967
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。