一、常规流

又叫普通流、文档流、普通文档流

脱离文档流就是不占元素位置

盒模型中的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底部

  1. ad(广告)
  2. 侧边栏
  3. 目录
  4. 回到顶部
  5. 即时通讯

包含块为视口 偏移量的设置(移动)

起始位置是视口的左上角

①参照物是屏幕可视区

②元素变成块元素

③完全脱离文档流,不占位置

绝对位置

绝对位置包含块 :包含我,离我最近的元素的position

的属性值不是默认值(static)若都是默认值则以视口为包含块

适用场景 两个及以上的标签重叠在一起的时候

点赞(0) 打赏

Comment list 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部