文档流（Normal Flow）

文档流：文档中元素的流动方向

inline元素、block元素、inline-block元素的区分是用display:xxxx;中设定来区分，元素本身没有内联元素/块元素之分。

• inline ：元素从左到右，填充满才会到下一行
• block ：元素元素从上到下，每个元素占一行
• inline-block ：从左到右，不会跨行

宽度

• inline ：宽度为内部 inline 元素的和，不能用 width 指定

• block ：默认为自动计算（auto）宽度，可用 width 设置。注意：不要写 width:100%;

• inline-block ：综合前两者特点，可以用 width 设置

高度

• inline ：高度由行高间接确定（字体不一致会有些微改变，具体原理看这篇文章：zhuanlan.zhihu.com/p/25808995【相关知识点：行盒】）不能用 height 指定 不能用height指定： 可视高度可以被“撑高”，但不改变实际高度： 高度由行高间接确定：

• block ：高度由内部文档流（可以脱离文档流，相当于算高度的时候没算）元素决定，可以设置 height 高度由内部文档流元素决定： 脱离文档流：该元素不再影响高度

• inline-block ：跟 block 类似，也可以设置 height inline-block：

overflow 溢出

当内容（宽度或高度）大于容器，会溢出:
可用 overflow 来设置是否显示滚动条：

• overflow:auto; 灵活设置
• overflow:scroll; 永远显示 (但是未溢出时也会显示滚动条，比较丑；如果有横向滚动条，内联元素默认只在第一屏展示)
• overflow:hidden; 直接隐藏溢出部分
• overflow:visible; 直接显示溢出部分
  overflow 可以分为 overflow-x 和 overflow-y

脱离文档流

有以下属性的元素会脱离文档流：

• float
• position:absolute/fixed