CSS 文档流

文档流

文档中元素的流动方向

流动方向

inline元素：从左到右到达最右边才会换行

block元素：从上到下，每一个都会另起一行

inline-block元素也是从左到右

宽度

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

block默认自动计算宽度，可以用width指定

inline-block结合两者特点，可以用width指定

注意：如果设置了宽度文本超出，设置超出文本自动换行word-wrap:break-word

高度

inline高度有line-height间接确定，跟height无关

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

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

注意：

• 不要再inline中加block元素

• 不要写width:100%;

• 当高度小于内部文档流为造成溢出

  overflow:hidden | auto | scroll | visible;
  
  hidden：隐藏
  
  scroll：滑动条
  
  auto：超出显示滚动条
  
  visible：直接显示溢出部分
  

• overflow可以分别设置overflow-x和overflow-y

• block元素没有内容高度为0，inline元素没有内容高度也不为0

脱离文档流

浮动：float

定位：postion：absolute / fixed