文档流的方向

所有元素按照从左到右，从上到下的顺序排列

Span,Div,InlineBlock 之间区别

流动方向:

• span 从左到右依次放置，且存在跨行现象
• div 一定独占一行
• inline-block 从左到右依次放置，允许一行多个tag的存在，但不存在跨行现象 代码示例

宽度：

设置宽度时不要轻易width:100%

span

• width等于内部的文字与内嵌的内联元素的宽度总和
• 不支持指定width
• 不允许内嵌div

div

• 默认width不是100%而是auto

inlineBlock

• 默认width与span一样情况，但是可以指定width
  代码示例

高度:

span

• height由line-height决定而不是padding，padding构造出来的仅仅是假象
• line-height相同情况下，字体不同也会细微影响高度
• 如果span中无内容,span标签依旧会占据高度

div

• 由内部文档流元素决定
• 如果div中无内容，div标签则不会占据高度

inlineBlock

• 可设置height
  代码示例

Overflow:

默认值visible
代码示例