5.3 - 文档流

1. 文档流中不同种类元素的特征

不同种类元素的对比

inline 和inline-block 在流动方面的区别？

inline-block 虽然看起来在文档流方向上面很像 inline 元素，但它还是拥有 block 元素的特点，不会跨两行显示。

inline-block 最大的特点：

• 同时具有 inline 元素和block 元素的特征：
  • 可以在一行内展示
  • 可以设定宽高

**line-height** 用于设置多行元素的空间量，如多行文本的间距。
对于 block 元素，它指定元素行盒的最小高度。
对于非替代的 inline 元素，它用于计算行盒的高度。
（inline-height - MDN）

【特别提醒】

• 新的 HTML5 的标准里元素是不分内联元素和块级元素的。所有元素都可以是内联元素或块级，看样式确定某时刻是内联的还是块级的。
• **div **的默认宽度是 **auto** 不是100%（一般来说永远不要设置宽度为100%）
• 如果<span>的字体不一样，那<span>所占的整个实际高度就不能通过line-height确定了，具体知识点叫行盒。

2. overflow 溢出

当内容大于容器

• 等内容的宽度或高度大于容器的，会溢出
• 可用于 overflow 来设置是否显示滚动条

  div {
  overflow: visible;        /* 直接显示溢出部分 */
  overflow: hidden;            /* 直接隐藏溢出部分 */
  overflow: scroll;            /* 永远显示（必带滚动条） */
  overflow: auto;                /* 灵活显示（滚动条看情况） */
  }

  如果文档内容有滚动条，那么内联元素默认只在第一屏显示，后面留空。

参考资料：overflow -MDN

脱离文档流

哪些元素脱离会文档流？

• float

• position：absolute / fixed

  怎么让元素不脱离文档流

• 不使用上述属性，只要不是float和绝对定位方式布局的，都在普通流里面

  参考文章： CSS 普通流 - 前端工程师手册 CSS 定位机制之一 ：普通流 - 葵中剑

部分资料来源：饥人谷 - 方方老师