html 浮动脱离文档流,CSS标准文档流与脱离文档流

标准文档流

文档流：指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

标准流的微观现象：

空白折叠现象：

在 html 文件输入文本，多个空格会被合并成一个空格显示到浏览器页面中。这种现象称为空白折叠现象。

高矮不齐，底边对齐：

文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐；

自动换行，一行写不完时，换行写：

如果在一行内写文字过多，超过界面，那么浏览器会自动换行去显示我们的文字。

标准文档流等级

分为两种等级：块级元素和行内元素；

块级元素：

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

能接受宽、高

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

行内元素：

与其他元素并排

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

在HTML中，标签分为：文本级和容器级；

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

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

CSS的分类和上面的很像，就p不一样：所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。所有的容器级标签都是块级元素。

块级元素与行内元素的相互转换

块级元素可以设置为行内元素；行内元素也可以设置为块级元素。

举个例子：

div {

display: inline;

background-color: pink;

width: 400px;

height: 400px;

}

display是显示模式，用来改变元素的行内、块级性质inline就是“行内”，一旦给一个标签设置display:inline;

那么这个标签立即变为行内元素。

此时div和span没有什么区别;

此时的div不能设置宽度和高度(即使设置了也并不显示出来);

此时div可以和别人并排;

同理

span {

display: block;

width: 300px;

height: 300px;

background-color: green;

}

“block”是“块”的意思;

span标签变为块级元素，与div无异；

span能够设置高度和宽度；

span必须霸占一行，别人不能与之并排；

如果不设置宽度，那么将撑满父亲。

脱离标准文档流

三种方法：

1)浮动

浮动的元素会脱离文档流；

新建一个文档在页面上添加两个div给div分别加上class。

Document

给div设置一个宽高及背景颜色 给one左浮动

* {

/*清除默认边距*/

margin: 0;

padding: 0;

}

div {

width: 200px;

height: 200px;

}

.one {

float: left;

background-color: orange;

}

.two {

background-color: yellow;

}

然后用Chrome打开 结果会是这样

可以看出给one左浮动后two消失不见了，这时审查元素看一下

会发现two跑到one下面去了，这是因为给one盒子左浮动了。浮动的元素不会占空间所以two占去了one的位置。

2)绝对定位：

添加三个div分别加上class

给one设置绝对定位 并添加top：110px;left：150px;

可以看到one是可以飘在他们上面的

3)固定定位：

把one改成固定定位

刷新浏览器

发现他和absolute一样；唯一不同的就是他是固定在浏览器上的，fixed不会随着浏览器滚动条而滚动；