标准文档流

宏观的讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。

（一）标准流的微观现象

1）空白折叠现象：

如果我们想让图片之间没有空隙，那么我们要让img标签紧密连接

例如  <img src="img/1.jpg" alt=""><img src="img/2.jpg" alt=""><img src="img/3.jpg" alt=""> 如下：

 例如    <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">   如下：图片中间是有空隙存在的

 2）高矮不齐，底边对齐

举个最简单的例子，180cm的人和150cm的人站在一块平地上，他俩脚底是对齐的

 3）  自动换行，一行放不下自动另起一行

（二）块级元素和行内元素

标准文档流等级森严。标签分为两种等级：

1） 块级元素

 霸占一行，不能与其他任何元素并列

能接受宽、高

如果不设置宽度，那么宽度将默认变为父亲的100%。

2） 行内元素

 与其他行内元素并排

不能设置宽、高。默认的宽度，就是文字的宽度。

在HTML中，我们已经将标签分过类，当时分为了：文本级、容器级。

文本级：p、span、a、b、i、u、em

容器级：div、h系列、li、dt、dd

CSS的分类和上面的很像，就p不一样：

所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。

所有的容器级标签都是块级元素。

（三）块级元素和行内元素的相互转换

         块级元素可以设置为行内元素

         行内元素可以设置为块级元素

一旦，给一个标签设置        display: inline;

div{                     display: inline;                  }

那么，这个标签将立即变为行内元素。此时它和一个span无异：

● 此时这个div不能设置宽度、高度；

● 此时这个div可以和别人并排了

同样的，如果给一个标签设置     display:block;

span{                display: block;               }

让标签变为块级元素。此时这个标签，和一个div无异：

● 此时这个span能够设置宽度、高度

● 此时这个span必须霸占一行了，别人无法和他并排

● 如果不设置宽度，将撑满父亲

重要知识点：

css中一共有三种手段，使一个元素脱离标准文档流：

1） 浮动

2） 绝对定位

3） 固定定位

ps：大部分内容取自外部。