基本概念

文档流是指文档中元素流动的方向。

哪些是 inline 元素，哪些是 block 元素

文档流 | MDN

要理解几个重要的概念

• 文档流 Normal Flow span元素从左到右， div元素从上到下。
• 块、内联、内联块
• margin 合并
• 两种盒模型(border-box 更符合人类思维)

  inline 元素里不要写 block 元素。不知道会遇到什么 bug。
  style width:100%就不要这么用。

流动方向

• inline元素从左到右，到达最右边才会换行
• block元素从上到下，每一个都另起一行
• inline-block也是从左到右,但是到达最后的时候，不会把自己分成两块。

宽度

• inline宽度为内部inline元素的和，不能用width指定
• block默认自动计算宽度，可用width指定
• inline-block结合前两者特点，可用width

高度

• inline高度由line-height间接确定，跟height无关
• block高度由内部文档流元素决定，可以设height
• inline-block跟block类似，可以设置height

overflow 溢出

当内容大于容器

• 当内容的宽度或高度大于容器的，会溢出
• 可用overflow来设置是否显示滚动条
• auto是灵活设置(常用)
• scroll是永远显示
• hidden是直接隐藏溢出部分(常用)
• visible是直接显示溢出部分(常用)
• overflow可以分为overflow-x和overflow-y(不好用)

脱离文档流

回忆一下

• block 高度由内部文档流元素决定，可以设 height。

  这句话的意思是说，有些元素可以不在文档流中。

哪些元素脱离文档流

• float:left/right
• position:absolute/fixed

  如果脱离了文档流，那么你所在的容器就不把你算到高度里了。

怎么让元素不脱离文档流

不用上面属性不就不脱离了 hhh。