CSS学习笔记6：标准文档流

web页面的制作，是个“流”，像水流一样，必须从上往下，一点点的编织，不像画画，可以这个地方画一个，另一个地方画一个，随意而为。

一、标准文档流的一些微观现象

1. 空白折叠现象

1)标签与标签之间紧密连接，网页上两个内容也是紧密连接，中间没有空格。
2)标签与标签之间中间有一个空格，网页上两个内容之间也有一个空格的间隙。
3)标签与标签之间有一个以上的空格（n>1），网页上两个内容之间也只有一个空格。
通过第3)个现象可知，多出的空格折叠了，这就是所谓的空白折叠现象。

2.高矮不齐，底边对齐

网页上的两个不同的内容出现高低不同时，底边对齐。如图：

3.自动换行

二、块级元素和行内元素

在HTML中，我们已经将标签分为了：文本级、容器级。
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd

CSS标准文档流也将标签分为两种等级：
1） 块级元素
● 霸占一行，不能与其他任何元素并列
● 能接受宽、高
● 如果不设置宽度，那么宽度将默认变为父亲的100%。
2） 行内元素
● 与其他行内元素并排
● 不能设置宽、高。默认的宽度，就是文字的宽度。

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

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

总结如下图：

三、块级元素和行内元素的互换

1.块级元素可以设置为行内元素，其语法为：display: inline;

示例：

div{
    display: inline;
    background-color: pink;
    width: 500px;
    height: 500px;
}

display是“显示模式”的意思，用来改变元素的行内、块级性质
inline就是“行内”。
一旦，给一个块级元素设置display: inline;
那么，这个div将立即变为行内元素。此时它和一个span无异， 此时这个div：
●不能设置宽度、高度；
● 可以和别人并排了。

2.行内元素可以设置为块级元素，其语法为：display: block;

span{
    display: block;
    width: 200px;
    height: 200px;
    background-color: pink;
}

“block”是“块”的意思

让标签变为块级元素。此时这个标签，和一个div无异，此时这个span：
● 能够设置宽度、高度；
● 必须霸占一行了，别人无法和他并排；
● 如果不设置宽度，将撑满父亲。

标准流里面限制非常多，但是实际创建网页时，我们要让不同的块级元素并排布局，这该如何实现呢？那就是“脱离标准流”，CSS中一共有三种手段使一个元素脱离标准流，下面的博客，我将一一总结。谢谢！