流式文档

流动模型：在默认文档流中布局，元素会具有流动性按照顺序垂直延申分布
浮动模型：元素在文档流中布局，但元素具有移动的浮动性，其他内联元素在其附近环绕
层模型：元素脱离文档流进行布局，脱离的部分相当于新的文档流，层层叠加

元素表现

visibility

visible: 默认，元素可见
hidden: 元素不可见，但仍存在于文档流中，且子元素也会隐藏(可手动改为 visible)
collapse: 对不不同元素表现不同
- table 的行、列、行组、列组，表现为 display: none，但是不影响尺寸计算
- 折叠的弹性元素和 ruby 元素会被隐藏
- 其他元素，表现同 hidden

display：设置元素的内部和外部的显示类型(这里也侧面印证了外在盒子和容器盒子的概念)

外部类型参与流式布，内部类型设置子元素的布局
- 外部类型，使用 block 和 inline
- 内部布局，使用 flow、flow-root、flex、grid、table
- 特殊元素，list-item-列表，table-表格
取值
- 单值: block、inline，内部表现为 block flow、inline flow
- 组合：<外部>-<内部>，通常为 inline-*，如 inline-block、inline-flex、inline-grid、inline-table
- 双值：<外部> <内部>，使用空格分隔，该特性为 CSS3 增加 (inline-block == inline flow-root)
- flow 与 flow-root: flow 根据外类型自动判断容器为内联还是块级，flow-root 则是指定块级元素
- 关键字: none-元素不显示且不占用空间，contents-元素不产生盒子被伪盒子和子盒子取代
默认表现: HTML 元素一般根据其功能具有默认的 display
- 一般容器元素为 block，内容元素为 inline (注意 img 默认为 inline 元素)
- 常见 inline-block 元素有 input、textarea、button

BFC

BFC: 块级格式化上下文，BFC 的子元素不会影响外部元素
符合以下条件之一即可创建 BFC

根元素(html)
浮动元素
绝对定位
行内块级元素
表格、表格标题、表格单元格元素
overflow 非 visible 的块级元素
弹性元素
网格元素
多列容器

利用 BFC 的特点清除浮动带来的影响，最常用的 overflow: hidden

html

<style>
  .wrap {
    border: 1px solid;
  }
  .box {
    width: 500px;
    height: 100px;
    border: 1px solid;
    margin: 20px;
  }
  .left {
    float: left;
  }
  .bfc {
    overflow: hidden;
  }
</style>
<div class="wrap">
  <div class="box left"></div>
  <p class="bfc">
    阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴 阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴
  </p>
</div>

IFC

IFC: 内联格式化上下文

如何创建
- 内联元素
- 文本元素
表现特点
- 块方向上对齐：vertical-align
- 行内方向上对齐：text-align

元素浮动

设置浮动: float: left/right/none
应用本质: 为了实现文字环绕的效果
主要特性
- 包裹性/自适应：未设置宽度的浮动元素宽度为内容宽度，且不超过父元素宽度
- 块状化并格式化上下文：浮动元素 display 转换为 block 或 table
- 破坏文档流
- 无 margin 合并
清除浮动: clear: both/left/right (left/right 本质上只有一种情况生效)
- 作用于块级元素，让当前元素不受前一个 float 元素影响(不会改变 float 元素本身)
- left/right 对应前一个 float 元素的浮动方向，使用 both 可以免去判断

css

/* 容器内若存在浮动元素，添加一个块级元素(通常使用伪元素)并指定 clear: both 即可 */
.clear::after {
  content: "";
  display: block;
  clear: both;
}

元素定位

锚点定位

锚点定位时，会对定位目标所在容器进行滚动；说明 overflow: hidden 实际是隐藏了滚动条并禁用了默认的滚动事件，但仍可以控制其滚动距离；利用改特性可以手动监听 wheel 事件模拟滚动效果，隐藏滚动条

html

<style>
  .links {
    display: flex;
  }
  .links > a {
    margin: 30px;
  }
  .wrap {
    /* overflow: auto; */
    overflow: hidden;
    height: 500px;
  }
  .wrap > .rect {
    display: block;
    height: 500px;
    width: 200px;
    border: 1px solid;
  }
</style>
<div class="links">
  <a href="#a">a</a>
  <a href="#b">b</a>
  <a href="#c">c</a>
</div>
<div class="wrap" id="wrap">
  <a class="rect" name="a">a</a>
  <a class="rect" name="b">b</a>
  <a class="rect" name="c">c</a>
</div>
<script>
  const wrap = document.getElementById("wrap");
  wrap.addEventListener("wheel", event => {
    console.log(event);
    wrap.scrollTop += event.deltaY;
  });
</script>

绝对定位

position 指定元素的定位逻辑

取值: static(默认)、relative、absolute、fixed、sticky
absolute、fixed 用于绝对定位
- absolute 相对于最近的非 static 定位的祖先元素定位
- fixed 则是相对屏幕视口定位
- 配合 top、left、right、bottom 属性确定定位位置
- 配合 z-index 确定元素层级
绝对定位特点
- 包裹性/自适应
- BFC，浮动元素 display 转换为 block 或 table
- 破坏文档流

html

<!-- 绝对定位元素宽高百分比相对其定位参照元素(包含块) -->
<!-- 不指定宽度时呈现包裹性和自适应 -->
<style>
  .wrap {
    position: relative;
    height: 200px;
  }
  .box {
    position: absolute;
    height: 50%;
    border: 1px solid;
  }
</style>
<div class="wrap">
  <div class="box">阿萨</div>
</div>

包含块：元素用来计算和定位的框

初始包含块：根元素(html)

流式文档 ​

元素表现 ​

BFC ​

IFC ​

元素浮动 ​

元素定位 ​

锚点定位 ​

绝对定位 ​

流式文档

元素表现

BFC

IFC

元素浮动

元素定位

锚点定位

绝对定位