CSS文档流

167 阅读1分钟

一、 文档流的流动方向

  1. inline

从左到右,到达最右边时换行

  1. block

从上到下

  1. inline-block

从左到右

二、文档的宽度

  1. inline

内部内联元素宽度之和,不能用width指定

  1. block

默认auto,可用width指定

  1. inline-block

结合前两种的特点,可用width指定

三、文档的高度

  1. inline

由inline-height间接指定,不能用height指定

  1. block

由内部文档流元素的高度决定,可以由height指定

  1. inline-block

与block类似,可以由height指定

注:

1、 不能写width=100%,容易出现bug

2、 没有内容的div宽度为屏幕宽度

3、 没有内容的span的高度为auto

四、 文档的溢出

属性:

hidden:超出文档流的高宽度的内容将其隐藏

scroll:加入滚动条(水平、竖直滚动条)--不论超没超出

auto:超出加入滚动条,没超出不加滚动条

五、脱离文档流

1、 position:absolute、fixed

2、float方法